WebGPU

WebGPU permite gráficos 3D de alto desempenho e computação paralela de dados.

Published on Updated on

Translated to: English, Español

O que é WebGPU?

WebGPU é uma nova API da web que expõe recursos gráficos de computador modernos, especificamente Direct3D 12, Metal e Vulkan, para realizar operações de renderização e computação em uma unidade de processamento gráfico (GPU).

Diagrama de arquitetura mostrando a conexão WebGPUs entre APIs do SO e Direct3D 12, Metal e Vulkan.
Diagrama da arquitetura WebGPU

Esse objetivo é semelhante à família WebGL de APIs, mas o WebGPU permite o acesso a recursos mais avançados de GPUs. Considerando que WebGL é principalmente para desenhar imagens, mas pode ser reaproveitado com grande esforço para outros tipos de cálculos, WebGPU fornece suporte de primeira classe para realizar cálculos gerais na GPU.

Após quatro anos de desenvolvimento no grupo da comunidade "GPU para a Web" do W3C, o WebGPU está agora pronto para que os desenvolvedores experimentem o Chrome e forneçam feedback sobre a API e a linguagem de sombreamento.

"Após uma década de WebGL trazendo gráficos 3D para a web e permitindo todos os tipos de novas experiências, agora é hora de atualizar a pilha e ajudar os desenvolvedores da web a tirar o máximo proveito das placas gráficas modernas. WebGPU chega bem na hora!" Mr.doob, Creator of Three.js
WebGPU nos deixa mais perto do metal e também revela o poder do sombreamento de computação para desenvolvedores da Web. Novas experiências 3D podem ser construídas hoje no [Babylon.js Playground](https://playground.babylonjs.com/#XCNL7Y). David Catuhe, Creator of Babylon.js
Uma demonstração do Babylon.js de um mar agitado sendo simulado usando o recurso de sombreamento de computação do WebGPU.

Status atual

DegrauStatus
1. Crie um explicadorCompleto
2. Crie o rascunho inicial das especificaçõesEm andamento
3. Reúna feedback e repita o designEm andamento
4. Teste de origem

Em andamento

5. LançamentoNão foi iniciado

Como usar o WebGPU

Ativando via about://flags

Para experimentar o WebGPU localmente, sem um token de teste de origem, habilite o sinalizador #enable-unsafe-webgpu about://flags .

Habilitando o suporte durante a fase de teste de origem

A partir do Chrome 94, o WebGPU está disponível como um teste original no Chrome. Espera-se que o teste de origem termine no Chrome 101 (18 de maio de 2022).

Origin trials allow you to try new features and give feedback on their usability, practicality, and effectiveness to the web standards community. For more information, see the Origin Trials Guide for Web Developers. To sign up for this or another origin trial, visit the registration page.

Registre-se para o teste de origem

  1. Request a token for your origin.
  2. Add the token to your pages. There are two ways to do that:
    • Add an origin-trial <meta> tag to the head of each page. For example, this may look something like:
      <meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">
    • If you can configure your server, you can also add the token using an Origin-Trial HTTP header. The resulting response header should look something like:
      Origin-Trial: TOKEN_GOES_HERE

Detecção de recurso

Para verificar se WebGPU é compatível, use:

if ("gpu" in navigator) {
// WebGPU é suportado! 🎉
}
Caution

O adaptador de GPU retornado por navigator.gpu.requestAdapter() pode ser null .

Comece

WebGPU é uma API de baixo nível, como WebGL. É muito poderoso, bastante prolixo e requer a compreensão de conceitos-chave antes de mergulhar nele. É por isso que vou criar um link para conteúdo de alta qualidade existentes neste artigo para você começar a usar o WebGPU.

Suporte do navegador

O WebGPU está disponível em dispositivos selecionados no ChromeOS, macOS e Windows 10 no Chrome 94, com mais dispositivos sendo suportados no futuro. O suporte experimental para Linux está disponível executando o Chrome com --enable-features=Vulkan. Mais suporte para mais plataformas virá em seguida.

A lista completa de problemas conhecidos está disponível no documento Origin Trial Caveats .

No momento em que este artigo foi escrito, o suporte WebGPU estava em andamento no Safari e no Firefox .

Suporte de plataforma

Como no mundo do WebGL, algumas bibliotecas também implementam WebGPU:

  • Dawn é uma implementação C++ de WebGPU usada no Chromium. Ele pode ser usado para direcionar WebGPU em aplicativos C e C++ que podem então ser transferidos para WebAssembly usando Emscripten e automaticamente tirar vantagem da WebGPU no navegador.
  • Wgpu é uma implementação Rust de WebGPU usada no Firefox. É usado por vários aplicativos de GPU no ecossistema Rust, por exemplo, Veloren, um RPG de voxel multijogador.

Demos

Segurança e privacidade

Para garantir que uma página da web funcione apenas com seus próprios dados, todos os comandos são rigorosamente validados antes de chegarem à GPU. Verifique a seção de considerações de uso malicioso da especificação WebGPU para aprender mais sobre as compensações de segurança relacionadas a bugs de driver, por exemplo.

Feedback

A equipe do Chrome quer ouvir sobre suas experiências com WebGPU.

Conte-nos sobre o design da API

Há algo na API ou na linguagem de sombreamento que não funciona como você esperava? Ou faltam métodos ou propriedades de que você precisa para implementar sua ideia? Tem uma pergunta ou comentário sobre o modelo de segurança? Registre um problema de especificação no repositório GitHub correspondente ou adicione suas ideias a um problema existente.

Comunicar um problema com a implementação

Você encontrou um bug com a implementação do Chrome? Ou a implementação é diferente da especificação? Registre um bug em new.crbug.com. Certifique-se de incluir o máximo de detalhes que puder sobre o conteúdo da página interna about:gpu, instruções simples para reproduzir e insira Blink>WebGPU na caixa Componentes. Glitch funciona muito bem para compartilhar reproduções rápidas e fáceis.

Mostrar suporte para WebGPU

Você está planejando usar o WebGPU? Seu apoio público ajuda a equipe do Chrome a priorizar os recursos e mostrar a outros fornecedores de navegadores como é fundamental apoiá-los.

Envie um tweet para @ChromiumDev usando a hashtag #WebGPU e diga-nos onde e como você está usando a API. Faça uma pergunta no StackOverflow com a hashtag #webgpu.

Links úteis

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.