function initStep2(clientElements) {
    // Initialize global variables and libraries.
    var o3dElement = clientElements[0];
    g_o3d = o3dElement.o3d;
    g_math = o3djs.math;
    g_client = o3dElement.client;
  
    g_errorMsgElement =
        document.getElementById('errorMsg');
  
    // Turn of the error callback that o3djs.base.init setup.
    g_client.clearErrorCallback();
  
    // Let us render on demand.
    g_client.renderMode = g_o3d.Client.RENDERMODE_ON_DEMAND;
  
    // Create 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);
  
    var clientWidth = g_client.width;
    var clientHeight = g_client.height;
    g_viewInfo.drawContext.projection = g_math.matrix4.orthographic(
        -clientWidth * 0.5,
        clientWidth * 0.5,
        -clientHeight * 0.5,
        clientHeight * 0.5,
        0.001,
        1000);
  
    g_viewInfo.drawContext.view = g_math.matrix4.lookAt(
        [0, 500, 0], // eye
        [0, 0, 0],   // target
        [0, 0, -1]); // up
  
    // Create and load the effect.
    var effect = g_pack.createObject('Effect');
    o3djs.effect.loadEffect(effect, 'shaders/texture-only.shader');
  
    // Create a Material for the effect.
    var myMaterial = g_pack.createObject('Material');
  
    // Set the material's drawList
    myMaterial.drawList = g_viewInfo.zOrderedDrawList;
  
    // Apply our effect to this material.
    myMaterial.effect = effect;
  
    // Creates a quad using the effect.
    var shape = o3djs.primitives.createPlane(g_pack,
                                             myMaterial,
                                             1,
                                             1,
                                             1,
                                             1);
  
    var pixels = [];
    for (var y = 0; y < 32; ++y) {
      for (var x = 0; x < 32; ++x) {
        var offset = (y * 32 + x) * 3;  // rgb
        var u = x / 32 * Math.PI * 0.5;
        var v = y / 32 * Math.PI * 0.5;
        pixels[offset + 0] = 0;  // red
        pixels[offset + 1] = Math.floor(y / 8) % 2;  // green
        pixels[offset + 2] = Math.floor(x / 8) % 2;  // blue
      }
    }
    var texture = g_pack.createTexture2D(32, 32, g_o3d.Texture.XRGB8, 1, false);
    texture.set(0, pixels);
  
    // display the quad 4 times with situations
    // by overriding the sampler on each instance.
    for (var s = 0; s < 4; ++s) {
      // create a transform for an instance
      var transform = g_pack.createObject('Transform');
      transform.translate((s - 1.5) * 140, 0, 0);
      transform.scale(128, 1, 128),
      transform.parent = g_client.root;
      transform.addShape(shape);
  
      // case 0: Correct Texture.
      // case 1: ParamSampler and Sampler but no Texture
      // case 2: ParamSampler but no Sampler,
      // case 3: No ParamSampler.
      if (s <= 2) {
        // Create a ParamSampler on the transform with the same name as in
        // the effect so this param will be used instead of the one on the
        // material.
        var samplerParam = transform.createParam('texSampler0', 'ParamSampler');
  
        if (s <= 1) {
          var sampler = g_pack.createObject('Sampler');
          sampler.name = "s2d";
          samplerParam.value = sampler;
          sampler.addressModeU = g_o3d.Sampler.CLAMP;
          sampler.addressModeV = g_o3d.Sampler.CLAMP;
          if (s == 0) {
            sampler.texture = texture;
          }
        }
      }
    }
  
    g_client.setPostRenderCallback(onRender);
  
    // Render once now that things are setup.
    render();
  }
  
  function setToUserTexture() {
    var pixels = [];
    for (var y = 0; y < 32; ++y) {
      for (var x = 0; x < 32; ++x) {
        var offset = (y * 32 + x) * 3;  // rgb
        var u = x / 32 * Math.PI * 0.5;
        var v = y / 32 * Math.PI * 0.5;
        pixels[offset + 0] = Math.cos(u);  // red
        pixels[offset + 1] = Math.sin(v);  // green
        pixels[offset + 2] = Math.sin(u);  // blue
      }
    }
    var texture = g_pack.createTexture2D(32, 32, g_o3d.Texture.XRGB8, 1, false);
    texture.set(0, pixels);
  
    g_client.setErrorTexture(texture);
    // Render once now that things are setup.
    render();
  }
  
  function setToNoTexture() {
    g_client.setErrorTexture(null);
    render();
  
  }
  
  function hide0() {
    var child = g_client.root.children[1];
    child.visible = !child.visible;
    render();
  }
  
  function hide1() {
    var child = g_client.root.children[2];
    child.visible = !child.visible;
    render();
  }
  
  function reportError(msg) {
    g_errorMsgElement.innerHTML = g_client.lastError;
    g_client.clearLastError();
    g_client.clearErrorCallback();
  }
  
  function render() {
    // Render once now that things are setup.
    g_client.setErrorCallback(reportError);
    g_client.render();
  }
  
  function onRender() {
  }