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. 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.
  9. None
  10. None
  11. Funcionamento

  12. None
  13. JS (WebGPU)

  14. None
  15. None
  16. None
  17. None
  18. None
  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!

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

  38. Bora lá!

  39. Obrigado! E-mail: [email protected] LinkedIn: https://www.linkedin.com/in/2cazevedo/ GitHub: https://github.com/Camilotk Telegram: @cazevedo