Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebGPU: O futuro da visualização 3D no navegador

WebGPU: O futuro da visualização 3D no navegador

Em 2022 foi lançado a especificação de uma nova API para trabalhar com gráficos 3D no navegador chamada WebGPU.

🔗 https://www.w3.org/TR/webgpu/

Eu fui convidado na Jornada Acadêmica do IFRS onde apresentei sobre como isso vai mudar a forma como se faz aplicações 3D e quais as vantagens sobre a atual API usada em projetos 3D (WebGL).

Além da explicação, também fiz live coding ao vivo de um projeto "Hello World" usando TypeScrypt e WSGL para mostrar como fazer o triângulo do OpenGL Book em WebGL. O código foi enviado ao Github na medida em que foi feito e pode ser acessado no link abaixo.

🐙 https://github.com/Camilotk/webgpu-hello

Camilo de Azevedo

November 18, 2022
Tweet

More Decks by Camilo de Azevedo

Other Decks in Technology

Transcript

  1. WebGL e OpenGL WebGL é a atual API de Gráficos

    padrão dos Navegadores que funciona como wrapper (camada) sobre uma biblioteca de código-aberto chamada OpenGL para interagir com gráficos 3D renderizados por GPU (Placa Gráfica).
  2. O problema! Enquanto Sistemas Operacionais como Linux e Android tem

    o OpenGL como API padrão de Gráficos 3D, outros Sistemas Operacionais como Windows e MacOS tem APIs gráficas próprias, respectivamente DirectX e Metal. Isso acaba sendo um problema porque para rodar em SOs sem suporte é necessário usar uma ferramenta chamada Angle para converter os comandos OpenGL para os nativos o que não é performático.
  3. Vulkan A algum tempo vem sendo desenvolvido em consórcio ente

    empresas de gráficos, navegadores e SOs uma API padrão de gráficos chamada Vulkan para permitir performance nativa de gráficos em diferentes SOs e GPUs.
  4. E os navegadores? Esse ano (2022) começou o trabalho de

    um consórcio formado pelas empresas Apple, Microsoft, Mozilla e Google responsáveis pelo desenvolvimento dos respectivos navegadores Safari, Edge, Firefox e Chrome para criar uma nova API para gráficos 3D. a WebGPU.
  5. E como WebGPU resolve o problema? Diferente da API anterior

    WebGL que era um wrapper sobre a OpenGL, a WebGPU é uma API padrão capaz de se comunicar de forma agnóstica com qualquer biblioteca 3D. Isso permite que ela acesse gráficos nativos em Vulkan, DirectX, OpenGL ou Metal com o mesmo código independente de qual seja o padrão permitindo mais performance e capacidade de processamento da GPU no navegador.
  6. O que são? Shaders (sombreadores em PT-BR) são os códigos

    responsáveis por interagir com o processamento gráfico para calcular volume, textura, luz e cor durante a renderização de objetos 3D.
  7. GLSL Tradicionalmente os Shaders em OpenGL (e por consequência em

    WebGL) são escritos em OpenGL Shading Language (GLSL) que é uma linguagem de alto nível baseada na sintaxe de C++ feita para que o programador possa interagir com gráficos em OpenGL de forma neutra.
  8. WGSL A nova especificação traz uma nova linguagem de alto

    nível para interagir com gráficos baseado na sintaxe de C++ e Rust. Ela vai ser o padrão, mas também será possível interagir com a GPU escrevendo Shaders em outras linguagens de programação caso haja suporte e o programador queira (atualmente sendo suportado Rust e Python).
  9. Ferramentas • Node LTS (A versões superiores têm problemas de

    compatibilidade no momento.) • Typescript • Webpack • Visual Studio Code • Navegador (Chrome Canary)
  10. Navegador • Por ser uma API que atualmente está em

    fase de desenvolvimento, atualmente é necessário usar o Navegador Chrome na versão Canary. • Atualmente ainda não está disponível em nenhuma versão do Firefox, Edge ou Safari que também fazem parte do consórcio da W3C, mas em breve será possível também nesses navegadores.