materialRotation
Provides access to the `rotation` property on a `SpriteMaterial`, which defines the 2D rotation angle of a Sprite around its center.
Core Advantages
Seamlessly integrates `SpriteMaterial`'s rotation logic with TSL, enabling efficient GPU-side processing of thousands of sprite rotations without manual Uniform management, which is crucial for performance-sensitive scenarios like particle systems.
Common Uses
Rotating a sprite's vertices in the vertex shader for standard sprite rotation.
Creating rotating UI icons or loading indicators by animating the `material.rotation` property in JS.
In 2D particle systems, acting as a bridge to pass each particle's unique rotation state to the GPU.
As a UV transform factor to rotate the texture inside a sprite instead of its boundary.
How to adjust
Adjust by modifying the `rotation` property (a number in radians) of a `SpriteMaterial` in JavaScript. Positive values cause clockwise rotation, while negative values cause counter-clockwise rotation. Continuously changing this value in an animation loop produces a smooth spinning animation.
Code Examples
1// In the vertex shader, build a 2D rotation matrix using materialRotation
2const c = cos( materialRotation );
3const s = sin( materialRotation );
4const rotationMatrix = mat2( c, s, -s, c );
5
6// Apply the rotation to the sprite's vertex positions
7const rotatedPosition = rotationMatrix.mul( position.xy );