Skip to content

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 中直接提供对裁剪空间坐标的访问,适合屏幕空间效果与自定义投影技术。

参考资料 ​