function initStep2(clientElements) {
    // Initialize global variables and libraries.
    g_o3dElement = clientElements[0];
    g_o3d = g_o3dElement.o3d;
    g_math = o3djs.math;
    g_client = g_o3dElement.client;
  
    // Create a g_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,
        [0, 0, 0, 1]);
  
    var effect = g_pack.createObject('Effect');
    effect.loadFromFXString(document.getElementById('shader').value);
  
    // Create a Material for the effect.
    var myMaterial = g_pack.createObject('Material');
  
    // Apply our effect to this material.
    myMaterial.effect = effect;
  
    // Set the material's drawList for opaque objects.
    myMaterial.drawList = g_viewInfo.performanceDrawList;
  
    // Create the params the effect needs on the material.
    effect.createUniformParameters(myMaterial);
  
    // Create a square.
    var myShape = o3djs.primitives.createPlane(g_pack, myMaterial,
                                                    1, 1, 1, 1);
  
    // Set up the individual parameters in our effect file.
    g_thetaParam = myMaterial.getParam('theta');
    g_thetaParam.value = 0;
    g_numParam = myMaterial.getParam('num');
    updateNum();
  
    // Set the position of the camera.
    g_viewInfo.drawContext.view = g_math.matrix4.lookAt(
        [0, 1, 0],   //eye
        [0, 0, 0],   //target
        [0, 0, -1]); //up
  
    // Generate the projection matrix based
    // on the g_o3d plugin size by calling resize().
    resize();
  
    // Now attach the square to the root of the transform graph.
    g_client.root.addShape(myShape);
  
    toggleRenderCallback();
  
    g_finished = true;  // for selenium testing.
  }
  
  function updateNum() {
    var group = document.the_form.radio_group;
    for (var i = 0; i < group.length; ++i) {
      if (group[i].checked) {
        setNumBalls(parseInt(group[i].value));
      }
    }
  }
  
  function toggleRenderCallback() {
    var box = document.the_form.check_box;
    if (box.checked) {
      g_client.setRenderCallback(onrender);
    } else {
      g_client.clearRenderCallback();
    }
  }
  
  function setNumBalls(num) {
    g_numBalls = num;
    g_numParam.value = g_numBalls;
    g_speedScale = Math.sqrt(g_numBalls) * 5;
  }
  
  function onrender(render_event) {
    g_clock += render_event.elapsedTime * g_timeMult;
    g_thetaParam.value = g_clock * g_speedScale;
  
    // If we don't check the size of the client area every frame we don't get a
    // chance to adjust the perspective matrix fast enough to keep up with the
    // browser resizing us, so onrender must call resize.
    resize();
  }
  
  // Generates the projection matrix based on the size of the g_o3d plugin
  // and calculates the view-projection matrix.
  function resize() {
    var newWidth  = g_client.width;
    var newHeight = g_client.height;
  
    if (newWidth != g_o3dWidth || newHeight != g_o3dHeight) {
      g_o3dWidth = newWidth;
      g_o3dHeight = newHeight;
  
      // Determine what the size of the rendered square within the client should
      // be in pixels.
      var side = g_o3dWidth < g_o3dHeight ?
          g_o3dWidth : g_o3dHeight;
  
      // Convert to the region of world space that must be enclosed by the
      // orthographic projection.
      var worldSize = g_math.div([g_o3dWidth, g_o3dHeight], side);
  
      // Find a projection matrix to transform from world space to screen space.
      g_viewInfo.drawContext.projection = o3djs.math.matrix4.orthographic(
          -0.5 * worldSize[0], 0.5 * worldSize[0],
          -0.5 * worldSize[1], 0.5 * worldSize[1],
          0.5, 1.5);
    }
  }