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
   

   View Slide

2. Roadmap
   1. Bibliotecas Gráficas
   2. Funcionamento
   3. Aplicações
   4. Ambiente de Desenvolvimento
   5. Mão na massa!
   

   View Slide

3. Bibliotecas Gráficas
   

   View Slide

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).
   

   View Slide

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.
   

   View Slide

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.
   

   View Slide

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.
   

   View Slide

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.
   

   View Slide

9. View Slide

10. View Slide

11. Funcionamento
    

    View Slide

12. View Slide

13. JS (WebGPU)
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. Aplicações
    

    View Slide

20. Sites interativos
    

    View Slide

21. Jogos no Browser
    

    View Slide

22. Aplicações 3D no Browser
    

    View Slide

23. Aplicações de Gráficos no Browser
    

    View Slide

24. Aplicações CAD no Browser
    

    View Slide

25. Machine Learning no Cliente
    

    View Slide

26. Mobile
    

    View Slide

27. Metaverso
    

    View Slide

28. Shaders
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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).
    

    View Slide

32. Ambiente de Desenvolvimento
    

    View Slide

33. Ferramentas
    ● Node LTS (A versões superiores têm
    problemas de compatibilidade no momento.)
    ● Typescript
    ● Webpack
    ● Visual Studio Code
    ● Navegador (Chrome Canary)
    

    View Slide

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.
    

    View Slide

35. Mão na massa!
    

    View Slide

36. View Slide

37. $ git clone https://github.com/Camilotk/webgpu-quickstart
    QUICKSTART!
    

    View Slide

38. Bora lá!
    

    View Slide

39. Obrigado!
    E-mail: camilotk@gmail.com
    LinkedIn: https://www.linkedin.com/in/2cazevedo/
    GitHub: https://github.com/Camilotk
    Telegram: @cazevedo
    

    View Slide