WebGL Textures & Vertices

Beginner's Guide

Page Eighty Six

Timed Animation

Method requestAnimationFrame(Function) triggers drawScene(controller) as soon as the system can handle a repaint operation. However, the animation runs extremely fast on some devices. Method drawScene(controller) calls checkFrameTime(controller) first.

We implemented method checkFrameTime(controller) which returns true if enough time has passed between frames to render the scene. checkFrameTime(controller) returns false otherwise. Method drawScene(current) calls checkFrameTime(controller) to determine if it's time to render the scene. If checkFrameTime(controller) returns true then drawScene(current) calls method render() to draw one frame on the canvas.

Check the Time with checkFrameTime(controller)

The only parameter to checkFrameTime(controller) is a reference to the GLControl class. The GLControl constructor assigns the value 128 to property FRAME_INTERVAL. Method checkFrameTime(controller) determines whether or not 128 milliseconds have elapsed between animation frames. If so checkFrameTime(controller) returns true. Otherwise checkFrameTime(controller) returns false.

Before an animation begins, method animStart(ev) assigns properties frameCurrent and framePrevious, the value Date.now(). The JavaScript method Data.now() returns the number of milliseconds between the current time and January 1, 1970. Method checkFrameTime(controller) assigns the frameCurrent property Date.now(), then subtracts framePrevious from frameCurrent. If the difference is less than FRAME_INTERVAL, return false. Otherwise return true. When checkFrameTime(controller) returns true, then drawScene(controller) calls the render(controller) method to draw one frame of the scene. See method checkFrameTime().

Method render()

Other projects in the series Online 3D Media with WebGL, implement unique methods to render the scene. If an example project requires a unique rendering method, then the project's class implements a render() method. In that case the controller's constructor assigns the example project's render() method to the controller's render property. Otherwise the constructor assigns the default rendering method renderDefault(), to the controller's render method.

// Call the demo project's
// renderer for display.
if (glDemo.render != null){
 this.render = glDemo.render;

// Use the default render
// method to draw the scene.
else {
 this.render = this.renderDefault;

Determine render() Method Reference

This book's projects all use renderDefault(). The next few sections demonstrate how renderDefault() displays animation frames with WebGL.

Draw the Animated Rotating Mesh

Method renderDefault(controller) prepares the matrix, uploads the matrix, then displays one frame of the scene.

The WebGL API methods to rotate and draw a mesh include uniformMatrix4fv(WebGLUniformLocation, boolean, Float32Array) and drawElements(Number, Number, type, Number). The Perspective Projection section explains how to upload the perspective projection matrix to a shader uniform with the WebGL API method uniformMatrix4fv(WebGLUniformLocation, boolean, Float32Array). This section demonstrates how to rotate a matrix for each frame. Upload the matrix to the shader with uniformMatrix4fv(WebGLUniformLocation, boolean, Float32Array), in order to draw the mesh rotation.

First obtain a matrix from the first GLEntity in the controller's array of GLEntity, as follows.

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

Rotate Matrix Values

The matrix is simply a JavaScript Array of Number. The section Default Matrix for Each Entity includes a diagram of the GLEntity matrix property. Second call matrixRotationY(Array,Number) to rotate the matrix. Method renderDefault(controller) increments the property nRad for every frame. Therefore each call to matrixRotationY(array, Number) rotates the matrix a little more.

matrix = controller.matrixRotationY

Listing 92: Rotate the Matrix

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