Page 17: Animation and THREE

This material is discussed in:

Animating using THREE is very similar to how we’ve been doing other web animation. We use requestAnimationFrame to set up an animation loop that calls our drawing function, and as part of the drawing function, we make any changes that we want to have in the picture and redraw the picture.

Let’s go back to our first example…

If you look at the animation “loop” (using requestAnimationFrame):

43
44
45
46
47
48
49
50
51
52
53
54
55

function animate(timestamp) {
  // Convert time change from milliseconds to seconds
  let timeDelta = 0.002 * (lastTimestamp ? timestamp - lastTimestamp : 0);
  lastTimestamp = timestamp;

  cube.rotation.x += 0.5 * timeDelta;
  cube.rotation.y += 0.5 * timeDelta;

  renderer.render(scene, camera);
  window.requestAnimationFrame(animate);
}

window.requestAnimationFrame(animate);

You can see that on lines 48 and 49, we change the objects (by changing their transformation), and then we re-render the updated scene on line 51. In THREE, for each step of the animation loop, we need to call the renderer to convert the current state of the scene to pixels after any updates.

Because THREE is a scene graph API, we make changes by adjusting the existing objects, rather than by creating new graphics objects. This is particularly important because the act of creating an object might be expensive. For example, when we create a new material, we need to run the shader compiler to translate the material into code for the graphics hardware. Also, it is much better to re-use existing objects: even if creating them is cheap, we can avoid the overhead of re-sending the information to the graphics hardware.

Sometimes, it isn’t obvious whether a particular change will require a substantial change to the information sent to the hardware. For example, if you change a parameter of the shader, it may or may not need to be re-compiled. Or if you change the vertices of a geometry, it may or may not need to be re-organized to be sent to the graphics hardware. For reasons like this, THREE sometimes doesn’t let you change things during drawing.

In general, we prefer to animate transformation parameters (since these don’t require rebuilding the data structures for the graphics hardware). After we learn how the graphics hardware works, this will make more sense. But for now, be aware that sometimes when you change values, you may need to wait for some re-computation before you see the changes.

Summary: What is easy to animate?