CS424 Notes, **date**
- A Note on Animation with requestAnimationFrame
- The traditional way to do animation in JavaScript is with the standard function setTimeout(callback,millis). The first parameter to setTimeout is a function, the second is an integer. The result is to schedule a call to callback() millis milliseconds after the call to setTimeout is executed. To continue the animation, the callback function can include a call to setTimeout to schedule the next frame of the animation. This is the the animation method used in transform-demo.html, for example.
- There are problems with this type of animation: It keeps running and consuming resources even when the browser window is minimized or when it's in a tab that is not currently visible in the window. And it does not fit in well with the way web browsers refresh the page, which happens on a regular schedule.
- There is a proposed standard for a new way to do animation,
a standard function
requestAnimationFrame( callback );
This is similar to setTimeout, but in this case, there is no second parameter to say when the callback function should be called. Instead, it will be called during the next browser page-refresh (and, I presume, will force one if necessary, but only if the page is actually visible). The callback function will be called with one parameter, a timestamp giving the number of milliseconds since some arbitrary point in the past. Generally, you will want to know that number of milliseconds since the animation started. To get that information, you might use a callback function of the form:var animationStartTime; function doFrame( timestamp ) { if (!animationStartTime) animationStartTime = timestamp; // Record time of first call. var runTime = timestamp - animationStartTime; // Time since start. . . // Draw the frame, using the value of runTime. . requestAnimationFrame( doFrame ); }
To start this animation, you would just call requestAnimationFrame(doFrame). You might do this, for example, in an init() function that is called in response to the document onload event. - As I write this, requestAnimationFrame doesn't seem to be defined in any
browser, but there are browser-specific experimental versions. The following
statement will define requestAnimationFrame if it is not already defined,
falling back to setTimeout if it can't find anything else:
window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { setTimeout(function() { callback(Date.now()); }, 33); };
Except for the fallback to setTimeout, this follows an example on the WebGL web site. (Note: the use of "window." here avoids undefined variable errors, but "window." is actually the default scope in a browser, so the function can be called as requestAnimationFrame rather than window.requestAnimationFrame.) - This type of animation is used, for example, in hierarchical2d-example.html.
- Applying textures...
- We will discuss how a texture image might be applied to a variety of objects, including some 3D objects such as cubes, spheres, and cylinders.
-