Three.js r183:PostProcessing 变为 RenderPipeline
Three.js r183 于 2 月 18 日发布,是一次比多数点发布更大的架构调整。最显眼的变化:PostProcessing 改名为 RenderPipeline。这不只是改名,而是反映了该类从一个简单的后处理管理器,逐步演化为处理多渲染遍与历史缓冲的完整管线系统。
Three.js WebGPU 与 TSL 着色器节点系统介绍
RenderPipeline 取代 PostProcessing
新的 RenderPipeline 类专为 WebGPURenderer 设计。它管理完整的渲染管线设置、后处理效果链,并通过 outputNode 定义最终输出。outputColorTransform 属性控制默认的色调映射与色彩空间变换。
这一改名很关键,因为旧的 PostProcessing 名字已经具有误导性。随着时间推移,它已经集成了用于体积光的 TRAA、带时间稳定性的屏幕空间反射,以及基于 HalfFloatType 输出缓冲的 HDR 管线支持,做的事情早已远超后处理。新名字更贴合实际。
Clock 废弃,Timer 登场
Clock 类被废弃,由新的 Timer 类取代。如果你的动画循环使用了 Clock,请开始迁移。新的 Timer 在保持相同时间追踪功能的同时,提供更干净的 API。
BatchedMesh 获得逐实例控制
BatchedMesh 新增逐实例不透明度与线框材质支持。对开放世界场景和城市建造类应用是重要补充,可以在不创建独立材质的情况下淡入淡出单个实例。也可以选择性地为指定实例应用线框渲染,用于调试或风格化效果。
用 React Three Fiber 在 Three.js 中实现 WebGPU 后处理
材质改进
MeshLambertMaterial 和 MeshPhongMaterial 现在支持基于图像的环境光照(IBL,通过 scene.environment)。此前这些更便宜的材质无法使用环境贴图做环境光,使开发者不得不转向更昂贵的 MeshStandardMaterial。现在,在不需要 PBR 精度的场景中,也能在旧材质上使用 IBL。
MeshPhysicalMaterial 为矩形面光源加入了 clearcoat 支持。如果你在用面光源渲染车漆或抛光表面,clearcoat 层现在会正确响应。
性能优化
Matrix4.decompose() 现在缓存了行列式计算,invert() 也得到了优化。在包含很多对象的场景中,这些函数每帧被调用上千次,累计节省相当可观。
TSL 规范与 clipSpace 节点
Three.js r183 引入了正式的 TSL 规范文档(TSL.md)和新的 clipSpace 节点。TSL(Three.js Shading Language)让你用 JavaScript 写着色器代码,可编译为 WebGPU 的 WGSL 或 WebGL 的 GLSL。新规范让节点系统的 API 正式化,第三方库基于其构建更容易。
clipSpace 节点在 TSL 中直接提供对裁剪空间坐标的访问,适合屏幕空间效果与自定义投影技术。