scriptableValue
A dynamic bridge node that allows a shader value on the GPU to be driven in real-time by a variable on the CPU (JavaScript), essential for creating interactive effects.
Core Advantages
Greatly simplifies creating data-driven and interactive visual effects. Developers can efficiently pass dynamic data to the shader by simply updating the node's .value property in the animation loop, without manual uniform management.
Common Uses
Controlling material properties (e.g., roughness, color) in real-time with UI sliders or mouse position.
Driving visual feedback based on game state or external data (e.g., character health, weather API).
Creating smooth, programmatic animations based on time or algorithms (e.g., color gradients, vertex displacement).
How to adjust
Adjust its effect by modifying its .value property in JavaScript. For example, connect it to an emissiveNode and update its color value based on the mouse's X coordinate to make the object's emissive glow change as the cursor moves.
Code Examples
1const dynamicRoughness = scriptableValue( 0.5 );
2material.roughnessNode = dynamicRoughness;
3
4// In the render loop
5dynamicRoughness.value = ( Math.sin( elapsedTime ) + 1 ) / 2;