WebGL Textures & Vertices

Beginner's Guide

Page Eighty One

Draw One Frame

Method animOne(ev)

Method animOne(ev) calls a rendering method to draw one frame. The controller's constructor determines which rendering method to call. If the example project has implemented a render(controller) method, then the controller's drawScene property receives the function drawSceneBasics(controller). Method drawSceneBasics(controller) times animation and calls the example project's render(controller) method.

This book's projects don't implement a render(controller) method. Therefore the default rendering method renderDefault(controller) executes for every frame. The constructor assigns renderDefault(controller) to the drawScene property. Whenever drawScene(controller) is called, renderDefault(controller) activates.

Animated rendering tracks the current frame number in the controller's frameCount property. The controller's FRAME_MAX property limits the number of animation frames to render. Method animOne(ev) assigns the frameCount property to the last frame of the animation. When the animation rendering sequence begins, just the last frame renders. Then the animation terminates. See the animOne() method.

Method renderDefault(controller) Renders One Frame

The default rendering method renderDefault(controller) calls WebGL methods uniformMatrix4fv(WebGLUniformLocation, boolean, Float32Array) and drawElements(Number, Number, type, Number). The previous section titled Upload Perspective Projection Matrix, explained how to upload the perspective projection matrix to a shader uniform with WebGL API method uniformMatrix4fv(). In this section we upload the transformation matrix with uniformMatrix4fv(), before rendering the first frame.

Retrieve a reference to the matrix property from the first GLEntity in the controller's list. The matrix property is a non typed JavaScript Array of Number. The following line obtains a reference to the matrix.

var matrix = controller.aEntities[0].matrix;

Upload the matrix to the vertex shader. The controller's uMatrixTransform property is the location of the uniform named um4_matrix, within the vertex shader. Cast the matrix to a type Float32Array before uploading.

gl.uniformMatrix4fv
(
 controller.uMatrixTransform, 
 gl.FALSE, 
 new Float32Array(matrix)
);

Listing 82: Upload Default Matrix to Vertex Shader

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

Draw the mesh with a call to drawElements(mode,count,type,offset). The WebGL method drawElements(mode,count,type,offset) causes the buffer of vertices and texels to run through the vertex shader, one element at a time.

The first parameter is a WebGL constant representing the drawing mode. TRIANGLES draws a triangle for every three vertices in order. The second parameter is the number of elements to process. The controller saves the length of the element array to the property nBufferLength. We want to process every index in the element array buffer. The third parameter represents the type of values to process. The third parameter must equal UNSIGNED_SHORT. That means each entry in the element array buffer is a positive whole number. The last parameter is the offset in the element array buffer to start drawing. We want to start at the first entry, index 0. The following listing demonstrates calling drawElements() within the controller's default rendering method renderDefault().

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

Listing 83: WebGL Method drawElements()

Draw One Frame Summary

Method animOne(ev) calls method renderDefault() to display the last frame of an animation. renderDefault() calls WebGL methods uniformMatrix4fv(Number, boolean, Float32Array) and drawElements(mode,count,type,offset)

This section focused on drawing one frame. The next section titled Animated Rotation details the animation sequence implemented within renderDefault(). See the entire renderDefault() method. See the source code for method animOne().

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