diff options
| -rw-r--r-- | o3d/samples/o3d-webgl-samples/render-mode.html | 287 | ||||
| -rw-r--r-- | o3d/samples/o3d-webgl/client.js | 5 |
2 files changed, 290 insertions, 2 deletions
diff --git a/o3d/samples/o3d-webgl-samples/render-mode.html b/o3d/samples/o3d-webgl-samples/render-mode.html new file mode 100644 index 0000000..8d1c4e0 --- /dev/null +++ b/o3d/samples/o3d-webgl-samples/render-mode.html @@ -0,0 +1,287 @@ +<!-- +Copyright 2009, Google Inc. +All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are +met: + + * Redistributions of source code must retain the above copyright +notice, this list of conditions and the following disclaimer. + * Redistributions in binary form must reproduce the above +copyright notice, this list of conditions and the following disclaimer +in the documentation and/or other materials provided with the +distribution. + * Neither the name of Google Inc. nor the names of its +contributors may be used to endorse or promote products derived from +this software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. +--> + +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" + "http://www.w3.org/TR/html4/loose.dtd"> +<html> +<head> +<title> + Render Mode Example. +</title> +<style type="text/css"> + html, body { + height: 100%; + margin: 0; + padding: 0; + border: none; + } +</style> +</head> +<body onload="init();" onunload="uninit();"> +<script type="text/javascript" src="../o3d-webgl/base.js"></script> +<script type="text/javascript" src="../o3djs/base.js"></script> +<script type="text/javascript" id="o3dscript"> +o3djs.base.o3d = o3d; +o3djs.require('o3djs.webgl'); +o3djs.require('o3djs.math'); +o3djs.require('o3djs.quaternions'); +o3djs.require('o3djs.rendergraph'); +o3djs.require('o3djs.pack'); +o3djs.require('o3djs.arcball'); +o3djs.require('o3djs.event'); +o3djs.require('o3djs.scene'); + +var g_root; +var g_o3d; +var g_o3dElement +var g_math; +var g_quaternions; +var g_client; +var g_aball; +var g_thisRot; +var g_lastRot; +var g_pack; +var g_viewInfo; +var g_o3dWidth = -1; +var g_o3dHeight = -1; +var g_framesRendered = 0; + +var g_camera = { + eye: [0, 0, 5], + target: [0, 0, 0] +}; + +var g_dragging = false; + +function startDragging(e) { + g_lastRot = g_thisRot; + g_aball.click([e.x, e.y]); + g_dragging = true; +} + +function drag(e) { + if (g_dragging) { + var rotationQuat = g_aball.drag([e.x, e.y]); + var rot_mat = g_quaternions.quaternionToRotation(rotationQuat); + g_thisRot = g_math.matrix4.mul(g_lastRot, rot_mat); + var m = g_root.localMatrix; + g_math.matrix4.setUpper3x3(m, g_thisRot); + g_root.localMatrix = m; + + updateClient(); + } +} + +function stopDragging(e) { + g_dragging = false; +} + +function updateClient() { + // If we are in RENDERMODE_ON_DEMAND mode then set the render mode again + // which will cause the client re-render the display. + if (g_client.renderMode == g_o3d.Client.RENDERMODE_ON_DEMAND) { + g_client.render(); + } +} + +function scrollMe(e) { + if (e.deltaY) { + g_camera.eye = + g_math.mulScalarVector((e.deltaY < 0 ? 11 : 13) / 12, g_camera.eye); + g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye, + g_camera.target, + [0, 1, 0]); + updateClient(); + } +} + +function loadFile(path) { + function callback(pack, parent, exception) { + if (exception) { + alert('Could not load: ' + path + '\n' + exception); + return; + } + // Generate draw elements and setup material draw lists. + o3djs.pack.preparePack(pack, g_viewInfo); + } + // Create a new transform for the loaded file + var parent = g_pack.createObject('Transform'); + parent.parent = g_client.root; + + if (path != null) { + o3djs.scene.loadScene(g_client, g_pack, parent, path, callback); + } + + return parent; +} + +function setClientSize() { + 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 perspective projection matrix + g_viewInfo.drawContext.projection = g_math.matrix4.perspective( + g_math.degToRad(45), g_o3dWidth / g_o3dHeight, 0.1, 100); + + // Sets a new area size for arcball. + g_aball.setAreaSize(g_o3dWidth, g_o3dHeight); + + //o3djs.dump.dump("areaWidth: " + g_o3dWidth + "\n"); + //o3djs.dump.dump("areaHeight: " + g_o3dHeight + "\n"); + } +} + +function resize() { + setClientSize(); +} + +function setRenderMode(event) { + var mode = (event) ? event.target.value : window.event.srcElement.value; + switch (mode) { + case 'continuous': + g_client.renderMode = g_o3d.Client.RENDERMODE_CONTINUOUS; + break; + case 'ondemand': + g_client.renderMode = g_o3d.Client.RENDERMODE_ON_DEMAND; + break; + } +} + +function onRender() { + g_framesRendered++; + g_viewInfo.clearBuffer.clearColor = [ + 1 / 38 * (g_framesRendered % 38), + 1 / 39 * (g_framesRendered % 39), + 1 / 41 * (g_framesRendered % 41), + 1]; + resize(); +} + +/** + * Creates the client area. + */ +function init() { + o3djs.webgl.makeClients(initStep2); +} + +/** + * Initializes O3D and loads the scene into the transform graph. + * @param {Array} clientElements Array of o3d object elements. + */ +function initStep2(clientElements) { + var path = window.location.href; + var index = path.lastIndexOf('/'); + path = path.substring(0, index + 1) + '../assets/teapot/scene.json'; + + g_o3dElement = clientElements[0]; + g_o3d = g_o3dElement.o3d; + g_math = o3djs.math; + g_quaternions = o3djs.quaternions; + g_client = g_o3dElement.client; + + g_pack = g_client.createPack(); + g_lastRot = g_math.matrix4.identity(); + g_thisRot = g_math.matrix4.identity(); + + // Create the render graph for a view. + g_viewInfo = o3djs.rendergraph.createBasicView( + g_pack, + g_client.root, + g_client.renderGraphRoot); + + var root = g_client.root; + + var target = [0, 0, 0]; + var eye = [0, 0, 5]; + var up = [0, 1, 0]; + g_viewInfo.drawContext.view = g_math.matrix4.lookAt(eye, target, up); + + g_aball = o3djs.arcball.create(100, 100); + setClientSize(); + + g_root = loadFile(path); + + o3djs.event.addEventListener(g_o3dElement, 'mousedown', startDragging); + o3djs.event.addEventListener(g_o3dElement, 'mousemove', drag); + o3djs.event.addEventListener(g_o3dElement, 'mouseup', stopDragging); + o3djs.event.addEventListener(g_o3dElement, 'wheel', scrollMe); + document.getElementById('rendermode0').onclick = setRenderMode; + document.getElementById('rendermode1').onclick = setRenderMode; + + g_client.setRenderCallback(onRender); + + window.onresize = updateClient; +} + +/** + * Removes any callbacks so they don't get called after the page has unloaded. + */ +function uninit() { + if (g_client) { + g_client.cleanup(); + } +} +</script> +<table width="100%" style="height:100%;"> +<tr width="100%" style="height:100%;"><td valign="middle" align="center"> +<h1> +Render Mode Example. +</h1> +<p>The point of this demo is to show that for certain kinds of 3d applications + that don't have animation, for example a map viewer, you can set the client's +render mode to RENDERMODE_ON_DEMAND which will render the 3d one time and then +stop rendering. This has the advantage of not wasting CPU cycles rendering +something that does not change over and over.</p> +<p>The background changes color each time the scene is rendered. The sample +should start with the scene being constantly rendered but click +RENDERMODE_ON_DEMAND and you'll see it rendered only when it needs to be +as determined by the sample. </p> +<table id="container" width="90%" height="60%" border="2"> +<tr height="100%"><td> +<div id="o3d" style="width: 100%; height: 100%;"></div> +</td></tr> +</table> +<input type="radio" id="rendermode0" name="rendermode" value="continuous" checked="true"><label for="rendermode0">RENDERMODE_CONTINUOUS (draw as often as possible)</label><br/> +<input type="radio" id="rendermode1" name="rendermode" value="ondemand"><label for="rendermode1">RENDERMODE_ON_DEMAND (draw once then as the OS requests it like when a window is uncovered)</label><br/> +<p> +Drag The Mouse To Rotate<br/> +Scrollwheel To Zoom<br/> +Resize The Window To Resize The View +</p> +</td></tr></table> +</body> +</html> + + diff --git a/o3d/samples/o3d-webgl/client.js b/o3d/samples/o3d-webgl/client.js index b585b72..869320b 100644 --- a/o3d/samples/o3d-webgl/client.js +++ b/o3d/samples/o3d-webgl/client.js @@ -97,8 +97,9 @@ o3d.Renderer.clients_ = []; o3d.Renderer.renderClients = function() { for (var i = 0; i < o3d.Renderer.clients_.length; ++i) { var client = o3d.Renderer.clients_[i]; - - client.render(); + if (client.renderMode == o3d.Client.RENDERMODE_CONTINUOUS) { + client.render(); + } } }; |