CS424 Notes, 3 February 2012
- Discussion
- We will spend part of the class discussing...
- Possible topics for the reserach project. (Topic selection due February 14; report due March 9.) The project and some possible topics are discussed in the course handout. A couple more possibilities: GPU hardware architecture; old-fashioned OpenGL with glBegin/glEnd; the old OpenGL fixed-function pipeline.
- Some specific examples of using transforms to create hierarchical models.
- We will spend part of the class discussing...
- 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.
- Image Textures
- The term texture in its most general sense refers to a quantity that varies from point to point within a primitive. Most common in computer graphics, however, are image textures.
- When an image is used as a texture, the image is "applied" to a surface. In general, this means stretch, shrinking, and distorting the image -- especially for curved shapes in 3D. Here, for is a picture of my WebGL logo applied to a teapot model. Multiple copies of the picture are used, with varying degrees of distortion: (The teapot is a standard model for 3D graphics testing.)
- Texture coordinates
- The most basic thing to understand is how the mapping of the image onto a surface is specified. (This actually applies to all textures, not just image textures.) The mapping is specified by texture coordinates.
-
-