Programming 3D Applications with HTML5 and WebGL

Chapter 5. 3D Animation

Animation means making changes to the image on the screen over time. With animation, an otherwise static 3D scene comes to life. While there are many techniques for animating, and many ways to model the problem conceptually, at the end of the day, animation is all about one thing: making the pixels move.

WebGL doesn’t have built-in animation capability per se. However, the power and speed of the API allow us to render amazing graphics and change them at up to 60 frames per second, providing us with several options for animating 3D content. Combined with improvements to the runtime architecture of modern browsers, this enables animations that blend seamlessly with the other elements on the page, without tearing or other unwanted artifacts.

Animation can be used to change anything in a WebGL scene: transforms, geometry, textures, materials, lights, and cameras. Objects can move, rotate, and scale, or follow paths; geometry can bend, twist, and change into other shapes; textures can be moved, scaled, rotated, and scrolled, and have their pixels modified every frame; material colors, specular highlights, transparency values, and more can change over time; lights can blink, move, and change color; and cameras can be moved and rotated to create cinematic effects. The possibilities are essentially limitless.

In this chapter, we will look at a variety of animation techniques, and the tools and libraries to implement them. These techniques are grounded in years of film ...