function initStep2(clientElements) {
    // Initializes global variables and libraries.
    var o3dElement = clientElements[0];
    g_o3d = o3dElement.o3d;
    g_math = o3djs.math;
    g_client = o3dElement.client;
  
    // Creates a pack to manage our resources/assets
    g_pack = g_client.createPack();
  
    // Create 2 root transforms, one for the 3d parts, one for the 2d parts.
    // This is not strictly neccassary but it is helpful for organization.
    g_3dRoot = g_pack.createObject('Transform');
    g_hudRoot = g_pack.createObject('Transform');
  
    g_viewInfo = o3djs.rendergraph.createBasicView(
        g_pack,
        g_3dRoot,
        g_client.renderGraphRoot);
  
    // Create a second view for the hud. There are other ways to do this but
    // this is the easiest.
    g_hudViewInfo = o3djs.rendergraph.createBasicView(
          g_pack,
          g_hudRoot,
          g_client.renderGraphRoot);
  
    // Make sure the hud gets drawn after the 3d stuff
    g_hudViewInfo.root.priority = g_viewInfo.root.priority + 1;
  
    // Turn off clearing the color for the hud since that would erase the 3d
    // parts but leave clearing the depth and stencil so the HUD is unaffected
    // by anything done by the 3d parts.
    g_hudViewInfo.clearBuffer.clearColorFlag = false;
  
    // Set culling to none so we can flip images using rotation or negative scale.
    g_hudViewInfo.zOrderedState.getStateParam('CullMode').value =
        g_o3d.State.CULL_NONE;
    g_hudViewInfo.zOrderedState.getStateParam('ZWriteEnable').value = false;
  
    // Create an orthographic matrix for 2d stuff in the HUD.
    // We assume the area is 800 pixels by 600 pixels and therefore we can
    // position things using a 0-799, 0-599 coordinate system. If we change the
    // size of the client area everything will get scaled to fix but we don't
    // have to change any of our code. See 2d.html
    g_hudViewInfo.drawContext.projection = g_math.matrix4.orthographic(
        0 + 0.5,
        800 + 0.5,
        600 + 0.5,
        0 + 0.5,
        0.001,
        1000);
  
    g_hudViewInfo.drawContext.view = g_math.matrix4.lookAt(
        [0, 0, 1],   // eye
        [0, 0, 0],   // target
        [0, 1, 0]);  // up
  
    g_viewInfo.drawContext.projection = g_math.matrix4.perspective(
        g_math.degToRad(30), // 30 degree fov.
        g_client.width / g_client.height,
        0.1,                // Near plane.
        5000);              // Far plane.
  
    for (var ii = 0; ii < g_materialUrls.length; ++ii) {
      var effect = g_pack.createObject('Effect');
      o3djs.effect.loadEffect(effect, g_materialUrls[ii]);
  
      // Create a Material for the effect.
      var material = g_pack.createObject('Material');
  
      // Apply our effect to this material.
      material.effect = effect;
  
      // Create the params the effect needs on the material.
      effect.createUniformParameters(material);
  
      // Set the default params. We'll override these with params on transforms.
      material.getParam('colorMult').value = [1, 1, 1, 1];
  
      g_materials[ii] = material;
    }
  
    // Set the materials' drawLists
    g_materials[0].drawList = g_hudViewInfo.zOrderedDrawList;
    g_materials[1].drawList = g_viewInfo.performanceDrawList;
  
    g_materials[1].getParam('lightWorldPos').value = [500, 1000, 0];
    g_materials[1].getParam('lightIntensity').value = [1, 1, 1, 1];
    g_materials[1].getParam('ambientIntensity').value = [0.1, 0.1, 0.1, 1];
    g_materials[1].getParam('ambient').value = [1, 1, 1, 1];
    g_materials[1].getParam('diffuse').value = [1, 1, 1, 1];
    g_materials[1].getParam('specular').value = [0.5, 0.5, 0.5, 1];
    g_materials[1].getParam('shininess').value = 20;
  
    // Create a 2d plane for images. createPlane makes an XZ plane by default
    // so we pass in matrix to rotate it to an XY plane. We could do
    // all our manipluations in XZ but most people seem to like XY for 2D.
    g_planeShape = o3djs.primitives.createPlane(
        g_pack,
        g_materials[0],
        1,
        1,
        1,
        1,
        [[1, 0, 0, 0],
         [0, 0, 1, 0],
         [0,-1, 0, 0],
         [0, 0, 0, 1]]);
  
    // Create a ground plane
    g_groundShape = o3djs.primitives.createPlane(
        g_pack,
        g_materials[1],
        1000,
        1000,
        10,
        10);
  
    // Create a cube with its origin at the bottom center.
    g_cubeShape = o3djs.primitives.createCube(
        g_pack,
        g_materials[1],
        1,
        [[0.9, 0, 0, 0],
         [0, 1, 0, 0],
         [0, 0, 0.9, 0],
         [0, 0.5, 0, 1]]);
  
    // Load all the textures.
    var loader = o3djs.loader.createLoader(initStep3);
    for (var ii = 0; ii < g_textureUrls.length; ++ii) {
      loadTexture(loader, g_textureUrls[ii], ii);
    }
    loader.finish();
  }