materialReference
A factory function that creates a node to reference any JavaScript material property (standard or custom), acting as a universal data bridge between JS and TSL.
Core Advantages
It provides ultimate extensibility, replacing complex `onBeforeCompile` hacks or `ShaderMaterial` rewrites with a single line of code. It enables intuitive data-binding from JS to TSL and allows for easy inter-material parameter linking.
Common Uses
Creating JS-controllable parameters for custom shader effects like dissolve or energy shields.
Linking parameters between different object materials, e.g., a console's color driving another object's glow.
Accessing standard material properties that lack a preset TSL node, such as `aoMapIntensity`.
Making configurable material variants by changing properties in JS to generate different looks.
How to adjust
This node is "adjusted" by modifying the property it references on the material in JavaScript, e.g., `myMaterial.rippleFrequency = 20.0;`. The visual effect depends entirely on how this value is used within the TSL node graph, such as changing the density or strength of an energy shield's ripples.
Code Examples
1
2// Reference custom properties from the JS material
3const rippleFreq = materialReference('rippleFrequency', 'float');
4const rippleStrength = materialReference('rippleStrength', 'float');
5
6// Use the referenced values to create a ripple and distort the normal
7const ripplePattern = sin(uv().y.mul(rippleFreq).add(time));
8const distortedNormal = normalView.add(vec3(ripplePattern).mul(rippleStrength));
9