A tecnologia Nanite da UE5 no WebGPU

Nanite WebGPU

Resumo

• Nanite WebGPU é um projeto que implementa o Nanite em navegadores web usando WebGPU.
• Funciona apenas no Chrome.
• Inclui hierarquia de LOD de meshlets, rasterizador por software e impostores billboard.
• Suporta culling de frustum e de oclusão.
• Suporta texturas e normais de vértice.
• Funciona offline usando Deno.

Funcionalidades

• Hierarquia de LOD de meshlets

  • Faz o pré-processamento da malha no navegador usando WebAssembly.
  • Também oferece recurso de exportação de arquivos.

• Rasterizador por software

  • O WebGPU não suporta atomic<u64>.
  • Compacta profundidade (u16) e normais codificadas em octaedro (2 * u8) em 32 bits.

• Impostores billboard

  • Exibe uma mistura de 12 imagens de acordo com a posição da câmera.
  • Não trata as visões de cima e de baixo.

• Culling

  • Por instância: culling de frustum e de oclusão.
  • Por meshlet: culling de frustum e de oclusão.
  • Por triângulo: backface culling por hardware e z-buffer.

• Permite alternar entre renderização baseada em GPU e implementação em CPU.

• Suporta simultaneamente modelos com textura e vários objetos.

• Permite alterar parâmetros em tempo de execução.

• Fornece estatísticas: memória, geometria, quantidade de meshlets, quantidade de triângulos etc.

• Suporta formato de arquivo personalizado.

• Suporta quantização de posição de vértice e normais codificadas em octaedro.

• Trata redimensionamento da janela.

• Funciona offline usando Deno.

• É possível copiar o código de WebGPU e WGSL para o projeto.

Objetivos

1. Simplicidade: começar com arquivos OBJ e processar tudo dentro do aplicativo.
2. Experimentação: permitir testar desempenho alterando várias configurações.

Cenas de demonstração

• Jinx: 120*120 instâncias, 640m triângulos.
• Lucy e dragão: 70*70 instâncias, 1.7b triângulos.
• Lucy: 110*110 instâncias, 1.2b triângulos.
• Dragão: 70*70 instâncias, 1.2b triângulos.
• Coelho: 500*500 instâncias, 1.2b triângulos.
• Prévia de impostor: aumento do tamanho da textura do impostor.

Como usar

• Mova-se com as teclas [W, S, A, D] e suba/desça com [Z, SPACEBAR].
• É possível corrigir bugs alternando as opções de culling.
• É possível medir o desempenho usando o botão Profile.

FAQ

• Principais diferenças em relação ao Nanite da UE5

  • A métrica de erro de simplificação é simples.
  • A simplificação de meshlets é simples.
  • Não há culling de oclusão em 2 etapas.
  • Não há fila de trabalho nos shaders.
  • Não há remoção nem streaming de LODs não usados da VRAM.
  • Não há visibility buffer.
  • Não há sombras/multiview integrados.
  • Não consegue lidar com muitos objetos diferentes.
  • Não há profiler de GPU.

• O que significa ter bilhões de triângulos

  • Malhas densas podem impactar negativamente o desempenho.
  • Um grande número de instâncias consome muita VRAM.
  • O arranjo da cena afeta o desempenho.

• Pontos surpreendentes sobre o Nanite

  1. O objetivo do DAG não é usar poucos triângulos para objetos distantes.
  2. Gasta-se mais tempo com culling e trabalho de meshlets do que com o próprio Nanite.
  3. A hierarquia de LOD de meshlets funciona com facilidade.
  4. Se a malha não for simplificada de forma limpa, o desempenho cai.

• Simplificação de malha

  • Muitos problemas podem surgir no processo de simplificação.
  • A UE5 usa seu próprio código de simplificação de malha.

• Métrica de erro

  • Escolher o meshlet apropriado é o ponto central do Nanite.

• Vale a pena escrever sua própria implementação de Nanite?

  • Usar a UE5 é o caminho mais simples.
  • Para fins de aprendizado, vale a pena implementar por conta própria.

• O valor do backface cone culling de meshlets

  • É eficaz em malhas densas.
  • Pode se sobrepor ao culling de oclusão.
  • Chamadas ao WebAssembly podem causar queda de desempenho.

Resumo do GN⁺

• O Nanite WebGPU é um projeto interessante que implementa o Nanite em navegadores web.
• Ele otimiza o desempenho por meio de várias técnicas de culling e de um rasterizador por software.
• Em comparação com a UE5, há diferenças na simplificação e na métrica de erro.
• Para fins de aprendizado, implementar por conta própria pode valer a pena, mas em projetos reais usar a UE5 pode ser melhor.
• Um projeto com funcionalidade semelhante é o Nanite do Unreal Engine 5.

[GN⁺]

Comentários do Hacker News

• A implementação de terceiros do Nanite é interessante

  • Nanite é uma forma muito inteligente de representar meshes gráficas
  • Repetições são tratadas por links, e submeshes podem ser compartilhadas recursivamente
  • Suporta níveis de detalhe dentro da mesh, então submeshes pequenas são removidas
  • Conteúdo repetido em grande escala pode ser renderizado rapidamente com poucos dados
  • Os designs atuais de GPU não combinam bem com o Nanite, e é necessário trabalho em novo hardware
  • A demo do Unreal Engine mostra uma cena usando repetidamente a mesma estátua
  • Criar meshes Nanite é complexo, e atualmente isso só é possível no editor do Unreal Engine
  • Os offsets internos do formato podem fornecer uma superfície de ataque

• O Bevy também tem o Virtual Geometry, que implementa as ideias do Nanite

  • O autor do Bevy pode responder diretamente às perguntas
  • Scthe contribuiu para melhorar o código do Bevy

• Não é bom que a demo use a string do user-agent para determinar compatibilidade

  • A compatibilidade de recursos deveria ser detectada e usada individualmente
  • Estou usando Chromium e uso WebGPU com frequência, mas a demo exige Chrome

• O WebGPU não funciona no iPhone 12 Pro Max

  • Ativei o WebGPU nos recursos experimentais, mas ele funciona em outros sites
  • Seria bom se o app web fornecesse mais informações sobre a causa da falha

• Foi necessário fazer concessões para contornar a falta de atômicos de 64 bits no WebGPU

  • Em hardware de classe desktop, isso é suportado quase universalmente

• O nome e a descrição são confusos e podem violar marca registrada

  • Não tem relação com o Nanite real, e foi implementado por alguém sem vínculo com o UE5
  • O Virtual Geometry do Bevy pode ser mais útil

• Comparação com sistemas de LOD de outros motores

  • O Godot oferece LOD automático
  • No Unity, é preciso criar manualmente os modelos de LOD
  • O NeoAxis tem uma abordagem interessante, mas o desempenho não é bom
  • O Unreal está muito à frente em mostrar muitos objetos na tela

• Li uma discussão interessante no fórum do three.js sobre implementação de geometria virtual

  • A discussão sobre implementações de gráficos para web e trade-offs foi interessante

• Pergunta sobre a afirmação de que rasterizadores por software são mais rápidos que rasterizadores por hardware

  • O objetivo da GPU é acelerar a rasterização
  • É difícil entender isso, a menos que o rasterizador por software esteja rodando na GPU

• Erro de WebGPU ao executar a demo jinx em um M2 Max

  • Mensagem de erro: "Fill size (7398781) is not a multiple of 4 bytes"