WebGL Textures & Vertices

Beginner's Guide

Page Sixty Three

WebGL API vertexAttribPointer() for Texels

If the entity has a valid attribute for processing texels, then prepare the attribute to receive texel coordinate data from a buffer.

The WebGL API method vertexAttribPointer() assigns texels from our vertex texel buffer, to the GLEntity aTexCoord property. Follow the same process described in the section titled WebGL API vertexAttribPointer() for Vertices. However, the first, second and last parameter receive different values.

Assign values from the buffer which apply to texels. We need to instruct the GPU where texels exist within the buffer. Once instructed, only texels will run through the shader's attribute.

The first parameter to WebGL method vertexAttribPointer(), is the location of an attribute within the vertex shader. Locations are indicated with numbers. Use the GLEntity property aTexCoord. Property aTexCoord maintains a number which locates the attribute a_tex_coord<n> within the vertex shader. Remember n is the index number of this particular entity. This book only includes one entity and the index number is always zero.

The second parameter, Number size, tells the processor how many array entries to assign to the attribute a_tex_coord0. We prepared two coordinates for each texel. One coordinate for the S horizontal axis and one for the T vertical axis. Therefore pass 2 to the second parameter.

The sixth parameter Number offset tells the processor where to start accessing entries in the buffer. The processor counts Bytes to determine offsets. Each entry is a float. WebGL floats require four Bytes each. The first texel begins just past the first set of three vertex coordinates representing X, Y, and Z components. Find the product of four Bytes times three entries. 3 * 4 = 12. Assign 12 to the last parameter.

gl.vertexAttribPointer
(
 this.aTexCoord, 
 2, 
 gl.FLOAT, 
 gl.FALSE, 
 20, 
 12
);

Listing 64: WebGL API vertexAttribPointer() for Texels

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