Three.js r183: PostProcessing se torna RenderPipeline
O Three.js r183 foi lançado em 18 de fevereiro e representa uma mudança arquitetural maior do que a maioria das versões pontuais. A principal mudança: PostProcessing foi renomeado para RenderPipeline. E não se trata apenas de uma renomeação. Isso reflete como a classe evoluiu do simples gerenciamento de pós-processamento para um sistema completo de pipeline que gerencia múltiplos passes de renderização e buffers de histórico.
Introdução ao WebGPU no Three.js e ao sistema de nós de shader TSL
RenderPipeline substitui PostProcessing
A nova classe RenderPipeline foi projetada especificamente para o WebGPURenderer. Ela gerencia toda a configuração do pipeline de renderização e as cadeias de efeitos de pós-processamento, além de definir a saída final por meio de um outputNode. A propriedade outputColorTransform controla o mapeamento de tons padrão e a transformação do espaço de cores.
Isso é importante porque o antigo nome PostProcessing era enganoso. Com a integração de antisserrilhamento temporal (TRAA) para iluminação volumétrica, reflexos em espaço de tela com estabilidade temporal e suporte a pipelines HDR usando buffers de saída HalfFloatType, a classe já fazia muito mais do que pós-processamento. O novo nome corresponde à realidade.
Clock é descontinuado e Timer chega
A classe Clock agora está descontinuada em favor da nova classe Timer. Se você usa Clock em seus loops de animação, comece a migrar. O novo Timer oferece uma API mais simples para a mesma funcionalidade de acompanhamento de tempo.
BatchedMesh ganha controle por instância
BatchedMesh ganhou suporte a opacidade por instância e materiais em wireframe. Essa é uma adição importante para cenas de mundo aberto e jogos de construção de cidades, nos quais é necessário fazer instâncias individuais aparecerem e desaparecerem gradualmente sem criar materiais separados. Isso também permite aplicar seletivamente a renderização em wireframe a instâncias específicas para depuração ou efeitos estilísticos.
Pós-processamento com WebGPU no Three.js usando React Three Fiber
Melhorias nos materiais
MeshLambertMaterial e MeshPhongMaterial agora oferecem suporte à iluminação baseada em imagem (IBL) de scene.environment. Antes, esses materiais mais leves não podiam usar mapas de ambiente para iluminação ambiente, o que levava os desenvolvedores a optar pelo MeshStandardMaterial, mais custoso. Agora você pode usar IBL com materiais legados quando a precisão de PBR não for necessária.
MeshPhysicalMaterial adiciona suporte a clearcoat para luzes de área retangular. Se você renderiza pintura automotiva ou superfícies polidas iluminadas por luzes de área, a camada de clearcoat agora responde corretamente.
Otimizações de desempenho
Matrix4.decompose() agora armazena em cache o cálculo do determinante, e invert() foi otimizado. Esses métodos são chamados milhares de vezes por quadro em cenas com muitos objetos, portanto a economia acumulada faz diferença.
Especificação do TSL e nó clipSpace
O Three.js r183 apresenta um documento formal de especificação do TSL (TSL.md) e um novo nó clipSpace. O TSL (Three.js Shading Language) permite escrever código de shader em JavaScript que é compilado para WGSL no WebGPU ou GLSL no WebGL. A nova especificação formaliza a API do sistema de nós, facilitando a criação de bibliotecas de terceiros baseadas nele.
O nó clipSpace fornece acesso direto às coordenadas no espaço de recorte no TSL, sendo útil para efeitos em espaço de tela e técnicas de projeção personalizadas.