Associating Attributes & Buffer Objects

Each attribute in the vertex shader program points to a vertex buffer object. After creating the vertex buffer objects, programmers have to associate them with the attributes of the vertex shader program. Each attribute points to only one vertex buffer object from which they extract the data values, and then these attributes are passed to the shader program.

To associate the Vertex Buffer Objects with the attributes of the vertex shader program, you have to follow the steps given below −

• Get the attribute location
• Point the attribute to a vertex buffer object
• Enable the attribute

Get the Attribute Location

WebGL provides a method called getAttribLocation() which returns the attribute location. Its syntax is as follows −

ulong getAttribLocation(Object program, string name)

This method accepts the vertex shader program object and the attribute values of the vertex shader program.
The following code snippet shows how to use this method.

var coordinatesVar = gl.getAttribLocation(shader_program, "coordinates"); 

Here, shader_program is the object of the shader program and coordinates is the attribute of the vertex shader program.

Point the Attribute to a VBO

To assign the buffer object to the attribute variable, WebGL provides a method called vertexAttribPointer(). Here is the syntax of this method −

void vertexAttribPointer(location, int size, enum type, bool normalized, long stride, long offset)

This method accepts six parameters and they are discussed below.

• Location − It specifies the storage location of an attribute variable. Under this option, you have to pass the value returned by the getAttribLocation() method.
• Size − It specifies the number of components per vertex in the buffer object.
• Type − It specifies the type of data.
• Normalized − This is a Boolean value. If true, non-floating data is normalized to [0, 1]; else, it is normalized to [-1, 1].
• Stride − It specifies the number of bytes between different vertex data elements, or zero for default stride.
• Offset − It specifies the offset (in bytes) in a buffer object to indicate which byte the vertex data is stored from. If the data is stored from the beginning, offset is 0.

The following snippet shows how to use vertexAttribPointer() in a program −

gl.vertexAttribPointer(coordinatesVar, 3, gl.FLOAT, false, 0, 0);

Enabling the Attribute

Activate the vertex shader attribute to access the buffer object in a vertex shader. For this operation, WebGL provides enableVertexAttribArray() method. This method accepts the location of the attribute as a parameter. Here is how to use this method in a program −

gl.enableVertexAttribArray(coordinatesVar);