Three.js r183: PostProcessing wird zu RenderPipeline
Three.js r183 wurde am 18. Februar veröffentlicht und bringt eine größere architektonische Veränderung mit sich als die meisten Zwischenversionen. Die wichtigste Änderung: PostProcessing wurde in RenderPipeline umbenannt. Dabei handelt es sich nicht nur um eine Namensänderung. Sie spiegelt wider, wie sich die Klasse von einer einfachen Verwaltung der Nachbearbeitung zu einem vollständigen Pipeline-System entwickelt hat, das mehrere Rendering-Durchläufe und Verlaufspuffer verwaltet.
Einführung in Three.js WebGPU und das TSL-Shader-Node-System
RenderPipeline ersetzt PostProcessing
Die neue Klasse RenderPipeline wurde speziell für WebGPURenderer entwickelt. Sie verwaltet die vollständige Einrichtung der Rendering-Pipeline sowie Effektketten für die Nachbearbeitung und definiert die endgültige Ausgabe über einen outputNode. Die Eigenschaft outputColorTransform steuert das standardmäßige Tone Mapping und die Farbraumtransformation.
Das ist relevant, weil die alte Bezeichnung PostProcessing irreführend war. Mit der Integration von temporaler Kantenglättung (TRAA) für volumetrische Beleuchtung, Screen-Space-Reflexionen mit zeitlicher Stabilität und Unterstützung für HDR-Pipelines mittels HalfFloatType-Ausgabepuffern leistete die Klasse bereits weit mehr als reine Nachbearbeitung. Der neue Name entspricht ihrer tatsächlichen Funktion.
Clock ist veraltet, Timer kommt
Die Klasse Clock ist nun veraltet und wird durch die neue Klasse Timer ersetzt. Wenn du Clock in deinen Animationsschleifen verwendest, solltest du mit der Migration beginnen. Der neue Timer bietet eine übersichtlichere API für dieselbe Funktionalität zur Zeiterfassung.
BatchedMesh erhält instanzspezifische Steuerung
BatchedMesh unterstützt jetzt instanzspezifische Deckkraft und Wireframe-Materialien. Das ist eine wichtige Ergänzung für Open-World-Szenen und Städtebau-Spiele, in denen einzelne Instanzen ein- und ausgeblendet werden müssen, ohne separate Materialien zu erstellen. Außerdem kannst du Wireframe-Rendering nun gezielt auf bestimmte Instanzen anwenden – für Debugging oder stilistische Effekte.
WebGPU-Nachbearbeitung in Three.js mit React Three Fiber
Materialverbesserungen
MeshLambertMaterial und MeshPhongMaterial unterstützen jetzt bildbasierte Beleuchtung (IBL) über scene.environment. Zuvor konnten diese weniger rechenintensiven Materialien keine Umgebungskarten für die Umgebungsbeleuchtung verwenden, wodurch Entwickler auf das aufwendigere MeshStandardMaterial ausweichen mussten. Jetzt kannst du IBL mit älteren Materialien verwenden, wenn keine PBR-Genauigkeit erforderlich ist.
MeshPhysicalMaterial unterstützt jetzt Klarlack für rechteckige Flächenlichter. Wenn du Autolack oder polierte Oberflächen renderst, die von Flächenlichtern beleuchtet werden, reagiert die Klarlackschicht nun korrekt.
Leistungsoptimierungen
Matrix4.decompose() speichert die Determinantenberechnung jetzt im Cache, und invert() wurde optimiert. In Szenen mit vielen Objekten werden diese Methoden pro Frame Tausende Male aufgerufen, sodass sich die eingesparte Rechenzeit summiert.
TSL-Spezifikation und clipSpace-Node
Three.js r183 führt ein formelles TSL-Spezifikationsdokument (TSL.md) und einen neuen clipSpace-Node ein. Mit TSL (Three.js Shading Language) kannst du Shader-Code in JavaScript schreiben, der entweder zu WGSL für WebGPU oder zu GLSL für WebGL kompiliert wird. Die neue Spezifikation formalisiert die API des Node-Systems und erleichtert es Drittanbieterbibliotheken, darauf aufzubauen.
Der clipSpace-Node bietet in TSL direkten Zugriff auf Clip-Space-Koordinaten, was für Screen-Space-Effekte und benutzerdefinierte Projektionstechniken nützlich ist.