Attributes 1: Defining attribute buffers

Attribute buffers are Lux objects that encapsulate a stream of values that will be combined a few at a time to make WebGL primitives. For example, 3 consecutive values in an attribute buffer would make a triangle, or each value would make a separate point.

In cases where your data doesn't change very often, you don't need to worry about attributes, since Lux will typically create one for you automatically. In fact, this is exactly what Lux.model has been doing for you behind the scenes when interpreting the vertex field.

However, if you have dynamic data, you don't want to have to create a new actor every time, since creating an actor is slow (due to creating GPU programs associated with it). With attribute buffers, you can change the stream of values dynamically without changing the actor (similarly to how Lux parameters work).

Creating attribute buffers

var x_array = new Float32Array(n_points);
x_array[0] = 2; 
// ... etc. in your code, initialize x_array as necessary.
var x_buffer = Lux.attribute_buffer({
    item_size: 1,
    vertex_array: x_array
});

The value of item_size determines whether the stream of values will be interpreted as a stream of float, vec2, vec3 or vec4 values.

Using attribute buffers

Attribute buffers behave like Shade values of the appropriate type:

var dots = Lux.Marks.dots({
    position: scale(Shade.vec(x_buffer, y_buffer)),
    elements: n_points
});

Changing attribute buffer values

Change attribute buffers by calling their set method:

x_array[3] = 5;
x_array[6] = 7; // etc
x_buffer.set(x_array);
Lux.Scene.invalidate();

Notice you need to request a redraw manually. Lux isn't yet smart enough to know that a particular buffer is being used in a scene, so if you don't call invalidate, you will not see the changes in your scene.