backgroundRotation
Provides a standardized interface in TSL shaders to get the scene's background environment map rotation matrix (mat3), ensuring object reflections are perfectly synchronized with the environment's orientation.
Core Advantages
Completely automates the complex tasks of matrix calculation and manual uniform synchronization. Developers can adjust a single property, and the engine guarantees that all material reflections and lighting stay consistent with the background rotation, greatly simplifying the creation of dynamic environments and artistic adjustments.
Common Uses
In custom reflection/refraction materials, to rotate the sampling direction vector to match the rotated environment map.
Creating dynamic day-night cycles or moving sky effects, where object lighting changes in real-time with the environment's rotation.
Ensuring the light source position (e.g., the sun) in a procedural skybox aligns perfectly with the specular highlights on PBR objects.
In interactive product viewers, allowing users to rotate the environmental lighting in real-time via drag-and-drop.
How to adjust
The value of this node cannot be adjusted directly. You need to modify the `scene.backgroundRotation.angle` property (a float representing radians) in your JavaScript code. Changing this angle will synchronously rotate both the scene background and the reflections/lighting on all objects that use this node.
Code Examples
1// The original, calculated reflection direction
2const reflectedDir = ...;
3
4// Rotate the direction using the backgroundRotation node to match the environment's rotation
5const rotatedDir = backgroundRotation.mul( reflectedDir );
6
7// Use the rotated direction to sample the environment map
8const reflectedColor = texture( envMap, rotatedDir );