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

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

Bibliotecas Gráficas

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

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.

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.

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.

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.

No content

No content

Funcionamento

No content

JS (WebGPU)

No content

No content

No content

No content

No content

Aplicações

Sites interativos

Jogos no Browser

Aplicações 3D no Browser

Aplicações de Gráficos no Browser

Aplicações CAD no Browser

Machine Learning no Cliente

Mobile

Metaverso

Shaders

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.

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.

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

Ambiente de Desenvolvimento

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

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.

Mão na massa!

No content

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

Bora lá!

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