array
A node for creating and managing data arrays within a shader, simplifying bulk data transfer from CPU to GPU and enabling powerful dynamic index access.
Core Advantages
Its main advantage is abstracting low-level GLSL arrays into a simple function and providing powerful dynamic indexing capabilities (using a variable as an index to access array members), which makes implementing complex, loop-based, and data-driven effects (like multiple lights or particle systems) simple and intuitive.
Common Uses
Managing the positions and colors of multiple dynamic lights
Serving as a preset color palette (Look-Up Table) for stylized rendering
Passing an array of bone transformation matrices for skinned animation
How to adjust
It's adjusted in two main ways: 1. By modifying the node's `.value` property in JavaScript, you can update the entire array's data content in real-time (e.g., changing a color palette from red/yellow/blue to black/white/gray). 2. By changing the index node passed to the `.element()` method, you can dynamically alter the data access pattern (e.g., using a `timer` node as the index to make a static color array cycle and flash).
Code Examples
1
2// Create a palette array with three colors
3const palette = array( [ color('red'), color('yellow'), color('blue') ] );
4
5// Get a color from the array using a dynamic index (e.g., based on UV coordinates)
6const finalColor = palette.element( floor( uv().x.mul( 3 ) ) );
7