topical media & game development

talk show tell print

#try-1.htm / htm



  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
  <html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>
  Compute and Display FPS.
  </title>
  <style type="text/css">
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      border: none;
    }
  </style>
  <!-- Our javascript code -->
  <script type="text/javascript" src="o3djs/base.js"></script>
  <script type="text/javascript">
  o3djs.require('o3djs.util');
  o3djs.require('o3djs.math');
  o3djs.require('o3djs.rendergraph');
  o3djs.require('o3djs.primitives');
  o3djs.require('o3djs.effect');
  o3djs.require('o3djs.fps');
  
  // Events
  // Run the init() function once the page has finished loading.
  //         unload() when the page is unloaded.
  window.onload = init;
  window.onunload = unload;
  
  // global variables
  var g_o3d;
  var g_math;
  var g_client;
  var g_pack;
  var g_viewInfo;
  var g_o3dWidth = -1;
  var g_o3dHeight = -1;
  var g_o3dElement;
  var g_clock = 0;
  var g_timeMult = 1;
  var g_finished = false;  // for selenium testing
  var g_eye;
  var g_fpsManager;
  
  
Creates the client area.

  
  function init() {
    o3djs.util.makeClients(initStep2);
  }
  
  
Initializes O3D, loads the effect, and draws the cube.
parameter: {Array} clientElements Array of o3d object elements.

  
  function initStep2(clientElements) {
    // Initialize global variables and libraries.
    g_o3dElement = clientElements[0];
    g_o3d = g_o3dElement.o3d;
    g_math = o3djs.math;
    g_client = g_o3dElement.client;
  
    // 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);
  
    // Create an FPS manager.
    g_fpsManager = o3djs.fps.createFPSManager(g_pack,
                                              g_client.width,
                                              g_client.height,
                                              g_client.renderGraphRoot);
  
    // Create a material.
    var myMaterial = g_pack.createObject('Material');
  
    // Set the material's drawList for opaque objects.
    myMaterial.drawList = g_viewInfo.performanceDrawList;
  
    // Create and load the effect.
    var effect = g_pack.createObject('Effect');
    o3djs.effect.loadEffect(effect, 'shaders/vertex-color.shader');
  
    // Apply our effect to this material and create the params the effect needs
    // on the material.
    myMaterial.effect = effect;
    effect.createUniformParameters(myMaterial);
  
    // Draw a cube using the effect we have loaded.
    var myShape = o3djs.primitives.createRainbowCube(g_pack,
                                                     myMaterial,
                                                     0.5);
  
    // Attach the cube to the root of the transform graph.
    var root = g_client.root;
    root.addShape(myShape);
  
    // Set the projection and viewProjection matrices based
    // on the o3d plugin size by calling resize().
    resize();
  
    // Set our render callback for animation.
    // This sets a function to be executed every time a frame is rendered.
    g_client.setRenderCallback(onrender);
  
    g_finished = true;  // for selenium testing.
  }
  
  // Sets the projection matrix based on the size of the plugin.
  function resize() {
    var newWidth  = g_client.width;
    var newHeight = g_client.height;
  
    if (newWidth != g_o3dWidth || newHeight != g_o3dHeight) {
      g_o3dWidth = newWidth;
      g_o3dHeight = newHeight;
  
      // Set the 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_viewInfo.drawContext.projection = g_math.matrix4.perspective(
          g_math.degToRad(45),
          g_o3dWidth / g_o3dHeight,
          0.1,
          100);
  
      g_fpsManager.resize(g_o3dWidth, g_o3dHeight);
    }
  }
  
  // Animates the cube.
  // This function executes on each frame.
  //
parameter: {!o3d.RenderEvent} renderEvent Info about rendering.
function onrender(renderEvent) { // Get the number of seconds since the last render. var elapsedTime = renderEvent.elapsedTime; g_fpsManager.update(renderEvent); // Rotate frame rate independently. g_clock += 2.0 * elapsedTime * g_timeMult; // Eye-position, the position of the camera. var eye = [ 0.0 + Math.sin(g_clock) * 1.5, 1.0, 0.0 + Math.cos(g_clock) * 1.5 ]; var target = [0, 0, 0]; var up = [0, 1, 0]; g_viewInfo.drawContext.view = g_math.matrix4.lookAt(eye, target, up); resize(); }
Removes any callbacks so they don't get called after the page has unloaded.

  
  function unload() {
    if (g_client) {
      g_client.cleanup();
    }
  }
  
  </script>
  </head>
  <body>
  <table width="100%" style="height:100%;">
    <tr><td>
  <h1>Show FPS</h1>
  <p>
  This example shows computing and displaying FPS (Frames Per Second)
  </p></td></tr>
  <tr><td height="100%">
  <div id=o3d" style="width: 100%; height: 100%;"></div>
  </td></tr></table>
  </body>
  </html>
  


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.