HUD

This example shows one way to get a HUD (Heads-Up Display) in a 3D graphical simulation. Most often, text is one of the elements needed for a HUD, and text support is lacking in all flavors of OpenGL, including WebGL. Text is easy when drawing on a 2D canvas, however. So one way to solve this problem is to overlay the canvas used for 3D graphics with a second canvas to be used for 2D graphics. This is the approach taken in this application.

1-2-three
example 21: HUD

<!DOCTYPE html>
<html>
<head>
<title>example 21: HUD</title>

var overlay = null;

function createOverlay(mainCanvas)
 {
    var canvasContainer = document.getElementById('container');
    var overlayCanvas = document.createElement('canvas');
    overlayCanvas.style.zIndex="1000";
    overlayCanvas.style.position = 'absolute';
    overlayCanvas.style.left = '0px';
    overlayCanvas.style.top = '0px';
    overlayCanvas.width = mainCanvas.clientWidth;
    overlayCanvas.height = mainCanvas.clientHeight;
    canvasContainer.appendChild(overlayCanvas);
    return overlayCanvas;
 }
 
 var fuel = 100;
 
function drawOverlay() {
  var context = overlay.getContext('2d');
  context.clearRect(0, 0, overlay.width, overlay.height);
  var x = 10;
  var y = 40;
  context.font = "20pt Calibri";
  context.fillStyle = "#0000ff"; // text color
  context.fillText("Fuel Remaining: "+fuel, x, y);
  context.restore();
}

function b2three(trans,mat) {
  var basis = trans.getBasis();
  var origin = trans.getOrigin();
  var m = mat.elements;
  var v = basis.getRow(0);
  m[0] = v.x(); m[4+0] = v.y(); m[8+0] = v.z(); m[12+0] = origin.x();
  v = basis.getRow(1);
  m[1] = v.x(); m[4+1] = v.y(); m[8+1] = v.z(); m[12+1] = origin.y();
  v = basis.getRow(2);
  m[2] = v.x(); m[4+2] = v.y(); m[8+2] = v.z(); m[12+2] = origin.z();
  m[3] = 0.0; m[4+3] = 0.0; m[8+3] = 0.0; m[12+3] = 1.0;
}

function initPhysics() {
  var collision_config = new Ammo.btDefaultCollisionConfiguration();
  var dispatcher = new Ammo.btCollisionDispatcher( collision_config );
  var overlappingPairCache =  new Ammo.btDbvtBroadphase();
  var solver = new Ammo.btSequentialImpulseConstraintSolver();
  var dynamicsWorld = new Ammo.btDiscreteDynamicsWorld( dispatcher, overlappingPairCache, solver, collision_config );
  dynamicsWorld.setGravity(new Ammo.btVector3(0, -12, 0));
  return dynamicsWorld;
}

// body2world storage
var trans=new Ammo.btTransform();

function body2world(body,v3B) {
  var trans = body.getWorldTransform();
  var result = trans.op_mul(v3B);
  return result;
}

function init() {
  var mycanvas = document.getElementsByTagName("canvas")[0];
  var w = mycanvas.clientWidth;
  var h = mycanvas.clientHeight;
  
  if (!overlay)
    overlay = createOverlay(mycanvas);

renderer = new THREE.WebGLRenderer({canvas:mycanvas});
  renderer.setSize( w, h );

scene = new THREE.Scene();
  scene.matrixAutoUpdate = false;

camera = new THREE.PerspectiveCamera(
      35,     // Field of view
      w / h,  // Aspect ratio
      0.1,    // Near
      10000   // Far
  );
  camera.position.set( -30, 0, 50 );
  scene.add(camera);
  camera.lookAt( new THREE.Vector3(0,-15,0) );

var light = new THREE.PointLight( 0xFFFF33 );
  light.position.set( 10, 0, 10 );
  scene.add( light );
  
  light = new THREE.AmbientLight( 0xCCCCBB );
  scene.add( light );
  
  var dynamicsWorld = initPhysics();
  
  // ground physics
  var groundShape=new Ammo.btBoxShape(new Ammo.btVector3(20,10,20));
  var groundTransform=new Ammo.btTransform();
  groundTransform.setIdentity();
  groundTransform.setOrigin(new Ammo.btVector3(0,-25,0));
  var localInertia=new Ammo.btVector3(0,0,0);
  var motionState = new Ammo.btDefaultMotionState( groundTransform );
  var cInfo = new Ammo.btRigidBodyConstructionInfo(0, motionState, groundShape, localInertia);
  var body=new Ammo.btRigidBody(cInfo);
  dynamicsWorld.addRigidBody(body);
  
  // ground visualization
  var groundCube = new THREE.Mesh(
    new THREE.CubeGeometry( 2*20, 2*10, 2*20 ),
    new THREE.MeshLambertMaterial( { color: 0x0000FF } )
  );
  scene.add( groundCube );
  groundCube.position.set(0,-25,0);
  
  var lander = new Lander(scene,dynamicsWorld);
  
  var clock = new THREE.Clock();

function onKeyUp(evt) {
    switch (evt.keyCode) {
      case 65: // 'a'
        index = 0;
        lander.thrustCubeA[index].visible = false;
        lander.trimOnA[index] = false;
        break;
      case 68: // 'd'
        index = 1;
        lander.thrustCubeA[index].visible = false;
        lander.trimOnA[index] = false;
        break;
      case 87: // 'w'
        index = 3;
        lander.thrustCubeA[index].visible = false;
        lander.trimOnA[index] = false;
        break;
      case 83: // 's'
        index = 2;
        lander.thrustCubeA[index].visible = false;
        lander.trimOnA[index] = false;
        break;
      case 32: // spacebar
        lander.mainThrustCube.visible = false;
        lander.mainOn = false; 
        break;
    }
  }
  
  window.onkeydown = onKeyDown;
  window.onkeyup = onKeyUp;	
}

window.onload = init;

</script>
 </head>
 <body>
  <div id="container">
   <canvas id="canvas" style="width:100%;height:95%;border:1px gray solid;"></canvas>
  </div>
 </body>
</html>

HUD

1-2-threeexample 21: HUD

1-2-three
example 21: HUD