| 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 Google I/O O3D Sample. |
| 33 |
| 34 This sample shows the steps to make a simple frame rate independent game. |
| 35 --> |
| 36 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
| 37 "http://www.w3.org/TR/html4/loose.dtd"> |
| 38 <html> |
| 39 <head> |
| 40 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> |
| 41 <title> |
| 42 Google I/O O3D Sample |
| 43 </title> |
| 44 <style type="text/css"> |
| 45 html, body { |
| 46 height: 100%; |
| 47 margin: 0; |
| 48 padding: 0; |
| 49 border: none; |
| 50 font-family: Arial, sans-serif; |
| 51 } |
| 52 </style> |
| 53 <!-- Include sample javascript library functions--> |
| 54 <script type="text/javascript" src="../o3djs/base.js"></script> |
| 55 |
| 56 <!-- Our javascript code --> |
| 57 <script type="text/javascript"> |
| 58 o3djs.require('o3djs.util'); |
| 59 o3djs.require('o3djs.math'); |
| 60 o3djs.require('o3djs.rendergraph'); |
| 61 o3djs.require('o3djs.primitives'); |
| 62 o3djs.require('o3djs.material'); |
| 63 |
| 64 // Events |
| 65 // init() once the page has finished loading. |
| 66 // unload() when the page is unloaded. |
| 67 window.onload = init; |
| 68 window.onunload= unload; |
| 69 |
| 70 // constants |
| 71 var MOVE_VELOCITY = 25; // in units per second. |
| 72 var JUMP_VELOCITY = 100; |
| 73 var GRAVITY = -500; |
| 74 |
| 75 // global variables |
| 76 var g_o3dElement; |
| 77 var g_o3d; |
| 78 var g_math; |
| 79 var g_client; |
| 80 var g_viewInfo; |
| 81 var g_pack; |
| 82 var g_root; |
| 83 var g_globalParams; |
| 84 var g_o3dWidth; |
| 85 var g_o3dHeight; |
| 86 var g_o3dElement; |
| 87 var g_keyDown = []; // which keys are down by key code. |
| 88 var g_playerTransform; |
| 89 var g_playerXPosition = 0; |
| 90 var g_playerYPosition = 0; |
| 91 var g_playerZPosition = 0; |
| 92 var g_eye = [15, 25, 50]; |
| 93 var g_target = [0, 10, 0]; |
| 94 var g_up = [0, 1, 0]; |
| 95 var g_viewMatrix; |
| 96 var g_moveMatrix; |
| 97 var g_canJump = true; |
| 98 var g_jumping = false; |
| 99 var g_playerYVelocity = 0; |
| 100 |
| 101 /** |
| 102 * Updates the projection matrix. |
| 103 */ |
| 104 function updateProjection() { |
| 105 g_viewInfo.drawContext.projection = g_math.matrix4.perspective( |
| 106 g_math.degToRad(45), // field of view. |
| 107 g_o3dWidth / g_o3dHeight, // aspect ratio |
| 108 0.1, // Near plane. |
| 109 5000); // Far plane. |
| 110 } |
| 111 |
| 112 /** |
| 113 * Given a view matrix computes an movement matrix to make it easy |
| 114 * to move something relative to the camera view in the XZ plane. |
| 115 * @param {!o3djs.math.Matrix4} viewMatrix A view matrix. |
| 116 * @return {!o3djs.math.Matrix4} A movement matrix. |
| 117 */ |
| 118 function computeMoveMatrixFromViewMatrix(viewMatrix) { |
| 119 var cameraMatrix = g_math.matrix4.inverse(viewMatrix); |
| 120 var xAxis = g_math.cross([0, 1, 0], cameraMatrix[2].slice(0, 3)); |
| 121 var zAxis = g_math.cross(xAxis, [0, 1, 0]); |
| 122 return [ |
| 123 xAxis.concat(0), |
| 124 [0, 1, 0, 0], |
| 125 zAxis.concat(0), |
| 126 [0, 0, 0, 1]]; |
| 127 } |
| 128 |
| 129 /* |
| 130 * Updates the camera. |
| 131 */ |
| 132 function updateCamera() { |
| 133 g_viewMatrix = g_math.matrix4.lookAt(g_eye, g_target, g_up); |
| 134 g_viewInfo.drawContext.view = g_viewMatrix; |
| 135 g_moveMatrix = computeMoveMatrixFromViewMatrix(g_viewMatrix); |
| 136 }; |
| 137 |
| 138 /** |
| 139 * Updates global variables of the client's size if they have changed. |
| 140 */ |
| 141 function updateClientSize() { |
| 142 var newWidth = g_client.width; |
| 143 var newHeight = g_client.height; |
| 144 if (g_o3dWidth != newWidth || g_o3dHeight != newHeight) { |
| 145 g_o3dWidth = newWidth; |
| 146 g_o3dHeight = newHeight; |
| 147 updateProjection(); |
| 148 } |
| 149 } |
| 150 |
| 151 /** |
| 152 * Creates the client area. |
| 153 */ |
| 154 function init() { |
| 155 o3djs.util.makeClients(initStep2); |
| 156 } |
| 157 |
| 158 /** |
| 159 * Initializes O3D and creates one shape. |
| 160 * @param {Array} clientElements Array of o3d object elements. |
| 161 */ |
| 162 function initStep2(clientElements) { |
| 163 // Initializes global variables and libraries. |
| 164 g_o3dElement = clientElements[0]; |
| 165 g_o3d = g_o3dElement.o3d; |
| 166 g_math = o3djs.math; |
| 167 g_client = g_o3dElement.client; |
| 168 |
| 169 // Creates a pack to manage our resources/assets |
| 170 g_pack = g_client.createPack(); |
| 171 |
| 172 g_root = g_pack.createObject('Transform'); |
| 173 |
| 174 g_viewInfo = o3djs.rendergraph.createBasicView( |
| 175 g_pack, |
| 176 g_root, |
| 177 g_client.renderGraphRoot); |
| 178 |
| 179 updateCamera(); |
| 180 |
| 181 var redMaterial = o3djs.material.createBasicMaterial( |
| 182 g_pack, |
| 183 g_viewInfo, |
| 184 [0.2, 1, 0.2, 1]); // green |
| 185 |
| 186 var checkerMaterial = o3djs.material.createMaterialFromFile( |
| 187 g_pack, 'shaders/checker.shader', g_viewInfo.performanceDrawList); |
| 188 |
| 189 g_globalParams = o3djs.material.createAndBindStandardParams(g_pack); |
| 190 g_globalParams.lightWorldPos.value = [30, 60, 40]; |
| 191 g_globalParams.lightColor.value = [1, 1, 1, 1]; |
| 192 |
| 193 // Create a ground plane. |
| 194 var shape = o3djs.primitives.createPlane( |
| 195 g_pack, checkerMaterial, 100, 100, 10, 10); |
| 196 var transform = g_pack.createObject('Transform'); |
| 197 transform.parent = g_root; |
| 198 transform.addShape(shape); |
| 199 |
| 200 // Create a cylinder. |
| 201 var shape = o3djs.primitives.createCylinder( |
| 202 g_pack, redMaterial, 2.5, 5, 20, 1, |
| 203 g_math.matrix4.translation([0, 2.5, 0])); |
| 204 var transform = g_pack.createObject('Transform'); |
| 205 transform.parent = g_root; |
| 206 transform.addShape(shape); |
| 207 |
| 208 g_playerTransform = transform; |
| 209 |
| 210 // Setup a render callback for per frame processing. |
| 211 g_client.setRenderCallback(onRender); |
| 212 |
| 213 o3djs.event.addEventListener(g_o3dElement, 'keydown', onKeyDown); |
| 214 o3djs.event.addEventListener(g_o3dElement, 'keyup', onKeyUp); |
| 215 |
| 216 window.g_finished = true; // for selenium testing. |
| 217 } |
| 218 |
| 219 /** |
| 220 * Tracks key down events. |
| 221 * @param {Event} e keyboard event. |
| 222 */ |
| 223 function onKeyDown(e) { |
| 224 g_keyDown[e.keyCode] = true; |
| 225 } |
| 226 |
| 227 /** |
| 228 * Tracks key up events. |
| 229 * @param {Event} e keyboard event. |
| 230 */ |
| 231 function onKeyUp(e) { |
| 232 g_keyDown[e.keyCode] = false; |
| 233 } |
| 234 |
| 235 /** |
| 236 * Look at keys. |
| 237 */ |
| 238 function handleMoveKeys(elapsedTime) { |
| 239 var directionX = 0; |
| 240 var directionZ = 0; |
| 241 |
| 242 if (g_keyDown[37] || g_keyDown[65]) { directionX = -1; } |
| 243 if (g_keyDown[39] || g_keyDown[68]) { directionX = 1; } |
| 244 if (g_keyDown[38] || g_keyDown[87]) { directionZ = -1; } |
| 245 if (g_keyDown[40] || g_keyDown[83]) { directionZ = 1; } |
| 246 |
| 247 if (g_canJump) { |
| 248 if (g_keyDown[32]) { |
| 249 g_jumping = true; |
| 250 g_canJump = false; |
| 251 g_playerYVelocity = JUMP_VELOCITY; |
| 252 } |
| 253 } else { |
| 254 if (g_jumping) { |
| 255 g_playerYVelocity += GRAVITY * elapsedTime; |
| 256 g_playerYPosition += g_playerYVelocity * elapsedTime; |
| 257 if (g_playerYPosition <= 0) { |
| 258 g_playerYPosition = 0; |
| 259 g_jumping = false; |
| 260 } |
| 261 } else { |
| 262 if (!g_keyDown[32]) { |
| 263 g_canJump = true; |
| 264 } |
| 265 } |
| 266 } |
| 267 |
| 268 if (directionX != 0 || directionZ != 0) { |
| 269 var moveTranslation = g_math.matrix4.transformPoint( |
| 270 g_moveMatrix, |
| 271 [MOVE_VELOCITY * directionX * elapsedTime, |
| 272 0, |
| 273 MOVE_VELOCITY * directionZ * elapsedTime]); |
| 274 |
| 275 g_playerXPosition += moveTranslation[0]; |
| 276 g_playerZPosition += moveTranslation[2]; |
| 277 } |
| 278 |
| 279 g_playerTransform.identity(); |
| 280 g_playerTransform.translate( |
| 281 g_playerXPosition, g_playerYPosition, g_playerZPosition); |
| 282 } |
| 283 |
| 284 /** |
| 285 * Move the camera. |
| 286 */ |
| 287 function moveCamera() { |
| 288 var newTarget = [g_playerXPosition, 10, g_playerZPosition]; |
| 289 g_target = g_math.lerpVector(g_target, newTarget, 0.03); |
| 290 updateCamera(); |
| 291 } |
| 292 |
| 293 /** |
| 294 * Called every frame. |
| 295 * @param {!o3d.RenderEvent} renderEvent Rendering Information. |
| 296 */ |
| 297 function onRender(renderEvent) { |
| 298 var elapsedTime = renderEvent.elapsedTime; |
| 299 |
| 300 updateClientSize(); |
| 301 handleMoveKeys(elapsedTime); |
| 302 moveCamera(); |
| 303 }; |
| 304 |
| 305 /** |
| 306 * Remove any callbacks so they don't get called after the page has unloaded. |
| 307 */ |
| 308 function unload() { |
| 309 if (g_client) { |
| 310 g_client.cleanup(); |
| 311 } |
| 312 } |
| 313 </script> |
| 314 </head> |
| 315 <body> |
| 316 <table style="width: 100%; height:100%;"> |
| 317 <tr style="height: 50px;"><td> |
| 318 <div style="width: 100%; height: 50px; font-size: large;"> |
| 319 <img src="assets/colorbar.png" width="100%" height="10px"/><br/> |
| 320 Google I/O 2009 O3D Sample |
| 321 </div> |
| 322 </td></tr> |
| 323 <tr style="height: 100%;"><td> |
| 324 <div style="width: 100%; height: 100%;"> |
| 325 <div id="o3d" style="width: 100%; height: 100%;"></div> |
| 326 </div> |
| 327 </td></tr> |
| 328 </table> |
| 329 </body> |
| 330 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
