WebGL Textures & Vertices

Beginner's Guide

Page Sixty Four

Calculate Stride and Offset

The following table demonstrates how to calculate stride and offsets with data from the Float32Array, prepared for the Lighthouse Texture Map project. WebGL method vertexAttribPointer() uses stride and offset parameters, based on Byte location within a buffer. The offset for the first vertex in the buffer, for this book's examples, equals 0. The offset for the first texel in the buffer, for this book's examples, equals 12.

GLEntity assigns texels to an attribute with vertexAttribPointer(), therefore the offset value equals 12. The stride for interleaved vertices and texels always equals 20 when five floating point values separate entries. However if we created an array of vertices only, then stride would equal 0. If we created a non interleaved array with four vertices at the start, followed by four texels, then the texel offset would equal forty eight. Four vertices times three coordinates per vertex times four Bytes per coordinate equals forty eight. Stride between texels and vertices would equal zero.

4 * 3 * 4 = 48

WebGL allows the developer to assign data from different offsets with more or less stride between entries, for a range of uses. This book scratches the surface. Seven Thunder Software's book WebGL Textures: Introduction to Mipmaps, Sub Images & Atlases covers use of stride and offset with a little more detail. Currently only pirated versions exist on the Web, please don't download, pay for, or register for WebGL Textures: Introduction to Mipmaps, Sub Images & Atlases. Plans are in place to post the official free version here. Until then, see WebGL Textures projects online and take a look at the source code.

vertexAttribPointer Table GLSquare

Diagram 20: Calculate Offsets

Method setImageVariables(GLControl) calls the WebGL method enableVertexAttribArray(Number) to activate the texture attribute. The controller section previously demonstrated how to activate the attribute which processes vertices. The following listing activates the attribute which processes texels.

gl.enableVertexAttribArray
(
 this.aTexCoord
);

Listing 65: WebGL API enableVertexAttribArray(Number) for Texels

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