Three.js r183 : PostProcessing devient RenderPipeline
Three.js r183 est sortie le 18 février et apporte une évolution architecturale plus importante que la plupart des versions intermédiaires. Le changement majeur : PostProcessing a été renommé RenderPipeline. Il ne s'agit pas d'un simple changement de nom. Celui-ci reflète l'évolution de la classe, passée d'une gestion basique du post-traitement à un système complet de pipeline prenant en charge plusieurs passes de rendu et des tampons d'historique.
Introduction à Three.js WebGPU et au système de nœuds de shaders TSL
RenderPipeline remplace PostProcessing
La nouvelle classe RenderPipeline est conçue spécifiquement pour WebGPURenderer. Elle gère la configuration complète du pipeline de rendu et les chaînes d'effets de post-traitement, et définit la sortie finale au moyen d'un outputNode. La propriété outputColorTransform contrôle le tone mapping par défaut et la transformation de l'espace colorimétrique.
Ce changement est important, car l'ancien nom PostProcessing était trompeur. Avec l'intégration de l'anticrénelage temporel (TRAA) pour l'éclairage volumétrique, les réflexions en espace écran avec stabilité temporelle et la prise en charge des pipelines HDR utilisant des tampons de sortie HalfFloatType, la classe faisait déjà bien plus que du post-traitement. Son nouveau nom correspond à la réalité.
Clock dépréciée, Timer fait son apparition
La classe Clock est désormais dépréciée au profit d'une nouvelle classe Timer. Si vous utilisez Clock dans vos boucles d'animation, commencez la migration. La nouvelle classe Timer fournit une API plus claire pour les mêmes fonctionnalités de suivi du temps.
BatchedMesh gagne un contrôle par instance
BatchedMesh prend désormais en charge l'opacité par instance et les matériaux en fil de fer. Il s'agit d'un ajout important pour les scènes en monde ouvert et les jeux de construction urbaine, où il faut pouvoir faire apparaître ou disparaître progressivement des instances individuelles sans créer de matériaux séparés. Cela permet également d'appliquer sélectivement un rendu en fil de fer à certaines instances à des fins de débogage ou pour créer des effets stylistiques.
Post-traitement WebGPU dans Three.js avec React Three Fiber
Améliorations des matériaux
MeshLambertMaterial et MeshPhongMaterial prennent désormais en charge l'éclairage basé sur l'image (IBL) de scene.environment. Auparavant, ces matériaux moins coûteux ne pouvaient pas utiliser de textures d'environnement pour l'éclairage ambiant, ce qui poussait les développeurs vers MeshStandardMaterial, plus gourmand. Vous pouvez maintenant utiliser l'IBL avec les matériaux historiques lorsqu'une précision PBR n'est pas nécessaire.
MeshPhysicalMaterial prend désormais en charge le vernis pour les sources lumineuses rectangulaires. Si vous effectuez le rendu de peintures automobiles ou de surfaces polies éclairées par des sources lumineuses rectangulaires, la couche de vernis réagit maintenant correctement.
Optimisations des performances
Matrix4.decompose() met désormais en cache le calcul du déterminant, et invert() a été optimisée. Ces méthodes sont appelées des milliers de fois par image dans les scènes comportant de nombreux objets : les gains cumulés deviennent donc significatifs.
Spécification TSL et nœud clipSpace
Three.js r183 introduit un document formel de spécification TSL (TSL.md) et un nouveau nœud clipSpace. TSL (Three.js Shading Language) permet d'écrire en JavaScript du code de shader compilé soit en WGSL pour WebGPU, soit en GLSL pour WebGL. La nouvelle spécification formalise l'API du système de nœuds, facilitant ainsi son utilisation comme base par les bibliothèques tierces.
Le nœud clipSpace donne un accès direct aux coordonnées de l'espace de découpage dans TSL, ce qui est utile pour les effets en espace écran et les techniques de projection personnalisées.