In this tutorial, I create a height map.

What this entails is loading an image into an image object to get the colour information at each pixel. This image in the example is a 100×100 pixel greyscale image, where the brighter the colour, the higher the elevation of the terrain will be.

First, some new variables

var g_heightMapCanvas;
var g_heightMapCanvasContext;
var g_heightMapImageData;
var g_landscapeLoaded = false;
var g_heightMapLoaded = false;
var g_initRun = false;

The createLandscape function is used to set up the vertex data for the landscape. We then create a set of vertices, where each vertex is represented by one pixel of the height map. Then we create the set of triangles that will make up the surface of the terrain. One thing you will notice is that the code will create a landscape with a solid colour with no lighting. In order to do lighting, we need to work out the normal, which I will handle in the next tutorial.

function createLandscape(material) {
  var landscape = g_pack.createObject('Shape');
  var landscapePrimitive = g_pack.createObject('Primitive');
  var streamBank = g_pack.createObject('StreamBank');
  var color;
  var avgColor;

  landscapePrimitive.material = material;
  landscapePrimitive.owner = landscape;
  landscapePrimitive.streamBank = streamBank;

  landscapePrimitive.primitiveType = g_o3d.Primitive.TRIANGLELIST;

  landscapePrimitive.numberPrimitives = ((g_heightMapCanvas.width - 1) * (g_heightMapCanvas.height - 1)) * 2;
  landscapePrimitive.numberVertices = g_heightMapCanvas.width * g_heightMapCanvas.height;    

  var startX = -50;
  var startY = 0;
  var startZ = -50;

  var XDelta = 1;
  var ZDelta = 1;
  var YMax = 30;
  var YMin = -30;
  var YDiff = YMax - YMin;

  var curX = startX;
  var curZ = startZ;
  var positionArray = [];
  var curIndex = 0;
  for(var i = 0; i < g_heightMapCanvas.width; i++) {
    for (var j = 0; j < g_heightMapCanvas.height; j++) {
      color = getPixelColor(i, j, g_heightMapImageData);
      avgColor = ((color[0] + color[1] + color[2]) / 3) / 255;
      positionArray[curIndex] = curX;
      positionArray[curIndex+1] = YMin + (YDiff * avgColor);
      positionArray[curIndex+2] = curZ;
      curIndex = curIndex + 3;
      curZ = curZ + ZDelta;
    }
    curX = curX + XDelta;
    curZ = startZ;
  }
  curIndex = 0;
  var indicesArray = [];
  var curPosIndex = 0;
  for(var i = 0; i < g_heightMapCanvas.width - 1; i++) {
    for (var j = 0; j < g_heightMapCanvas.height - 1; j++) {
      indicesArray[curIndex] = curPosIndex;
      indicesArray[curIndex+1] = curPosIndex + g_heightMapCanvas.height;
      indicesArray[curIndex+2] = curPosIndex + 1;
      curIndex = curIndex + 3;

      indicesArray[curIndex] = curPosIndex + 1;
      indicesArray[curIndex+1] = curPosIndex + g_heightMapCanvas.height;
      indicesArray[curIndex+2] = curPosIndex + g_heightMapCanvas.height + 1;
      curIndex = curIndex + 3;
      curPosIndex++;
      }
  }

The first thing we do here in this function is to calculate the vertices, where the values are in a grid along the x, z axis, with the y value being the elevation based on the value of the pixel at that location in the height map.

  var curX = startX;
  var curZ = startZ;
  var positionArray = [];
  var curIndex = 0;
  for(var i = 0; i < g_heightMapCanvas.width; i++) {
    for (var j = 0; j < g_heightMapCanvas.height; j++) {
      color = getPixelColor(i, j, g_heightMapImageData);
      avgColor = ((color[0] + color[1] + color[2]) / 3) / 255;
      positionArray[curIndex] = curX;
      positionArray[curIndex+1] = YMin + (YDiff * avgColor);
      positionArray[curIndex+2] = curZ;
      curIndex = curIndex + 3;
      curZ = curZ + ZDelta;
    }
    curX = curX + XDelta;
    curZ = startZ;
  }

Next we calculate the surface triangles.

  curIndex = 0;
  var indicesArray = [];
  var curPosIndex = 0;
  for(var i = 0; i < g_heightMapCanvas.width - 1; i++) {
    for (var j = 0; j < g_heightMapCanvas.height - 1; j++) {
      indicesArray[curIndex] = curPosIndex;
      indicesArray[curIndex+1] = curPosIndex + g_heightMapCanvas.height;
      indicesArray[curIndex+2] = curPosIndex + 1;
      curIndex = curIndex + 3;

      indicesArray[curIndex] = curPosIndex + 1;
      indicesArray[curIndex+1] = curPosIndex + g_heightMapCanvas.height;
      indicesArray[curIndex+2] = curPosIndex + g_heightMapCanvas.height + 1;
      curIndex = curIndex + 3;
      curPosIndex++;
      }
  }

One way to be able to see the landscape better, until we get the lighting going, is to invert alternate triangles. Since the direction the triangle is facing determines whether it is drawn, we can reverse the order of the vertices to make the triangles upside down. This can be done with these lines, by just switching the statements for [curIndex+1] and [curIndex+2]

      indicesArray[curIndex] = curPosIndex + 1;
      indicesArray[curIndex+1] = curPosIndex + g_heightMapCanvas.height;
      indicesArray[curIndex+2] = curPosIndex + g_heightMapCanvas.height + 1;

and making them

      indicesArray[curIndex] = curPosIndex + 1;
      indicesArray[curIndex+1] = curPosIndex + g_heightMapCanvas.height + 1;
      indicesArray[curIndex+2] = curPosIndex + g_heightMapCanvas.height;

Once the height map data is loaded we are going to call the loadLandscape function which sets up the landscape. We are using the solid red shader we used for the cube. There is not much difference here to how we created the cube in tutorial 2.

function loadLandscape()
{
  var landscapeEffect = g_pack.createObject('Effect');
  var shaderString = 'shaders/solidred.shader';
  o3djs.effect.loadEffect(landscapeEffect, shaderString);

  var landscapeMaterial = g_pack.createObject('Material');
  landscapeMaterial.drawList = g_viewInfo.performanceDrawList;
  landscapeMaterial.effect = landscapeEffect;

  var landscapeShape = createLandscape(landscapeMaterial);

  g_landscapeTransform = g_pack.createObject('Transform');
  g_landscapeTransform.addShape(landscapeShape);

  g_landscapeTransform.parent = g_3dRoot;

  landscapeShape.createDrawElements(g_pack, null);
}

The last change we have made is to create the client area using the ‘LargeGeometry’ flag. This is because a buffer can only normally hold 65535 vertices unless this flag is set. In our example here we have a 100×100 terrain, which works out to 10,000 vertices already, so if you are loading a large terrain, this flag needs to be set.

function init() {
  o3djs.util.makeClients(initStep2, 'LargeGeometry');
}

The HTML page now looks as follows. We load the heightmap image into an img tag

<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>Tutorial 17: Creating a landscape from a height map</title>
      <script type="text/javascript" src="o3djs/base.js"></script>
      <script type="text/javascript" src="tutorial17/tutorial17.js"></script>
   </head>
   <body>
      <h1>Tutorial 17: Creating a landscape from a height map</h1>
      
      <br/>
      <div id="o3d" style="width: 400px; height: 400px;"></div>
      <img src="tutorial17/heightmap.jpg" onload="loadHeightMap(this);" />
    </div>
  </body>
</html>

In the next tutorial, we will look at normals. These are required to do lighting, and is something the primitives in the previous tutorial did for you. Now we are going to have to do it for ourselves for our terrain.


Here is the full listing

o3djs.require('o3djs.util');
o3djs.require('o3djs.math');
o3djs.require('o3djs.rendergraph');
o3djs.require('o3djs.canvas');
o3djs.require('o3djs.quaternions');
o3djs.require('o3djs.event');
o3djs.require('o3djs.arcball');
o3djs.require('o3djs.primitives');
o3djs.require('o3djs.picking');
o3djs.require('o3djs.io');
o3djs.require('o3djs.pack');
o3djs.require('o3djs.scene');

// Events
// Run the init() function once the page has finished loading.
// Run the uninit() function when the page has is unloaded.
window.onload = init;
window.onunload = uninit;

// global variables
var g_o3dElement;
var g_o3d;
var g_math;
var g_client;
var g_pack;
var g_clock = 0;
var g_timeMult = 1;
var g_landscapeTransform;
var g_textCanvas;
var g_paint;
var g_canvasLib;
var g_3dRoot;
var g_hudRoot;
var g_viewInfo;
var g_hudViewInfo;
var g_keyPressDelta = 0.05;

var g_quaternions;
var g_aball;
var g_thisRot;
var g_lastRot;
var g_dragging = false;
var g_lightPosition = [5, 5, 7];
var g_camera = {
  eye: [0, 50, 10],
  target: [0, 0, 0]
};
var g_mouseX = 0;
var g_mouseY = 0;
var g_spinningObject = false;
var g_pickedInfo;
var g_treeInfo;
var g_sampler;
var g_backgroundCanvas;
var g_backgroundRoot;
var g_backgroundViewInfo;
var g_backgroundCanvasLib;
var g_backgroundTexture;

var g_lastMouseX = 0;
var g_lastMouseY = 0;
var g_mouseXDelta = 0;
var g_mouseYDelta = 0;
var g_rotationDelta = 0.002;
var g_translationDelta = 0.2;
var g_mouseLocked = false;
var g_lookingDir = [0, 0, 0];

var g_htmlImage;
var g_heightMapCanvas;
var g_heightMapCanvasContext;
var g_heightMapImageData;
var g_landscapeLoaded = false;
var g_heightMapLoaded = false;
var g_initRun = false;

function createLandscape(material) {
  var landscape = g_pack.createObject('Shape');
  var landscapePrimitive = g_pack.createObject('Primitive');
  var streamBank = g_pack.createObject('StreamBank');
  var color;
  var avgColor;

  landscapePrimitive.material = material;
  landscapePrimitive.owner = landscape;
  landscapePrimitive.streamBank = streamBank;

  landscapePrimitive.primitiveType = g_o3d.Primitive.TRIANGLELIST;

  landscapePrimitive.numberPrimitives = ((g_heightMapCanvas.width - 1) * (g_heightMapCanvas.height - 1)) * 2;
  landscapePrimitive.numberVertices = g_heightMapCanvas.width * g_heightMapCanvas.height;    

  var startX = -50;
  var startY = 0;
  var startZ = -50;

  var XDelta = 1;
  var ZDelta = 1;
  var YMax = 30;
  var YMin = -30;
  var YDiff = YMax - YMin;

  var curX = startX;
  var curZ = startZ;
  var positionArray = [];
  var curIndex = 0;
  for(var i = 0; i < g_heightMapCanvas.width; i++) {
    for (var j = 0; j < g_heightMapCanvas.height; j++) {
      color = getPixelColor(i, j, g_heightMapImageData);
      avgColor = ((color[0] + color[1] + color[2]) / 3) / 255;
      positionArray[curIndex] = curX;
      positionArray[curIndex+1] = YMin + (YDiff * avgColor);
      positionArray[curIndex+2] = curZ;
      curIndex = curIndex + 3;
      curZ = curZ + ZDelta;
    }
    curX = curX + XDelta;
    curZ = startZ;
  }
  curIndex = 0;
  var indicesArray = [];
  var curPosIndex = 0;
  for(var i = 0; i < g_heightMapCanvas.width - 1; i++) {
    for (var j = 0; j < g_heightMapCanvas.height - 1; j++) {
      indicesArray[curIndex] = curPosIndex;
      indicesArray[curIndex+1] = curPosIndex + g_heightMapCanvas.height;
      indicesArray[curIndex+2] = curPosIndex + 1;
      curIndex = curIndex + 3;

      indicesArray[curIndex] = curPosIndex + 1;
      indicesArray[curIndex+1] = curPosIndex + g_heightMapCanvas.height;
      indicesArray[curIndex+2] = curPosIndex + g_heightMapCanvas.height + 1;
      curIndex = curIndex + 3;
      curPosIndex++;
      }
  }

  var positionsBuffer = g_pack.createObject('VertexBuffer');
  var positionsField = positionsBuffer.createField('FloatField', 3);
  positionsBuffer.set(positionArray);

  var indexBuffer = g_pack.createObject('IndexBuffer');
  indexBuffer.set(indicesArray);

  streamBank.setVertexStream(
      g_o3d.Stream.POSITION, // This stream stores vertex positions
      0,                     // First (and only) position stream
      positionsField,        // field: the field this stream uses.
      0);                    // start_index

  // Associate the triangle indices Buffer with the primitive.
  landscapePrimitive.indexBuffer = indexBuffer;

  return landscape;
} 

function getPixelColor(x, y, imageData) {
  var index=(x * 4) * imageData.width + (y * 4);
  var colArray = [];

  colArray[0] = imageData.data[index];
  colArray[1] = imageData.data[index+1];
  colArray[2] = imageData.data[index+2];
  colArray[3] = imageData.data[index+3];
  return colArray;
}
function loadHeightMap(image)
{
  g_heightMapCanvas=document.createElement("canvas");
  g_heightMapCanvasContext=g_heightMapCanvas.getContext("2d");

  g_heightMapCanvas.width= image.width;
  g_heightMapCanvas.height=image.height;
  g_heightMapCanvasContext.drawImage(image,0,0);

  g_heightMapImageData = g_heightMapCanvasContext.getImageData(0,0, image.width, image.height);

  g_heightMapLoaded = true;
}

function loadLandscape()
{
   // Load effect
  var landscapeEffect = g_pack.createObject('Effect');
  var shaderString = 'shaders/solidred.shader';
  o3djs.effect.loadEffect(landscapeEffect, shaderString);

  // Create a Material for the mesh.
  var landscapeMaterial = g_pack.createObject('Material');

  // Set the material's drawList.
  landscapeMaterial.drawList = g_viewInfo.performanceDrawList;

  // Apply our effect to this material. The effect tells the 3D hardware
  // which shaders to use.
  landscapeMaterial.effect = landscapeEffect;

  // Create the Shape for the landscape mesh and assign its material.
  var landscapeShape = createLandscape(landscapeMaterial);

  // Create a new transform and parent the Shape under it.
  g_landscapeTransform = g_pack.createObject('Transform');
  g_landscapeTransform.addShape(landscapeShape);

  // Parent the landscape's transform to the client root.
  g_landscapeTransform.parent = g_3dRoot;

  // Generate the draw elements for the landscape shape.
  landscapeShape.createDrawElements(g_pack, null);
}

//Event handler for the mousedown event
function mouseDown(e) {
  if (e.button == 0) {
      var worldRay = o3djs.picking.clientPositionToWorldRay(
          e.x,
          e.y,
          g_viewInfo.drawContext,
          g_client.width,
          g_client.height);
      g_treeInfo.update();
      g_pickedInfo = g_treeInfo.pick(worldRay);
      if (g_pickedInfo) {
        g_spinningObject = true;

      }
   } else {
    g_lastRot = g_thisRot;
    g_aball.click([e.x, e.y]);
    g_dragging = true;
   }
   g_mouseLocked = !g_mouseLocked
}

//Event handler for the mousemove event
function mouseMove(e) {
  g_lastMouseX = g_mouseX;
  g_lastMouseY = g_mouseY;
  g_mouseX = e.x;
  g_mouseY = e.y;

  g_mouseXDelta = g_mouseX - g_lastMouseX;
  g_mouseYDelta = g_mouseY - g_lastMouseY;

  if (g_mouseLocked) {
    var viewDir = g_math.subVector(g_camera.target, g_camera.eye);

    var rotatedViewDir = [];
    rotatedViewDir[0] = (Math.cos(g_mouseXDelta * g_rotationDelta) * viewDir[0]) - (Math.sin(g_mouseXDelta * g_rotationDelta) * viewDir[2]);
    rotatedViewDir[1] = viewDir[1];
    rotatedViewDir[2] = (Math.cos(g_mouseXDelta * g_rotationDelta) * viewDir[2]) + (Math.sin(g_mouseXDelta * g_rotationDelta) * viewDir[0]);
    viewDir = rotatedViewDir;
    rotatedViewDir[0] = viewDir[0];
    rotatedViewDir[1] = (Math.cos(g_mouseYDelta * g_rotationDelta * -1) * viewDir[1]) - (Math.sin(g_mouseYDelta * g_rotationDelta * -1) * viewDir[2]);
    rotatedViewDir[2] = (Math.cos(g_mouseYDelta * g_rotationDelta * -1) * viewDir[2]) + (Math.sin(g_mouseYDelta * g_rotationDelta * -1) * viewDir[1]);
    g_lookingDir = rotatedViewDir;
    g_camera.target = g_math.addVector(rotatedViewDir, g_camera.eye);
    g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye,
                                                     g_camera.target,
                                                     [0, 1, 0]);
  }
}

//Event handler for the mouseup event
function mouseUp(e) {
  g_dragging = false;
  g_spinningObject = false;
}

//Even handler for the scroll button
function scrollMe(e) {
  if (e.deltaY) {
	var view = g_math.subVector(g_camera.eye, g_camera.target);
    view = g_math.mulScalarVector((e.deltaY < 0 ? 11 : 13) / 12, view);
	g_camera.eye = g_math.addVector(view, g_camera.target);
    g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye,
                                                       g_camera.target,
                                                       [0, 1, 0]);
 }
}         

// Updates the transform info for our scene
function updateInfo() {
  if (!g_treeInfo) {
    g_treeInfo = o3djs.picking.createTransformInfo(g_3dRoot, null);
  }
  g_treeInfo.update();
}

function drawText(str) {
  g_textCanvas.canvas.clear([0.5, 0.5, 0.5, 0.5]);

  // Reuse the global paint object
  var paint = g_paint;
  paint.color = [1, 1, 1, 1];
  paint.textSize = 12;
  paint.textTypeface = 'Comic Sans MS';
  paint.textAlign = g_o3d.CanvasPaint.LEFT;
  paint.shader = null;
  g_textCanvas.canvas.drawText(str, 10, 30, paint);

  g_textCanvas.updateTexture();
}         

/**
 * This method gets called every time O3D renders a frame.  Here's
 * where we update the landscape's transform to make it spin.
 * @param {o3d.RenderEvent} renderEvent The render event object that
 * gives us the elapsed time since the last time a frame was rendered.
 */
function renderCallback(renderEvent) {
  g_clock += renderEvent.elapsedTime * g_timeMult;
  g_camera.eye
  drawText("(" + (Math.round(g_camera.eye[0] * 100) / 100) + "," + (Math.round(g_camera.eye[1] * 100) / 100) +"," + (Math.round(g_camera.eye[2] * 100) / 100) + ")   " + "(" + (Math.round(g_lookingDir[0] * 100) / 100) + "," + (Math.round(g_lookingDir[1] * 100) / 100) +"," + (Math.round(g_lookingDir[2] * 100) / 100) + ")");
  if (g_spinningObject) {

     var pickTrans = g_pickedInfo.shapeInfo.parent.transform;
     pickTrans.rotateX(0.05);
     pickTrans.rotateY(0.05);
  }
  updateInfo();
}

/**
 * Function performing the rotate action in response to a key-press.
 * Rotates the scene based on key pressed. (w ,s, a, d). Note that the
 * x,y-axis referenced here are relative to the current view of scene.
 * @param {keyPressed} The letter pressed, in lower case.
 * @param {delta} The angle by which the scene should be rotated.
 * @return true if an action was taken.
 */
function keyPressedAction(keyPressed, delta) {
  var actionTaken = false;
  switch(keyPressed) {
    case 'a':
		var eyeOriginal = g_camera.eye;
		var targetOriginal = g_camera.target;
		var viewEye = g_math.subVector(g_camera.eye, g_camera.target);
		var viewTarget = g_math.subVector(g_camera.target, g_camera.eye);
		viewEye = g_math.addVector([g_translationDelta * -1, 0, 0], viewEye);
		viewTarget = g_math.addVector([g_translationDelta * -1, 0, 0], viewTarget);
		g_camera.eye = g_math.addVector(viewEye, targetOriginal);
		g_camera.target = g_math.addVector(viewTarget, eyeOriginal);

		g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye,
                                                       g_camera.target,
                                                       [0, 1, 0]);
      actionTaken = true;
      break;
    case 'd':
		var eyeOriginal = g_camera.eye;
		var targetOriginal = g_camera.target;
		var viewEye = g_math.subVector(g_camera.eye, g_camera.target);
		var viewTarget = g_math.subVector(g_camera.target, g_camera.eye);
		viewEye = g_math.addVector([g_translationDelta, 0, 0], viewEye);
		viewTarget = g_math.addVector([g_translationDelta, 0, 0], viewTarget);
		g_camera.eye = g_math.addVector(viewEye, targetOriginal);
		g_camera.target = g_math.addVector(viewTarget, eyeOriginal);

		g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye,
                                                       g_camera.target,
                                                       [0, 1, 0]);
      actionTaken = true;
      break;
    case 'w':
		var view = g_math.subVector(g_camera.eye, g_camera.target);
		view = g_math.mulScalarVector( 11 / 12, view);
		g_camera.eye = g_math.addVector(view, g_camera.target);
		g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye,
                                                       g_camera.target,
                                                       [0, 1, 0]);
      actionTaken = true;
      break;
    case 's':
		var view = g_math.subVector(g_camera.eye, g_camera.target);
		view = g_math.mulScalarVector( 13 / 12, view);
		g_camera.eye = g_math.addVector(view, g_camera.target);
		g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye,
                                                       g_camera.target,
                                                       [0, 1, 0]);
      actionTaken = true;
      break;
  }
  return actionTaken;
}

/**
 * Callback for the keypress event.
 * Invokes the action to be performed for the key pressed.
 * @param {event} keyPress event passed to us by javascript.
 */
function keyPressedCallback(event) {
  event = event || window.event;

  // Ignore accelerator key messages.
  if (event.metaKey)
    return;

  var keyChar =String.fromCharCode(o3djs.event.getEventKeyChar(event));
  // Just in case they have capslock on.
  keyChar = keyChar.toLowerCase();

  if (keyPressedAction(keyChar, g_keyPressDelta)) {
    o3djs.event.cancel(event);
  }
}         

/**
 * Creates a phong material based on the given single color.
 * @param {Array} baseColor An array with 4 entries, the R,G,B, and A components
 *   of a color.
 * @return {Material} A phong material whose overall pigment is baseColor.
 */
function createPhongMaterial(baseColor) {
  // Create a new, empty Material object.
  var material = g_pack.createObject('Material');

  o3djs.effect.attachStandardShader(
      g_pack, material, g_lightPosition, 'phong');

  material.drawList = g_viewInfo.performanceDrawList;

  // Assign parameters to the phong material.
  material.getParam('emissive').value = [0, 0, 0, 1];
  material.getParam('ambient').value = g_math.mulScalarVector(0.1, baseColor);
  material.getParam('diffuse').value = g_math.mulScalarVector(0.9, baseColor);
  material.getParam('specular').value = [.2, .2, .2, 1];
  material.getParam('shininess').value = 20;

  return material;
}

/**
 * Creates the client area.
 */
function init() {
  o3djs.util.makeClients(initStep2, 'LargeGeometry');
}

/**
 * Initializes O3D.
 * @param {Array} clientElements Array of o3d object elements.
 */
function initStep2(clientElements) {
  // Initializes global variables and libraries.
  g_o3dElement = clientElements[0];
  g_client = g_o3dElement.client;
  g_o3d = g_o3dElement.o3d;
  g_math = o3djs.math;
  g_quaternions = o3djs.quaternions;

  // Initialize O3D sample libraries.
  o3djs.base.init(g_o3dElement);

  // Create a pack to manage the objects created.
  g_pack = g_client.createPack();

  //Create the arcball which is used for the rotation
  g_aball = o3djs.arcball.create(400, 400);

  //Initialise rotation matrixes
  g_lastRot = g_math.matrix4.identity();
  g_thisRot = g_math.matrix4.identity();

  // Create 2 root transforms, one for the 3d parts and 2d parts.
  // This is not strictly neccassary but it is helpful.
  g_3dRoot = g_pack.createObject('Transform');
  g_hudRoot = g_pack.createObject('Transform');
  g_backgroundRoot = g_pack.createObject('Transform');

  // Create the render graph for a view.
  g_viewInfo = o3djs.rendergraph.createBasicView(
      g_pack,
      g_3dRoot,
      g_client.renderGraphRoot);

  // Create a second view for the hud.
  g_hudViewInfo = o3djs.rendergraph.createBasicView(
       g_pack,
       g_hudRoot,
       g_client.renderGraphRoot);

  // 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;
  g_viewInfo.clearBuffer.clearColorFlag = false;

  // Create a view for the background.
  g_backgroundViewInfo = o3djs.rendergraph.createBasicView(
       g_pack,
       g_backgroundRoot,
       g_client.renderGraphRoot);

  // Make sure the background gets drawn first
  g_viewInfo.root.priority = g_backgroundViewInfo.root.priority + 1;
  // Make sure the hud gets drawn after the 3d stuff
  g_hudViewInfo.root.priority = g_viewInfo.root.priority + 1;

  //g_backgroundViewInfo.root.priority + 5;
  // Set up a perspective view
  g_viewInfo.drawContext.projection = g_math.matrix4.perspective(
      g_math.degToRad(30), // 30 degree fov.
      g_client.width / g_client.height,
      1,                  // Near plane.
      5000);              // Far plane.

  // Set up our view transformation to look towards the world origin
  // where the landscape is located.
  g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye, //eye
                                            g_camera.target,  // target
                                            [0, 1, 0]); // up

  //Set up the 2d orthographic view
  g_hudViewInfo.drawContext.projection = g_math.matrix4.orthographic(
      0 + 0.5,
      g_client.width + 0.5,
      g_client.height + 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                                                     

  //Set up the 2d orthographic view
  g_backgroundViewInfo.drawContext.projection = g_math.matrix4.orthographic(
      0 + 0.5,
      g_client.width + 0.5,
      g_client.height + 0.5,
      0 + 0.5,
      0.001,
      1000);

  g_backgroundViewInfo.drawContext.view = g_math.matrix4.lookAt(
      [0, 0, 1],   // eye
      [0, 0, 0],   // target
      [0, 1, 0]);  // up     

  // Create the global paint object that's used by draw operations.
  g_paint = g_pack.createObject('CanvasPaint');

  // Creates an instance of the canvas utilities library.
  g_canvasLib = o3djs.canvas.create(g_pack, g_hudRoot, g_hudViewInfo);

  // Create a canvas that will be used to display the text.
  g_textCanvas = g_canvasLib.createXYQuad(0, 0, 0, 400, 50, true);

  g_backgroundCanvasLib = o3djs.canvas.create(g_pack, g_backgroundRoot, g_backgroundViewInfo);
  g_backgroundCanvas = g_backgroundCanvasLib.createXYQuad(0, 0, 0, g_client.width, g_client.height, true);

  g_backgroundCanvas.canvas.clear([0, 0, 0, 1]);

  o3djs.io.loadTexture(g_pack, 'tutorial17/bg.jpg', function(texture, exception) {
    if (exception) {
      alert(exception);
    } else {
      if (g_backgroundTexture) {
        g_pack.removeObject(g_backgroundTexture);
      }

      g_backgroundTexture = texture;
      g_backgroundCanvas.canvas.drawBitmap(g_backgroundTexture, 0, g_client.width);
      g_backgroundCanvas.updateTexture();
    }
  });  

  if (g_heightMapLoaded == true) {
	loadLandscape();
  }
  // Set our render callback for animation.
  // This sets a function to be executed every time frame is rendered.
  g_client.setRenderCallback(renderCallback);

  //Set up a callback to interpret keypresses
  window.document.onkeypress = keyPressedCallback;

  //Set up mouse events
  o3djs.event.addEventListener(g_o3dElement, 'mousedown', mouseDown);
  o3djs.event.addEventListener(g_o3dElement, 'mousemove', mouseMove);
  o3djs.event.addEventListener(g_o3dElement, 'mouseup', mouseUp);
  o3djs.event.addEventListener(g_o3dElement, 'wheel', scrollMe);
  g_initRun = true;
}

/**
 * Removes callbacks so they aren't called after the page has unloaded.
 */
function uninit() {
  if (g_client) {
    g_client.cleanup();
  }
}
Share