WebGL Textures & Vertices

Beginner's Guide

Page Eight

WebGL API Cast Float32Array(Array)

The WebGL API cast Float32Array(Array) formats the JavaScript array of Number to a typed array of floating point numbers, where each number has 32 bits of precision. The only parameter is a JavaScript array of Number. The Float32Array(Array) cast, returns a Float32Array type containing the numerical data from the Array in the parameter list.

The next step explains how to prepare data for an element array buffer.

Element Array Buffer

Element array buffers use indices to order the display of each vertex and texel. Additionally indices allow us to reuse entries in the array.

An element array buffer tells WebGL to access vertex and texel coordinates with integer indices. Indices provide a shorthand method to access multiple values. This section demonstrates how to use the previous interleaved array, with indices. One index represents five values. One index points to three vertex coordinates for X, Y, and Z values, plus two texel coordinates for S and T values.

The following table demonstrates the association between indices, vertices, and texels. Index entries begin at 0 and end at the length of an array minus 1. For example index [0] points to the first vertex. Index [1] points to the second vertex. Index [3] points to the last vertex declared in an array, when the array's length equals 4. Upload an array of vertices and texels to the GPU, then use an element array buffer of indices, to tell WebGL which order to draw the values. The section titled Controller Details explains how to upload arrays as buffers to the GPU. This section concentrates on preparing typed arrays.

Array Table

Diagram 6: Associate Indices with Vertices and Texels

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