function initStep2(clientElements) {
    // Initializes global variables and libraries.
    var o3dElement = clientElements[0];
    g_o3d = o3dElement.o3d;
    g_math = o3djs.math;
    g_client = o3dElement.client;
  
    // Get the width and height of our client area. We will need this to create
    // a projection matrix.
    g_o3dWidth  = o3dElement.clientWidth;
    g_o3dHeight = o3dElement.clientHeight;
  
    // Creates a pack to manage our resources/assets.
    g_pack = g_client.createPack();
  
    // Create the render graph for a view.
    g_viewInfo = o3djs.rendergraph.createBasicView(
        g_pack,
        g_client.root,
        g_client.renderGraphRoot);
  
    // Set the projection matrix, with a vertical field of view of 45 degrees
    // a near clipping plane of 0.1 and far clipping plane of 10000.
    g_viewInfo.drawContext.projection = g_math.matrix4.perspective(
        g_math.degToRad(45),
        g_o3dWidth / g_o3dHeight,
        0.1,
        10000);
  
    // Create 11 transforms for the bones and parent them into a chain.
    for (var ii = 0; ii <= 10; ++ii) {
      var transform = g_pack.createObject('Transform');
      g_transforms[ii] = transform;
      if (ii > 0) {
        transform.translate(0, 20, 0);
      }
      transform.parent = ii == 0 ? g_client.root : g_transforms[ii - 1];
    }
  
    // create a debug helper.
    g_debugHelper = o3djs.debug.createDebugHelper(g_client.createPack(),
                                                  g_viewInfo);
  
    // create a debug line group
    g_debugLineGroup = g_debugHelper.createDebugLineGroup(g_client.root);
  
    // draw a few lines.
    g_debugLineGroup.addLine([-20, 0, -20], [-20, 0, +20], [0, 1, 1, 1]);
    g_debugLineGroup.addLine([-20, 0, +20], [+20, 0, +20], [0, 1, 1, 1]);
    g_debugLineGroup.addLine([+20, 0, +20], [+20, 0, -20], [0, 1, 1, 1]);
    g_debugLineGroup.addLine([+20, 0, -20], [-20, 0, -20], [0, 1, 1, 1]);
  
    // create a line for updating.
    g_startEndLine = g_debugLineGroup.addLine();
  
    // Add axes to all the transforms.
    g_debugHelper.addAxes(g_client.root);
  
    // Add a cube to a transform.
    g_debugHelper.addCube(g_transforms[3]);
    g_debugHelper.setCubeScale(g_transforms[3], 10);
    g_debugHelper.setCubeColor(g_transforms[3], [1, 1, 0, 1]);  // yellow.
  
    // Add a sphere to a transform.
    g_debugHelper.addSphere(g_transforms[7]);
    g_debugHelper.setSphereScale(g_transforms[7], 20);
    g_debugHelper.setSphereColor(g_transforms[7], [1, 0, 1, 1]);  // magenta.
  
    // Setup an onrender callback for animation.
    g_client.setRenderCallback(onrender);
  
    g_finished = true;  // for selenium testing.
  }
  
  // spin the camera.
  function onrender(render_event) {
    // Get the number of seconds since the last render.
    var elapsedTime = render_event.elapsedTime;
    g_clock += elapsedTime * g_timeMult;
  
    var x = Math.sin(g_clock * 0.3) * 400;
    var z = Math.cos(g_clock * 0.3) * 400;
    var y = Math.sin(g_clock * 0.7) * 50 + 100;
  
    g_viewInfo.drawContext.view = g_math.matrix4.lookAt(
        [x, y, z],   // eye
        [0, 100, 0], // target
        [0, 1, 0]);  // up
  
    // Make our bone chain bend.
    var rotation = Math.PI / g_transforms.length * Math.sin(g_clock * 1);
    for (var ii = 1; ii < g_transforms.length; ++ii) {
      var transform = g_transforms[ii];
      transform.identity();
      transform.translate(0, 20, 0);
      transform.rotateX(rotation);
    }
  
    // change the color of an axis each frame.
    if ((g_clock * 2) % 2 < 1) {
      g_debugHelper.setAxisColor(g_transforms[4], [1, 1, 1, 1]);
    } else {
      g_debugHelper.clearAxisColor(g_transforms[4]);
    }
  
    var start = g_math.matrix4.getTranslation(g_transforms[0].worldMatrix);
    var end = g_math.matrix4.getTranslation(g_transforms[10].worldMatrix);
    g_startEndLine.setEndPoints(start, end);
  
    // Add/Remove some axes.
    var tempAxesOn = (g_clock % 2) < 1;
    if (tempAxesOn != g_tempAxesOn) {
      g_tempAxesOn = tempAxesOn;
      if (tempAxesOn) {
        g_debugHelper.addAxes(g_transforms[7]);
      } else {
        g_debugHelper.removeAxes(g_transforms[7]);
      }
    }
  
    // Create or delete a line group.
    var tempLinesOn = (g_clock * 1.1 % 2) < 1;
    if (tempLinesOn != g_tempLinesOn) {
      g_tempLinesOn = tempLinesOn;
      if (tempLinesOn) {
        g_tempLineGroup = g_debugHelper.createDebugLineGroup(g_transforms[10]);
        g_tempLineGroup.setColor([1, 0.7, 0.7, 1]);
        g_tempLineGroup.addLine([-20, 0, -20], [-20, 0, +20]);
        g_tempLineGroup.addLine([-20, 0, +20], [+20, 0, +20]);
        g_tempLineGroup.addLine([+20, 0, +20], [+20, 0, -20]);
        g_tempLineGroup.addLine([+20, 0, -20], [-20, 0, -20]);
      } else {
        g_tempLineGroup.destroy();
      }
    }
  
    g_lastClock = g_clock;
  }