Chapter 387: BufferAttributeNode

Core Idea

In earlier three.js versions it was only possible to define attribute data on geometry level. With BufferAttributeNode, it is also possible to do this on the node level.

const geometry = new THREE.PlaneGeometry();
const positionAttribute = geometry.getAttribute( 'position' );
const colors = [];
for ( let i = 0; i < position.count; i ++ ) {
	colors.push( 1, 0, 0 );
}
material.colorNode = bufferAttribute( new THREE.Float32BufferAttribute( colors, 3 ) );

This new approach is especially interesting when geometry data are generated via compute shaders. The below line converts a storage buffer into an attribute node.

material.positionNode = positionBuffer.toAttribute();

Key Concepts

• attribute : BufferAttribute: A reference to the buffer attribute.
• bufferOffset : number: The buffer offset.
• bufferStride : number: The buffer stride.
• bufferType : string: The buffer type (e.g. 'vec3').
• global : boolean: BufferAttributeNode sets this property to true by default.
• instanced : boolean: Whether the attribute is instanced or not.
• isBufferNode : boolean (readonly): This flag can be used for type testing.
• usage : number: The usage property. Set this to THREE.DynamicDrawUsage via .setUsage(), if you are planning to update the attribute data per frame.

Reference Tables

Constructor

Signature
`new BufferAttributeNode( value : BufferAttribute

Properties

Property	Description
.attribute : BufferAttribute	A reference to the buffer attribute.
.bufferOffset : number	The buffer offset.
.bufferStride : number	The buffer stride.
.bufferType : string	The buffer type (e.g. 'vec3').
.global : boolean	BufferAttributeNode sets this property to true by default.
.instanced : boolean	Whether the attribute is instanced or not.
.isBufferNode : boolean (readonly)	This flag can be used for type testing.
.usage : number	The usage property. Set this to THREE.DynamicDrawUsage via .setUsage(), if you are planning to update the attribute data per frame.

Methods

Method	Description
.generate( builder : NodeBuilder ) : string	Generates the code snippet of the buffer attribute node.
.generateNodeType( builder : NodeBuilder ) : string	This method is overwritten since the node type is inferred from the buffer attribute.
.getHash( builder : NodeBuilder ) : string	This method is overwritten since the attribute data might be shared and thus the hash should be shared as well.
.getInputType( builder : NodeBuilder ) : string	Overwrites the default implementation to return a fixed value 'bufferAttribute'.
.setInstanced( value : boolean ) : BufferAttributeNode	Sets the instanced property to the given value.
.setUsage( value : number ) : BufferAttributeNode	Sets the usage property to the given value.
.setup( builder : NodeBuilder )	Depending on which value was passed to the node, setup() behaves differently. If no instance of BufferAttribute was passed, the method creates an internal attribute and configures it respectively.

Key Takeaways

1. BufferAttributeNode extends: EventDispatcher → Node → InputNode
2. Most relevant properties: attribute, bufferOffset, bufferStride, bufferType.
3. Key methods: generate, generateNodeType, getHash, getInputType.

Connects To

• EventDispatcher: parent class
• Node: parent class
• InputNode: parent class
• Source: src/nodes/accessors/BufferAttributeNode.js