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
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.
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.
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.
Size − It specifies the number of components per vertex in the buffer object.
Type − It specifies the type of data.
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].
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.
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.
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);

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); 


    10 Lectures 
     1 hours 

 Frahaan Hussain

    28 Lectures 
     4 hours 

 Frahaan Hussain
 Print
 Add Notes
 Bookmark this page