Let's look at an example covering a simple animation technique:

1. Open ch05_01_simple-animation.html in your browser:

2. Move the camera around (left mouse-click + drag) and see how the objects (sphere and cone) move independently of one another (local transformations) and the camera (global transformation).
3. You can also dolly the camera (left mouse-click + Alt + drag).
4. Change the camera type to Tracking. If for any reason you lose your bearings, click on Go Home.
5. Let's examine the source code to see how we’ve implemented this example. Open ch05_01_simple-animation.html in a code editor.
6. Take a look at the render, onFrame, and animate functions. Which timing strategy are we using here?

7. The spherePosition and conePosition global variables contain the position of the sphere and the cone, respectively. Scroll up to the draw function. Inside the main loop where each object scene is rendered, a different local transformation is calculated depending on the current object being rendered. The code looks like the following:

function draw() {
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  transforms.updatePerspective();

  try {
    gl.uniform1i(program.uUpdateLight, fixedLight);

    scene.traverse(object => {
      transforms.calculateModelView();
      transforms.push();

      if (object.alias === 'sphere') {
        const sphereTransform = transforms.modelViewMatrix;
        mat4.translate(sphereTransform, sphereTransform, [0, 0, 
         spherePosition]);
      }
      else if (object.alias === 'cone') {
        const coneTransform = transforms.modelViewMatrix;
        mat4.translate(coneTransform, coneTransform, [conePosition, 
         0, 0]);
      }

      transforms.setMatrixUniforms();
      transforms.pop();

      gl.uniform4fv(program.uMaterialDiffuse, object.diffuse);
      gl.uniform4fv(program.uMaterialSpecular, object.specular);
      gl.uniform4fv(program.uMaterialAmbient, object.ambient);
      gl.uniform1i(program.uWireframe, object.wireframe);

      // Bind VAO
      gl.bindVertexArray(object.vao);

      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, object.ibo);

      if (object.wireframe) {
        gl.drawElements(gl.LINES, object.indices.length, 
         gl.UNSIGNED_SHORT, 0);
      }
      else {
        gl.drawElements(gl.TRIANGLES, object.indices.length, 
         gl.UNSIGNED_SHORT, 0);
      }

      // Clean
      gl.bindVertexArray(null);
      gl.bindBuffer(gl.ARRAY_BUFFER, null);
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
    });
  }
  catch (error) {
    console.error(error);
  }
}

8. Using the transforms object (which is an instance of Transforms), we obtain the global Model-View matrix by calling transforms.calculateModelView(). Push it into a matrix stack by calling the push method. We can now apply any transform that we want, knowing that we can retrieve the global transform since it is available for the next object on the list. We do so at the end of the code snippet by calling the pop method. Between the push and pop calls, we determine which object is currently being rendered and use the spherePosition or conePosition global variable to apply a translation to the current Model-View matrix. By doing so, we create a local transform.
9. Take a second look at the preceding code. As you saw at the beginning of this exercise, the cone is moving in the x-axis while the sphere is moving in the z-axis. What do you need to change to animate the cone in the y-axis? Test your hypothesis by modifying this code, saving the web page, and opening it again in your web browser.
10. Let's return to the animate function. What should we modify here to make the objects move faster?

What just happened?

In this exercise, we saw a simple animation of two objects. We examined the source code to understand the call stack of functions that makes the animation possible.