WebGL: Up and Running

Chapter 4. Animation

If graphics is the heart of WebGL, animation is its soul. With animation, an otherwise static WebGL scene comes to life, making it richer, more informative, and more entertaining. WebGL gives us the ability to render graphics at 60 frames per second; it sure would be a waste of that power if nothing on the screen were moving!

WebGL doesn’t have much in the way of built-in animation capability. However, Three.js has some great animation utilities, and we are starting to see other libraries emerge to fill the vacuum. We will have a look at one, Tween.js, in this chapter. If your application is sufficiently complex, you may find the need to build your own animation framework. Given its relative importance in the world of WebGL, we are going to devote a chapter to learning as much as we can about this topic.

We have already seen simple animation in previous chapters, such as spinning cubes, rotating planets, and dancing textures that simulate the sun. Admittedly, we created some nice effects, but most of the animations were done as ad hoc hacks to support learning graphics. In this chapter, we will take a more formal approach to animating our WebGL scenes. Let’s start by talking about core concepts.

Animation Basics

Ultimately, animation is about something on the screen changing over time: cars driving, lights blinking, facial expressions changing. These are different effects, achieved through various techniques, but in the end, they all result in making changes to ...