Three.js r183: PostProcessing se convierte en RenderPipeline
Three.js r183 se publicó el 18 de febrero y supone un cambio arquitectónico mayor que la mayoría de las versiones menores. El cambio principal: PostProcessing ahora se llama RenderPipeline. No es solo un cambio de nombre. Refleja cómo la clase ha evolucionado desde la gestión sencilla del posprocesado hasta convertirse en un sistema completo de pipeline que gestiona múltiples pasadas de renderizado y búferes de historial.
Introducción a WebGPU en Three.js y al sistema de nodos de shaders TSL
RenderPipeline sustituye a PostProcessing
La nueva clase RenderPipeline está diseñada específicamente para WebGPURenderer. Gestiona la configuración completa del pipeline de renderizado y las cadenas de efectos de posprocesado, y define la salida final mediante un outputNode. La propiedad outputColorTransform controla el mapeo de tonos y la transformación del espacio de color predeterminados.
Esto es importante porque el antiguo nombre PostProcessing resultaba engañoso. Con la integración del antialiasing temporal (TRAA) para la iluminación volumétrica, los reflejos en espacio de pantalla con estabilidad temporal y la compatibilidad con pipelines HDR mediante búferes de salida HalfFloatType, la clase ya hacía mucho más que posprocesado. El nuevo nombre refleja la realidad.
Clock queda obsoleto y llega Timer
La clase Clock ahora está obsoleta en favor de la nueva clase Timer. Si utilizas Clock en tus bucles de animación, empieza a migrar. El nuevo Timer ofrece una API más clara para la misma funcionalidad de seguimiento del tiempo.
BatchedMesh incorpora control por instancia
BatchedMesh incorpora opacidad por instancia y compatibilidad con materiales de estructura alámbrica. Es una incorporación importante para escenas de mundo abierto y juegos de construcción de ciudades, donde necesitas hacer aparecer y desaparecer gradualmente instancias individuales sin crear materiales separados. También permite aplicar de forma selectiva el renderizado de estructura alámbrica a instancias concretas con fines de depuración o para conseguir efectos estilísticos.
Posprocesado con WebGPU en Three.js mediante React Three Fiber
Mejoras en los materiales
MeshLambertMaterial y MeshPhongMaterial ahora admiten iluminación basada en imágenes (IBL) mediante scene.environment. Antes, estos materiales menos costosos no podían utilizar mapas de entorno para la iluminación ambiental, lo que obligaba a los desarrolladores a recurrir al más costoso MeshStandardMaterial. Ahora puedes utilizar IBL con materiales clásicos cuando no necesites la precisión del PBR.
MeshPhysicalMaterial incorpora compatibilidad con el recubrimiento transparente para luces de área rectangulares. Si renderizas pintura de automóviles o superficies pulidas iluminadas por luces de área, la capa de recubrimiento transparente ahora reacciona correctamente.
Optimizaciones de rendimiento
Matrix4.decompose() ahora almacena en caché el cálculo del determinante y invert() se ha optimizado. Estas funciones se invocan miles de veces por fotograma en escenas con muchos objetos, por lo que el ahorro acumulado es considerable.
Especificación de TSL y nodo clipSpace
Three.js r183 presenta un documento formal de especificación de TSL (TSL.md) y un nuevo nodo clipSpace. TSL (Three.js Shading Language) permite escribir código de shaders en JavaScript que se compila como WGSL para WebGPU o como GLSL para WebGL. La nueva especificación formaliza la API del sistema de nodos, lo que facilita que bibliotecas de terceros puedan desarrollar sobre ella.
El nodo clipSpace ofrece acceso directo a las coordenadas del espacio de recorte en TSL, algo útil para efectos en espacio de pantalla y técnicas de proyección personalizadas.