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

Transcript

1. WebGPU O futuro da visualização 3D no navegador
2. Roadmap 1. Bibliotecas Gráficas 2. Funcionamento 3. Aplicações 4. Ambiente de Desenvolvimento 5. Mão na massa!
3. Bibliotecas Gráficas
4. 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).
5. 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.
6. 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.
7. 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.
8. 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.
11. Funcionamento
13. JS (WebGPU)
19. Aplicações
20. Sites interativos
21. Jogos no Browser
22. Aplicações 3D no Browser
23. Aplicações de Gráficos no Browser
24. Aplicações CAD no Browser
25. Machine Learning no Cliente
26. Mobile
27. Metaverso
28. Shaders
29. 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.
30. 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.
31. 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).
32. Ambiente de Desenvolvimento
33. Ferramentas • Node LTS (A versões superiores têm problemas de compatibilidade no momento.) • Typescript • Webpack • Visual Studio Code • Navegador (Chrome Canary)
34. 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.
35. Mão na massa!
37. $ git clone https://github.com/Camilotk/webgpu-quickstart QUICKSTART!
38. Bora lá!
39. Obrigado! E-mail: camilotk@gmail.com LinkedIn: https://www.linkedin.com/in/2cazevedo/ GitHub: https://github.com/Camilotk Telegram: @cazevedo