WebGL Textures & Vertices

Beginner's Guide

Page Fifty Nine

WebGL API vertexAttribPointer() for Vertices

The WebGL API method vertexAttribPointer() includes a somewhat complicated parameter list. However vertexAttribPointer() provides the greatest opportunity to understand the connection between JavaScript and the vertex shader.

vertexAttribPointer() tells the shader how to process buffer data. In other words, vertexAttribPointer() describes where vertex data appears within the buffer. vertexAttribPointer() sets up the stream of vertex and texel data, which runs through the vertex shader. Additionally vertexAttribPointer() tells the processor which shader attribute to process that data.

Here we assign just vertex data to the shader's attribute a_position. However later the GLEntity class, assigns texel data to the shader's attribute a_tex_coord0, with a similar call to vertexAttribPointer().

A formal declaration of vertexAttribPointer() displays in the following listing. Subsequent paragraphs discuss each parameter by name.

vertexAttribPointer
(
 Number index, 
 Number size,
 Number type, 
 boolean normalized, 
 Number stride, 
 Number offset
)

Listing 57: WebGL API vertexAttribPointer() Formal Declaration

The first parameter Number index is the index location of an attribute within the vertex shader. We use the property aPosition. Previously we saved the index of the vertex shader's attribute named a_position to the property aPosition.

The second parameter Number size tells the processor how many array entries to assign to the attribute a_position. We prepared three vertex coordinates for each vertex. One coordinate for the X axis, one for the Y axis, and one for the Z axis. Therefore assign 3 to the second parameter.

The third parameter Number type tells the processor the type of data within the buffer. We prepared the vertex texel array with floating point numbers. Therefore assign gl.FLOAT to the third parameter.

The fourth parameter boolean normalized indicates whether or not the values in the buffer need normalization. Normalized values range between -1.0 and +1.0. The vertex texel arrays prepared for the book's examples provide vertex coordinates with values no less than -1.0 and no greater than +1.0. The array doesn't need normalization. Assign gl.FALSE to the fourth parameter.

The fifth parameter Number stride represents the number of Bytes between attributes in the buffer. We prepared vertex texel arrays with five entries between each set of vertex coordinates. Three entries for each set of X, Y, Z coordinates, plus two entries for each set of S, T texels, equals five. Each entry in the array is a floating point number. WebGL floats require four Bytes each. 3 vertex coordinates, plus 2 texel coordinates, times 4 Bytes per coordinate equals 20 Bytes between vertices.

(3 + 2) * 4 = 20.

Assign 20 to the fifth parameter.

The sixth parameter Number offset tells the processor where to start accessing entries in the buffer. Our first vertex begins at the first entry of the array. Assign 0 to the last parameter.

The following listing shows how method getBuffers() calls the WebGL method vertexAttribPointer(). Once complete the vertex shader's attribute a_position may process a series of vertices, one at a time. The vertices originate with the Float32Array of vertices and texels, prepared for an individual project.

gl.vertexAttribPointer
(
 this.aPosition, 
 3, 
 gl.FLOAT, 
 gl.FALSE, 
 20, 
 0
 );

Listing 58: WebGL API vertexAttribPointer() for Vertices

WebGL Beginner's Guide Introduction WebGL Beginner's Guide
Copyright © 2015 Seven Thunder Software. All Rights Reserved.