time
An auto-updating node that provides a linearly increasing float (seconds) to the shader, serving as the foundation for all time-driven animations.
Core Advantages
Greatly simplifies animation creation. It automates time updates, freeing developers from manually managing clocks and uniforms in JS, allowing animation logic to be fully encapsulated in the shader for cleaner, more declarative code.
Common Uses
Driving vertex displacement to simulate effects like water waves or waving flags.
Creating scrolling textures for effects like lava, waterfalls, or conveyor belts.
Animating material properties via periodic functions (e.g., sin) to create blinking, pulsing, or breathing effects.
How to adjust
Adjusted by performing math operations on its output. Multiplying by a constant (e.g., `time.mul(5)`) changes the animation speed; passing it to a periodic function (e.g., `sin(time)`) converts linear motion into a back-and-forth oscillation.
Code Examples
1// Convert linear time to a periodic wave and apply displacement along the normal
2const animatedPosition = position.add(
3 normal.mul( sin( time.mul( 3 ) ).mul( 0.1 ) )
4);
5
6material.positionNode = animatedPosition;