gman@google.com
57b06601cf
Review URL: http://codereview.chromium.org/149438 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@20437 0039d316-1c4b-4281-b951-d872f2087c98
331 linhas
8.9 KiB
HTML
331 linhas
8.9 KiB
HTML
<!--
|
|
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.
|
|
-->
|
|
<!--
|
|
Google I/O O3D Sample.
|
|
|
|
This sample shows the steps to make a simple frame rate independent game.
|
|
-->
|
|
<!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>
|
|
Google I/O O3D Sample
|
|
</title>
|
|
<style type="text/css">
|
|
html, body {
|
|
height: 100%;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
</style>
|
|
<!-- Include sample javascript library functions-->
|
|
<script type="text/javascript" src="../o3djs/base.js"></script>
|
|
|
|
<!-- Our javascript code -->
|
|
<script type="text/javascript">
|
|
o3djs.require('o3djs.util');
|
|
o3djs.require('o3djs.math');
|
|
o3djs.require('o3djs.rendergraph');
|
|
o3djs.require('o3djs.primitives');
|
|
o3djs.require('o3djs.material');
|
|
|
|
// Events
|
|
// init() once the page has finished loading.
|
|
// unload() when the page is unloaded.
|
|
window.onload = init;
|
|
window.onunload= unload;
|
|
|
|
// constants
|
|
var MOVE_VELOCITY = 25; // in units per second.
|
|
var JUMP_VELOCITY = 100;
|
|
var GRAVITY = -500;
|
|
|
|
// global variables
|
|
var g_o3dElement;
|
|
var g_o3d;
|
|
var g_math;
|
|
var g_client;
|
|
var g_viewInfo;
|
|
var g_pack;
|
|
var g_root;
|
|
var g_globalParams;
|
|
var g_o3dWidth;
|
|
var g_o3dHeight;
|
|
var g_o3dElement;
|
|
var g_keyDown = []; // which keys are down by key code.
|
|
var g_playerTransform;
|
|
var g_playerXPosition = 0;
|
|
var g_playerYPosition = 0;
|
|
var g_playerZPosition = 0;
|
|
var g_eye = [15, 25, 50];
|
|
var g_target = [0, 10, 0];
|
|
var g_up = [0, 1, 0];
|
|
var g_viewMatrix;
|
|
var g_moveMatrix;
|
|
var g_canJump = true;
|
|
var g_jumping = false;
|
|
var g_playerYVelocity = 0;
|
|
|
|
/**
|
|
* Updates the projection matrix.
|
|
*/
|
|
function updateProjection() {
|
|
g_viewInfo.drawContext.projection = g_math.matrix4.perspective(
|
|
g_math.degToRad(45), // field of view.
|
|
g_o3dWidth / g_o3dHeight, // aspect ratio
|
|
0.1, // Near plane.
|
|
5000); // Far plane.
|
|
}
|
|
|
|
/**
|
|
* Given a view matrix computes an movement matrix to make it easy
|
|
* to move something relative to the camera view in the XZ plane.
|
|
* @param {!o3djs.math.Matrix4} viewMatrix A view matrix.
|
|
* @return {!o3djs.math.Matrix4} A movement matrix.
|
|
*/
|
|
function computeMoveMatrixFromViewMatrix(viewMatrix) {
|
|
var cameraMatrix = g_math.matrix4.inverse(viewMatrix);
|
|
var xAxis = g_math.cross([0, 1, 0], cameraMatrix[2].slice(0, 3));
|
|
var zAxis = g_math.cross(xAxis, [0, 1, 0]);
|
|
return [
|
|
xAxis.concat(0),
|
|
[0, 1, 0, 0],
|
|
zAxis.concat(0),
|
|
[0, 0, 0, 1]];
|
|
}
|
|
|
|
/*
|
|
* Updates the camera.
|
|
*/
|
|
function updateCamera() {
|
|
g_viewMatrix = g_math.matrix4.lookAt(g_eye, g_target, g_up);
|
|
g_viewInfo.drawContext.view = g_viewMatrix;
|
|
g_moveMatrix = computeMoveMatrixFromViewMatrix(g_viewMatrix);
|
|
};
|
|
|
|
/**
|
|
* Updates global variables of the client's size if they have changed.
|
|
*/
|
|
function updateClientSize() {
|
|
var newWidth = g_client.width;
|
|
var newHeight = g_client.height;
|
|
if (g_o3dWidth != newWidth || g_o3dHeight != newHeight) {
|
|
g_o3dWidth = newWidth;
|
|
g_o3dHeight = newHeight;
|
|
updateProjection();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Creates the client area.
|
|
*/
|
|
function init() {
|
|
o3djs.util.makeClients(initStep2);
|
|
}
|
|
|
|
/**
|
|
* Initializes O3D and creates one shape.
|
|
* @param {Array} clientElements Array of o3d object elements.
|
|
*/
|
|
function initStep2(clientElements) {
|
|
// Initializes global variables and libraries.
|
|
g_o3dElement = clientElements[0];
|
|
g_o3d = g_o3dElement.o3d;
|
|
g_math = o3djs.math;
|
|
g_client = g_o3dElement.client;
|
|
|
|
// Creates a pack to manage our resources/assets
|
|
g_pack = g_client.createPack();
|
|
|
|
g_root = g_pack.createObject('Transform');
|
|
|
|
g_viewInfo = o3djs.rendergraph.createBasicView(
|
|
g_pack,
|
|
g_root,
|
|
g_client.renderGraphRoot);
|
|
|
|
updateCamera();
|
|
|
|
var redMaterial = o3djs.material.createBasicMaterial(
|
|
g_pack,
|
|
g_viewInfo,
|
|
[0.2, 1, 0.2, 1]); // green
|
|
|
|
var checkerMaterial = o3djs.material.createMaterialFromFile(
|
|
g_pack, 'shaders/checker.shader', g_viewInfo.performanceDrawList);
|
|
|
|
g_globalParams = o3djs.material.createAndBindStandardParams(g_pack);
|
|
g_globalParams.lightWorldPos.value = [30, 60, 40];
|
|
g_globalParams.lightColor.value = [1, 1, 1, 1];
|
|
|
|
// Create a ground plane.
|
|
var shape = o3djs.primitives.createPlane(
|
|
g_pack, checkerMaterial, 100, 100, 10, 10);
|
|
var transform = g_pack.createObject('Transform');
|
|
transform.parent = g_root;
|
|
transform.addShape(shape);
|
|
|
|
// Create a cylinder.
|
|
var shape = o3djs.primitives.createCylinder(
|
|
g_pack, redMaterial, 2.5, 5, 20, 1,
|
|
g_math.matrix4.translation([0, 2.5, 0]));
|
|
var transform = g_pack.createObject('Transform');
|
|
transform.parent = g_root;
|
|
transform.addShape(shape);
|
|
|
|
g_playerTransform = transform;
|
|
|
|
// Setup a render callback for per frame processing.
|
|
g_client.setRenderCallback(onRender);
|
|
|
|
o3djs.event.addEventListener(g_o3dElement, 'keydown', onKeyDown);
|
|
o3djs.event.addEventListener(g_o3dElement, 'keyup', onKeyUp);
|
|
|
|
window.g_finished = true; // for selenium testing.
|
|
}
|
|
|
|
/**
|
|
* Tracks key down events.
|
|
* @param {Event} e keyboard event.
|
|
*/
|
|
function onKeyDown(e) {
|
|
g_keyDown[e.keyCode] = true;
|
|
}
|
|
|
|
/**
|
|
* Tracks key up events.
|
|
* @param {Event} e keyboard event.
|
|
*/
|
|
function onKeyUp(e) {
|
|
g_keyDown[e.keyCode] = false;
|
|
}
|
|
|
|
/**
|
|
* Look at keys.
|
|
*/
|
|
function handleMoveKeys(elapsedTime) {
|
|
var directionX = 0;
|
|
var directionZ = 0;
|
|
|
|
if (g_keyDown[37] || g_keyDown[65]) { directionX = -1; }
|
|
if (g_keyDown[39] || g_keyDown[68]) { directionX = 1; }
|
|
if (g_keyDown[38] || g_keyDown[87]) { directionZ = -1; }
|
|
if (g_keyDown[40] || g_keyDown[83]) { directionZ = 1; }
|
|
|
|
if (g_canJump) {
|
|
if (g_keyDown[32]) {
|
|
g_jumping = true;
|
|
g_canJump = false;
|
|
g_playerYVelocity = JUMP_VELOCITY;
|
|
}
|
|
} else {
|
|
if (g_jumping) {
|
|
g_playerYVelocity += GRAVITY * elapsedTime;
|
|
g_playerYPosition += g_playerYVelocity * elapsedTime;
|
|
if (g_playerYPosition <= 0) {
|
|
g_playerYPosition = 0;
|
|
g_jumping = false;
|
|
}
|
|
} else {
|
|
if (!g_keyDown[32]) {
|
|
g_canJump = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (directionX != 0 || directionZ != 0) {
|
|
var moveTranslation = g_math.matrix4.transformPoint(
|
|
g_moveMatrix,
|
|
[MOVE_VELOCITY * directionX * elapsedTime,
|
|
0,
|
|
MOVE_VELOCITY * directionZ * elapsedTime]);
|
|
|
|
g_playerXPosition += moveTranslation[0];
|
|
g_playerZPosition += moveTranslation[2];
|
|
}
|
|
|
|
g_playerTransform.identity();
|
|
g_playerTransform.translate(
|
|
g_playerXPosition, g_playerYPosition, g_playerZPosition);
|
|
}
|
|
|
|
/**
|
|
* Move the camera.
|
|
*/
|
|
function moveCamera() {
|
|
var newTarget = [g_playerXPosition, 10, g_playerZPosition];
|
|
g_target = g_math.lerpVector(g_target, newTarget, 0.03);
|
|
updateCamera();
|
|
}
|
|
|
|
/**
|
|
* Called every frame.
|
|
* @param {!o3d.RenderEvent} renderEvent Rendering Information.
|
|
*/
|
|
function onRender(renderEvent) {
|
|
var elapsedTime = renderEvent.elapsedTime;
|
|
|
|
updateClientSize();
|
|
handleMoveKeys(elapsedTime);
|
|
moveCamera();
|
|
};
|
|
|
|
/**
|
|
* Remove 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 style="width: 100%; height:100%;">
|
|
<tr style="height: 50px;"><td>
|
|
<div style="width: 100%; height: 50px; font-size: large;">
|
|
<img src="assets/colorbar.png" width="100%" height="10px"/><br/>
|
|
Google I/O 2009 O3D Sample
|
|
</div>
|
|
</td></tr>
|
|
<tr style="height: 100%;"><td>
|
|
<div style="width: 100%; height: 100%;">
|
|
<div id="o3d" style="width: 100%; height: 100%;"></div>
|
|
</div>
|
|
</td></tr>
|
|
</table>
|
|
</body>
|
|
</html>
|