bufferAttribute
Injects a large JavaScript data array (TypedArray) into the shader as read-only storage, allowing for efficient random access via an integer index, greatly simplifying GPGPU (General-Purpose GPU) tasks.
Core Advantages
Its core advantage is extreme ease of use. It fully automates complex tasks like creating data textures and handling index calculations, allowing developers to access the entire dataset with an intuitive `element(index)` method. This decouples data from geometry and offers excellent performance.
Common Uses
GPU particle systems (storing particle states)
Skeletal animation (as a lookup table for bone matrices)
Vertex animation textures (storing per-frame vertex data)
Large-scale terrain or water displacement (providing heightfield data)
How to adjust
Adjusting the `offset` parameter reads different parts of interleaved data. For example, in an array containing [position, velocity, ...], incorrectly setting the velocity's `offset` to 1 instead of 2 will cause the shader to read corrupted data (e.g., the y-component of position and x-component of velocity). This would make particles move along incorrect paths, visually demonstrating the importance of a precise memory layout.
Code Examples
1// Read position and velocity separately from an interleaved data source
2// using stride and offset.
3const dataNode = bufferAttribute( interleavedData, 'vec2', 4 );
4
5// Position data starts at offset 0
6dataNode.offset = 0;
7const position = dataNode.element( particleIndex );
8
9// Velocity data starts at offset 2
10dataNode.offset = 2;
11const velocity = dataNode.element( particleIndex );