function init() {
    // Create a bunch of clients.
    var ii = 0;
    var tbodyElem = document.getElementById('clients');
    for (var row = 0; row < NUM_DOWN; row++) {
      var trElem = document.createElement('tr');
      for (var column = 0; column < NUM_ACROSS; column++) {
        var tdElem = document.createElement('td');
        var objElem = o3djs.util.createClient();
        objElem.style.width = '60px';
        objElem.style.height = '60px';
        objElem.id = 'o3d' + ii;
        objElem.name = 'o3d' + ii;
        tdElem.appendChild(objElem);
        trElem.appendChild(tdElem);
        ii++;
      }
      tbodyElem.appendChild(trElem);
    }
    g_num_clients = ii;
  
    var chromeWorkaround = o3djs.base.IsChrome10();
    // wait for the browser to settle down.
    var clearId = window.setInterval(function() {
      var element = document.o3d0
      if (!element.o3d) {
        if (chromeWorkaround) {
          if (element.style.width != '60px') {
            element.style.width = '60px';
          } else {
            element.style.width = '1px';
          }
        }
        return;
      }
      if (chromeWorkaround && element.style.width != '60px') {
        // The plugin has loaded but it may not be the right size yet.
        element.style.width = '60px';
        return;
      }
      window.clearInterval(clearId);
      setup();
    }, 10);
  }
  
  function setup() {
    // Lookup all the clients.
    for (var ii = 0; ii < g_num_clients; ++ii) {
      g_clients[ii] = document.getElementById('o3d' + ii).client;
    }
  
    // Get constants and math functions.
    g_o3d = document.o3d0.o3d;
    g_math = o3djs.math;
  
    // Init our sample helper libraries. We need to call this manually since
    // we did not use o3djs.base.makeClients.
    o3djs.base.init(document.o3d0);
  
    var effectSource =
        o3djs.io.loadTextFileSynchronous('shaders/vertex-color.shader');
  
    // For each client make a cube, context, effect,...
    for (ii = 0; ii < g_num_clients; ii++) {
      // Create a pack to manage our resources/assets
      g_packs[ii] = g_clients[ii].createPack();
  
      // Create the render graph for a view.
      g_viewInfos[ii] = o3djs.rendergraph.createBasicView(
          g_packs[ii],
          g_clients[ii].root,
          g_clients[ii].renderGraphRoot);
  
      g_animate_angle[ii] = 0;
  
      // Create our projection matrix, with a vertical field of view of 45 degrees
      // a near clipping plane of 0.1 and far clipping plane of 100.
      g_viewInfos[ii].drawContext.projection = g_math.matrix4.perspective(
          g_math.degToRad(45),
          128 / 128,
          0.1,
          100);
  
      // Create and load the effect.
      var effect = g_packs[ii].createObject('Effect');
      effect.loadFromFXString(effectSource);
  
      // Create a material for it.
      var material = g_packs[ii].createObject('Material');
  
      // Set the material's drawList
      material.drawList = g_viewInfos[ii].performanceDrawList;
  
      // Apply our effect to this material.
      material.effect = effect;
      effect.createUniformParameters(material);
  
      // Create a cube using the effect we have loaded.
      createCube(g_clients[ii].root, g_packs[ii], material);
    }
  
    // Set our render callback for animation.
    // This sets a function to be executed every time a frame is rendered.
    g_clients[0].setRenderCallback(onrender);
    g_setupDone = true;
  }