WebGL Textures & Vertices

Beginner's Guide

Page Eighty Four

Animation Activity Diagram

The following diagram demonstrates the animation process. Tap the canvas which activates animOne(ev) to display one frame. To start the animation sequence, tap the Rotate button which activates method animStart(ev). Both methods call the window's requestAnimationFrame(Function) method. Method requestAnimationFrame(Function) triggers drawScene(controller). Method drawScene(controller) implements animation timing. When it's time to display the scene, drawScene(controller) calls the render() method.


Two conditions lead drawScene(controller) to generate recursion. Each condition calls requestAnimationFrame(Function) which again triggers drawScene(controller). First the method checkFrameTime(controller), checks the time interval between frames. If not enough time has passed, then call requestAnimationFrame(Function) again. Second test the frame count against the controller's FRAME_MAX field. If the frame count's less than FRAME_MAX, then render the scene and call requestAnimationFrame(Function) again. Otherwise call method animStop(ev) and stop the animation.

Animation Overview Activity Diagram

Diagram 22: Animation Overview

JavaScript window.requestAnimationFrame(Function)

The recommended method to implement a rendering loop, uses the window's requestAnimationFrame(Function) method. The requestAnimationFrame(Function) method activates a drawing function when the system is prepared to paint to the screen. Call requestAnimationFrame(Function) when ready to render a new frame of animation. The only parameter is a function to paint or draw to the rendering area. Method requestAnimationFrame(Function) returns an integer representing the ID of the current frame request.

Not every browser implements requestAnimationFrame(Function). However most WebGL enabled browsers implement requestAnimationFrame(Function) functionality. Yet some browsers provide the functionality with a different method name. The GLControl constructor assigns an available version of the method, if one exists. Some developers recommend using setTimeout(Function, Number) as a fallback. However we tested with a number of WebGL enabled browsers on a range of devices, and had no problem with the following assignment.

window.requestAnimationFrame = window.requestAnimationFrame 
 || window.mozRequestAnimationFrame 
 || window.webkitRequestAnimationFrame 
 || window.msRequestAnimationFrame;

Listing 89: Save window.requestAnimationFrame Functionality

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