topical media & game development
#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.