OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 Copyright 2009, Google Inc. |
| 3 All rights reserved. |
| 4 |
| 5 Redistribution and use in source and binary forms, with or without |
| 6 modification, are permitted provided that the following conditions are |
| 7 met: |
| 8 |
| 9 * Redistributions of source code must retain the above copyright |
| 10 notice, this list of conditions and the following disclaimer. |
| 11 * Redistributions in binary form must reproduce the above |
| 12 copyright notice, this list of conditions and the following disclaimer |
| 13 in the documentation and/or other materials provided with the |
| 14 distribution. |
| 15 * Neither the name of Google Inc. nor the names of its |
| 16 contributors may be used to endorse or promote products derived from |
| 17 this software without specific prior written permission. |
| 18 |
| 19 THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS |
| 20 "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT |
| 21 LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR |
| 22 A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT |
| 23 OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, |
| 24 SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT |
| 25 LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, |
| 26 DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
| 27 THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| 28 (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
| 29 OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| 30 --> |
| 31 |
| 32 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| 33 "http://www.w3.org/TR/html4/loose.dtd"> |
| 34 <html> |
| 35 <head> |
| 36 <title> |
| 37 Simple Scene Viewer |
| 38 </title> |
| 39 <style type="text/css"> |
| 40 html, body { |
| 41 margin: 0; |
| 42 padding: 0; |
| 43 border: 0; |
| 44 height: 100%; |
| 45 } |
| 46 </style> |
| 47 </head> |
| 48 <body onload="init();" onunload="uninit();"> |
| 49 <script type="text/javascript" src="../../o3d-webgl/base.js"></script> |
| 50 <script type="text/javascript" src="../../o3djs/base.js"></script> |
| 51 <script type="text/javascript" id="o3dscript"> |
| 52 o3djs.base.o3d = o3d; |
| 53 o3djs.require('o3djs.webgl'); |
| 54 o3djs.require('o3djs.util'); |
| 55 o3djs.require('o3djs.math'); |
| 56 o3djs.require('o3djs.quaternions'); |
| 57 o3djs.require('o3djs.rendergraph'); |
| 58 o3djs.require('o3djs.pack'); |
| 59 o3djs.require('o3djs.arcball'); |
| 60 o3djs.require('o3djs.scene'); |
| 61 |
| 62 var g_root; |
| 63 var g_o3d; |
| 64 var g_math; |
| 65 var g_quaternions; |
| 66 var g_client; |
| 67 var g_aball; |
| 68 var g_thisRot; |
| 69 var g_lastRot; |
| 70 var g_pack = null; |
| 71 var g_mainPack; |
| 72 var g_viewInfo; |
| 73 var g_lightPosParam; |
| 74 var g_loadingElement; |
| 75 var g_o3dWidth = -1; |
| 76 var g_o3dHeight = -1; |
| 77 var g_o3dElement; |
| 78 var g_finished = false; // for selenium |
| 79 |
| 80 var g_camera = { |
| 81 farPlane: 5000, |
| 82 nearPlane:0.1 |
| 83 }; |
| 84 |
| 85 var g_dragging = false; |
| 86 |
| 87 function startDragging(e) { |
| 88 g_lastRot = g_thisRot; |
| 89 |
| 90 g_aball.click([e.x, e.y]); |
| 91 |
| 92 g_dragging = true; |
| 93 } |
| 94 |
| 95 function drag(e) { |
| 96 if (g_dragging) { |
| 97 var rotationQuat = g_aball.drag([e.x, e.y]); |
| 98 var rot_mat = g_quaternions.quaternionToRotation(rotationQuat); |
| 99 g_thisRot = g_math.matrix4.mul(g_lastRot, rot_mat); |
| 100 |
| 101 var m = g_root.localMatrix; |
| 102 g_math.matrix4.setUpper3x3(m, g_thisRot); |
| 103 g_root.localMatrix = m; |
| 104 } |
| 105 } |
| 106 |
| 107 function stopDragging(e) { |
| 108 g_dragging = false; |
| 109 } |
| 110 |
| 111 function updateCamera() { |
| 112 var up = [0, 1, 0]; |
| 113 g_viewInfo.drawContext.view = g_math.matrix4.lookAt(g_camera.eye, |
| 114 g_camera.target, |
| 115 up); |
| 116 g_lightPosParam.value = g_camera.eye; |
| 117 } |
| 118 |
| 119 function updateProjection() { |
| 120 // Create a perspective projection matrix. |
| 121 g_viewInfo.drawContext.projection = g_math.matrix4.perspective( |
| 122 g_math.degToRad(45), g_o3dWidth / g_o3dHeight, g_camera.nearPlane, |
| 123 g_camera.farPlane); |
| 124 } |
| 125 |
| 126 function scrollMe(e) { |
| 127 if (e.deltaY) { |
| 128 var t = 1; |
| 129 if (e.deltaY > 0) |
| 130 t = 11 / 12; |
| 131 else |
| 132 t = 13 / 12; |
| 133 g_camera.eye = g_math.lerpVector(g_camera.target, g_camera.eye, t); |
| 134 |
| 135 updateCamera(); |
| 136 } |
| 137 } |
| 138 |
| 139 function enableInput(enable) { |
| 140 document.getElementById("url").disabled = !enable; |
| 141 document.getElementById("load").disabled = !enable; |
| 142 } |
| 143 |
| 144 function loadFile(context, path) { |
| 145 function callback(pack, parent, exception) { |
| 146 enableInput(true); |
| 147 if (exception) { |
| 148 alert("Could not load: " + path + "\n" + exception); |
| 149 g_loadingElement.innerHTML = "loading failed."; |
| 150 } else { |
| 151 g_loadingElement.innerHTML = "loading finished."; |
| 152 // Generate draw elements and setup material draw lists. |
| 153 o3djs.pack.preparePack(pack, g_viewInfo); |
| 154 var bbox = o3djs.util.getBoundingBoxOfTree(g_client.root); |
| 155 g_camera.target = g_math.lerpVector(bbox.minExtent, bbox.maxExtent, 0.5); |
| 156 var diag = g_math.length(g_math.subVector(bbox.maxExtent, |
| 157 bbox.minExtent)); |
| 158 g_camera.eye = g_math.addVector(g_camera.target, [0, 0, 1.5 * diag]); |
| 159 g_camera.nearPlane = diag / 1000; |
| 160 g_camera.farPlane = diag * 10; |
| 161 setClientSize(); |
| 162 updateCamera(); |
| 163 updateProjection(); |
| 164 |
| 165 // Manually connect all the materials' lightWorldPos params to the context |
| 166 var materials = pack.getObjectsByClassName('o3d.Material'); |
| 167 for (var m = 0; m < materials.length; ++m) { |
| 168 var material = materials[m]; |
| 169 var param = material.getParam('lightWorldPos'); |
| 170 if (param) { |
| 171 param.bind(g_lightPosParam); |
| 172 } |
| 173 } |
| 174 |
| 175 g_finished = true; // for selenium |
| 176 |
| 177 // Comment out the next line to dump lots of info. |
| 178 if (false) { |
| 179 o3djs.dump.dump('---dumping context---\n'); |
| 180 o3djs.dump.dumpParamObject(context); |
| 181 |
| 182 o3djs.dump.dump('---dumping root---\n'); |
| 183 o3djs.dump.dumpTransformTree(g_client.root); |
| 184 |
| 185 o3djs.dump.dump('---dumping render root---\n'); |
| 186 o3djs.dump.dumpRenderNodeTree(g_client.renderGraphRoot); |
| 187 |
| 188 o3djs.dump.dump('---dump g_pack shapes---\n'); |
| 189 var shapes = pack.getObjectsByClassName('o3d.Shape'); |
| 190 for (var t = 0; t < shapes.length; t++) { |
| 191 o3djs.dump.dumpShape(shapes[t]); |
| 192 } |
| 193 |
| 194 o3djs.dump.dump('---dump g_pack materials---\n'); |
| 195 var materials = pack.getObjectsByClassName('o3d.Material'); |
| 196 for (var t = 0; t < materials.length; t++) { |
| 197 o3djs.dump.dump ( |
| 198 ' ' + t + ' : ' + materials[t].className + |
| 199 ' : "' + materials[t].name + '"\n'); |
| 200 o3djs.dump.dumpParams(materials[t], ' '); |
| 201 } |
| 202 |
| 203 o3djs.dump.dump('---dump g_pack textures---\n'); |
| 204 var textures = pack.getObjectsByClassName('o3d.Texture'); |
| 205 for (var t = 0; t < textures.length; t++) { |
| 206 o3djs.dump.dumpTexture(textures[t]); |
| 207 } |
| 208 |
| 209 o3djs.dump.dump('---dump g_pack effects---\n'); |
| 210 var effects = pack.getObjectsByClassName('o3d.Effect'); |
| 211 for (var t = 0; t < effects.length; t++) { |
| 212 o3djs.dump.dump (' ' + t + ' : ' + effects[t].className + |
| 213 ' : "' + effects[t].name + '"\n'); |
| 214 o3djs.dump.dumpParams(effects[t], ' '); |
| 215 } |
| 216 } |
| 217 } |
| 218 } |
| 219 |
| 220 g_pack = g_client.createPack(); |
| 221 |
| 222 // Create a new transform for the loaded file |
| 223 var parent = g_pack.createObject('Transform'); |
| 224 parent.parent = g_client.root; |
| 225 if (path != null) { |
| 226 g_loadingElement.innerHTML = "Loading: " + path; |
| 227 enableInput(false); |
| 228 try { |
| 229 o3djs.scene.loadScene(g_client, g_pack, parent, path, callback); |
| 230 } catch (e) { |
| 231 enableInput(true); |
| 232 g_loadingElement.innerHTML = "loading failed : " + e; |
| 233 } |
| 234 } |
| 235 |
| 236 return parent; |
| 237 } |
| 238 |
| 239 function setClientSize() { |
| 240 var newWidth = parseInt(g_client.width); |
| 241 var newHeight = parseInt(g_client.height); |
| 242 |
| 243 if (newWidth != g_o3dWidth || newHeight != g_o3dHeight) { |
| 244 g_o3dWidth = newWidth; |
| 245 g_o3dHeight = newHeight; |
| 246 |
| 247 updateProjection(); |
| 248 |
| 249 // Sets a new area size for arcball. |
| 250 g_aball.setAreaSize(g_o3dWidth, g_o3dHeight); |
| 251 } |
| 252 } |
| 253 |
| 254 /** |
| 255 * Called every frame. |
| 256 */ |
| 257 function onRender() { |
| 258 // If we don't check the size of the client area every frame we don't get a |
| 259 // chance to adjust the perspective matrix fast enough to keep up with the |
| 260 // browser resizing us. |
| 261 setClientSize(); |
| 262 } |
| 263 |
| 264 /** |
| 265 * Creates the client area. |
| 266 */ |
| 267 function init() { |
| 268 // o3djs.webgl.makeClients(initStep2); |
| 269 // The following call enables a debug WebGL context, which makes |
| 270 // debugging much easier. |
| 271 o3djs.webgl.makeClients(initStep2, undefined, undefined, undefined, undefined,
undefined, true); |
| 272 } |
| 273 |
| 274 /** |
| 275 * Initializes O3D and loads the scene into the transform graph. |
| 276 * @param {Array} clientElements Array of o3d object elements. |
| 277 */ |
| 278 function initStep2(clientElements) { |
| 279 var path = window.location.href; |
| 280 var index = path.lastIndexOf('/'); |
| 281 // Point at the parent directory's assets directory for the moment |
| 282 path = path.substring(0, index+1) + '../../simpleviewer/assets/cube/scene.json
'; |
| 283 var url = document.getElementById("url").value = path; |
| 284 g_loadingElement = document.getElementById('loading'); |
| 285 |
| 286 g_o3dElement = clientElements[0]; |
| 287 g_o3d = g_o3dElement.o3d; |
| 288 g_math = o3djs.math; |
| 289 g_quaternions = o3djs.quaternions; |
| 290 g_client = g_o3dElement.client; |
| 291 |
| 292 g_mainPack = g_client.createPack(); |
| 293 |
| 294 // Create the render graph for a view. |
| 295 g_viewInfo = o3djs.rendergraph.createBasicView( |
| 296 g_mainPack, |
| 297 g_client.root, |
| 298 g_client.renderGraphRoot); |
| 299 |
| 300 g_lastRot = g_math.matrix4.identity(); |
| 301 g_thisRot = g_math.matrix4.identity(); |
| 302 |
| 303 var root = g_client.root; |
| 304 |
| 305 g_aball = o3djs.arcball.create(100, 100); |
| 306 setClientSize(); |
| 307 |
| 308 // Set the light at the same position as the camera to create a headlight |
| 309 // that illuminates the object straight on. |
| 310 var paramObject = g_mainPack.createObject('ParamObject'); |
| 311 g_lightPosParam = paramObject.createParam('lightWorldPos', 'ParamFloat3'); |
| 312 g_camera.target = [0, 0, 0]; |
| 313 g_camera.eye = [0, 0, 5]; |
| 314 updateCamera(); |
| 315 |
| 316 doload() |
| 317 |
| 318 o3djs.event.addEventListener(g_o3dElement, 'mousedown', startDragging); |
| 319 o3djs.event.addEventListener(g_o3dElement, 'mousemove', drag); |
| 320 o3djs.event.addEventListener(g_o3dElement, 'mouseup', stopDragging); |
| 321 o3djs.event.addEventListener(g_o3dElement, 'wheel', scrollMe); |
| 322 |
| 323 g_client.setRenderCallback(onRender); |
| 324 } |
| 325 |
| 326 /** |
| 327 * Removes any callbacks so they don't get called after the page has unloaded. |
| 328 */ |
| 329 function uninit() { |
| 330 if (g_client) { |
| 331 g_client.cleanup(); |
| 332 } |
| 333 } |
| 334 |
| 335 function doload() { |
| 336 if (g_root) { |
| 337 g_root.parent = null; |
| 338 g_root = null; |
| 339 } |
| 340 if (g_pack) { |
| 341 g_pack.destroy(); |
| 342 g_pack = null; |
| 343 } |
| 344 var url = document.getElementById('url').value; |
| 345 g_root = loadFile(g_viewInfo.drawContext, url); |
| 346 } |
| 347 </script> |
| 348 <table width="100%" style="height:100%;"> |
| 349 <tr><td valign="middle" align="center" height="100%"> |
| 350 <table width="100%" style="height:100%;"><tr><td height="100%"> |
| 351 <h1> |
| 352 Simple Scene Viewer |
| 353 </h1> |
| 354 <table id="container" width="90%" style="height:60%;" border="2"><tr><td height=
"100%"> |
| 355 <div id="o3d" style="width: 100%; height: 100%;"></div> |
| 356 </td></tr></table> |
| 357 <p> |
| 358 </p> |
| 359 |
| 360 <input type="text" id="url" size="100"> |
| 361 <input type="button" id="load" onclick="doload();" value="load"><BR> |
| 362 |
| 363 Drag The Mouse To Rotate<br/> |
| 364 Scrollwheel To Zoom<br/> |
| 365 Resize The Window To Resize The View |
| 366 <div style="color: red;" id="loading"></div> |
| 367 </td></tr></table> |
| 368 </td></tr></table> |
| 369 </body> |
| 370 </html> |
| 371 |
| 372 |
OLD | NEW |