backgroundRotation
backgroundRotation
在 TSL 着色器中提供一个标准化的接口,用于获取场景背景环境贴图的旋转变换矩阵(mat3),以确保物体的反射与环境旋转完美同步。
核心优势
将复杂的矩阵计算和手动 uniform 同步工作完全自动化。开发者只需调整一个属性,引擎即可保证所有材质的反射和光照与背景旋转保持一致,极大地简化了动态环境的创建和艺术调整。
常见用途
在自定义反射/折射材质中,旋转采样方向向量,以匹配旋转后的环境贴图。
创建动态日夜循环或移动天空效果,让物体光照随环境旋转而实时变化。
确保程序化天空盒中的光源(如太阳)位置与 PBR 物体的反射高光位置精确对齐。
在交互式产品展示应用中,允许用户通过拖拽实时旋转环境光照。
如何调整
此节点的值无法直接调整。你需要在 JavaScript 中修改 `scene.backgroundRotation.angle` 属性(一个以弧度为单位的浮点数)。改变这个角度会使场景背景和所有使用此节点的物体的反射/光照同步旋转。
代码示例
1// 计算出的原始反射方向
2const reflectedDir = ...;
3
4// 使用 backgroundRotation 节点旋转该方向,以匹配环境旋转
5const rotatedDir = backgroundRotation.mul( reflectedDir );
6
7// 使用旋转后的方向进行环境贴图采样
8const reflectedColor = texture( envMap, rotatedDir );