WebGL Textures & Vertices: Beginner's Guide (2015)

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 drawSceneDefault(controller) executes for every frame. The constructor assigns drawSceneDefault(controller) to the drawScene property. Whenever drawScene(controller) is called, drawSceneDefault(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 drawSceneDefault(controller) Renders One Frame

The default rendering method drawSceneDefault(controller) calls WebGL methods uniformMatrix4fv(WebGLUniformLocation, boolean, Float32Array) and drawElements(Number, Number, type, Number). The previous section titled WebGL API uniformMatrix4fv(WebGLUniformLocation, boolean, Float32Array), explained how to upload the perspective projection matrix to a shader uniform. In this section we upload the transformation matrix 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 callingdrawElements() within the controller's default rendering method drawSceneDefault().

gl.drawElements

(

gl.TRIANGLES,

controller.nBufferLength,

gl.UNSIGNED_SHORT,

0

);

Listing 83: WebGL Method drawElements()

Draw One Frame Summary

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

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