WebGL Textures & Vertices

Beginner's Guide

Page Sixty

Prepare Element Array Buffer

Create an empty WebGLBuffer for the element array buffer. Call to the WebGL API method createBuffer(), described previously. The following line generates an empty buffer for our indices.

var bIndices = gl.createBuffer();

For the vertex texel array getBuffers() called the WebGL API method bindBuffer(Number, WebGLBuffer), with the parameter ARRAY_BUFFER. However for the element array buffer, call bindBuffer(Number, WebGLBuffer) with the parameter ELEMENT_ARRAY_BUFFER. The element array buffer accesses the vertex texel buffer indirectly. Indices within the ELEMENT_ARRAY_BUFFER point to vertices and texels within the ARRAY_BUFFER. An ELEMENT_ARRAY_BUFFER specifies accessing an ARRAY_BUFFER through indices. The two buffers work together. An ELEMENT_ARRAY_BUFFER tells the GPU the order to process entries from the ARRAY_BUFFER. The following listing demonstrates binding the empty WebGLBuffer named bIndices as an ELEMENT_ARRAY_BUFFER.

gl.bindBuffer
(
 gl.ELEMENT_ARRAY_BUFFER,
 bIndices
);

Listing 59: WebGL API bindBuffer(ELEMENT_ARRAY_BUFFER, WebGLBuffer)

WebGL API bufferData(ELEMENT_ARRAY_BUFFER, Uint16Array, STATIC_DRAW)

The WebGL API method bufferData() uploads data to a buffer on the GPU. The first parameter is a WebGL constant. Use either ARRAY_BUFFER or ELEMENT_ARRAY_BUFFER. For our array of element data use the parameter ELEMENT_ARRAY_BUFFER. The second parameter is the prepared Uint16Array of index data. The third parameter represents buffer usage with a WebGL constant. Use either STATIC_DRAW, DYNAMIC_DRAW, or STREAM_DRAW. For data modified once and used multiple times, assign STATIC_DRAW to the third parameter. The following listing demonstrates uploading the Uint16Array of data to the GPU.

gl.bufferData
(
 gl.ELEMENT_ARRAY_BUFFER, 
 aI, 
 gl.STATIC_DRAW
);

Listing 60: WebGL API bufferData(ELEMENT_ARRAY_BUFFER, Uint16Array, STATIC_DRAW)

Prepare Buffers Summary

The method getBuffers() called by the GLControl constructor, prepares WebGL buffers from a Float32Array and a Uint16Array. Method getBuffers() uploads data to the GPU, from the project's Float32Array of vertex and texel data. getBuffers() uploads data to the GPU from a Uint16Array of index entries. The Vertices with Texels section described how to prepare arrays for use with WebGL.

We demonstrated how to generate empty WebGLBuffer objects with the WebGL API method createBuffer(), bind WebGLBuffer objects to either an ELEMENT_ARRAY_BUFFER or ARRAY_BUFFER, and upload data to the GPU with the WebGL API method bufferData(). See the source code for method getBuffers().

The controller calls getImages() after preparing buffers with getBuffers(). Method getImages() begins processing one or more entities. The GLEntity class prepares a matrix and texture for use with WebGL. Next we explain how to prepare textures with WebGL.

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