attribute
Creates a bridge in the TSL shader to access per-vertex geometry data (like position, normal, uv) directly on the GPU.
Core Advantages
Achieves type-safe, modular, and configurable vertex data access by abstracting away low-level GLSL declarations. It seamlessly integrates Three.js's geometry system with shaders, greatly enhancing code robustness and reusability.
Common Uses
Vertex Displacement (e.g., water surfaces, flags)
Procedural Vertex Color (e.g., coloring by height)
Reading Custom Vertex Data (e.g., particle size, birth time)
Texture Blending Mask (using vertex colors)
How to adjust
Changing the `name` parameter switches to a different vertex data stream (e.g., from 'uv' to 'uv2' changes texture coordinates). A more powerful adjustment is to dynamically modify the underlying BufferAttribute data in JavaScript and set `.needsUpdate = true`, enabling vertex animations like a 'boiling' or 'jittering' effect based on custom random attributes.
Code Examples
1const randomVec = attribute('randomness', 'vec3');
2const distortion = randomVec.mul( sin( time.mul(2.0) ) ).mul(0.5);
3
4// Use the custom attribute to distort the vertex position
5const finalPosition = position.add( distortion );