WebGL Textures & Vertices

Beginner's Guide

Page Eighty Eight

WebGL API drawElements(mode,count,type,offset)

WebGL method drawElements() activates the shaders. Vertices and texels uploaded as an element array, process through the vertex shader after a call to drawElements(). Parameters to drawElements() tell the shader which set of elements to process.

The first parameter mode, is a WebGL constant. Use TRIANGLES to draw a triangle for every three consecutive vertices.

The second parameter count, tells WebGL the number of elements to process. The controller saves the length of the element array to the property nBufferLength. Pass nBufferLength as the second parameter to process every element in the array.

The third parameter type, indicates the format of values in the element array. Pass UNSIGNED_SHORT as the third parameter. The UNSIGNED_SHORT type specifies 16 bit non negative integer values. The book's element arrays include only non negative integer whole numbers within the range {0...66535}.

216 - 1 = 66535.

The fourth parameter offset tells WebGL where to begin processing, within the element array. To process the entire array start at offset 0. See the renderDefault() method.

gl.drawElements
(
 gl.TRIANGLES, 
 controller.nBufferLength, 
 gl.UNSIGNED_SHORT, 
 0
);

Listing 94: Default Rendering: WebGL API drawElements()

Animation Rotation Summary

Every project included with this book rotates when the user taps the canvas. Most projects include a Rotate button which animates rotation around the Y axis. The animated Butterfly fish project uses GLSquare.js to load an image of a Butterfly fish. We covered GLSquare initialization with the Lighthouse Texture Map project. That example loaded an image of a lighthouse. This example loads an image of a Butterfly fish. However every project follows the same animation sequence.

This section demonstrated how to animate and rotate a mesh. The Animation Activity Diagram illustrates the animation sequence of events. We moved beyond initialization of the GLSquare class to demonstrate WebGL features and animation concepts implemented within the GLControl class. We explained how to assign event listeners, explained the animation execution flow, discussed the recommended window.requestAnimateFrame(Function) method, covered timed animation, and finally demonstrated how to rotate and render a mesh with WebGL methods uniformMatrix4fv(WebGLUniformLocation, boolean, Float32Array) and drawElements(mode,count,type,offset).

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