1 files changed, 248 insertions, 0 deletions
diff --git a/o3d/samples/o3d-webgl-samples/debugging.html b/o3d/samples/o3d-webgl-samples/debugging.html
new file mode 100644
index 0000000..216b051
--- /dev/null
+++ b/o3d/samples/o3d-webgl-samples/debugging.html
@@ -0,0 +1,248 @@
+<!--
+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.
+-->
+
+<!--
+This sample shows examples of using the debug.js utilities.
+-->
+<!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>
+Debugging.
+</title>
+<!-- Include sample javascript library functions-->
+<script type="text/javascript" src="../o3d-webgl/base.js"></script>
+<script type="text/javascript" src="../o3djs/base.js"></script>
+
+<!-- Our javascript code -->
+<script type="text/javascript" id="o3dscript">
+o3djs.base.o3d = o3d;
+o3djs.require('o3djs.webgl');
+o3djs.require('o3djs.math');
+o3djs.require('o3djs.rendergraph');
+o3djs.require('o3djs.pack');
+o3djs.require('o3djs.debug');
+// Events
+// init() 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_viewInfo;
+var g_pack;
+var g_transforms = [];
+var g_o3dWidth;  // width of our client area.
+var g_o3dHeight;  // height of our client area.
+var g_finished = false;  // for selenium testing.
+var g_clock = 0;
+var g_lastClock = 0;
+var g_tempAxesOn = false;
+var g_tempLinesOn = false;
+var g_timeMult = 1;
+var g_debugHelper;
+var g_debugLineGroup;
+var g_startEndLine;
+var g_tempLineGroup;
+
+/**
+ * Creates the client area.
+ */
+function init() {
+  o3djs.webgl.makeClients(initStep2);
+}
+
+/**
+ * Initializes O3D.
+ * @param {Array} clientElements Array of o3d object elements.
+ */
+function initStep2(clientElements) {
+  // Initializes global variables and libraries.
+  var o3dElement = clientElements[0];
+  g_o3d = o3dElement.o3d;
+  g_math = o3djs.math;
+  g_client = o3dElement.client;
+
+  // Get the width and height of our client area. We will need this to create
+  // a projection matrix.
+  g_o3dWidth  = o3dElement.clientWidth;
+  g_o3dHeight = o3dElement.clientHeight;
+
+  // Creates 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);
+
+  // 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 10000.
+  g_viewInfo.drawContext.projection = g_math.matrix4.perspective(
+      g_math.degToRad(45),
+      g_o3dWidth / g_o3dHeight,
+      0.1,
+      10000);
+
+  // Create 11 transforms for the bones and parent them into a chain.
+  for (var ii = 0; ii <= 10; ++ii) {
+    var transform = g_pack.createObject('Transform');
+    g_transforms[ii] = transform;
+    if (ii > 0) {
+      transform.translate(0, 20, 0);
+    }
+    transform.parent = ii == 0 ? g_client.root : g_transforms[ii - 1];
+  }
+
+  // create a debug helper.
+  g_debugHelper = o3djs.debug.createDebugHelper(g_client.createPack(),
+                                                g_viewInfo);
+
+  // create a debug line group
+  g_debugLineGroup = g_debugHelper.createDebugLineGroup(g_client.root);
+
+  // draw a few lines.
+  g_debugLineGroup.addLine([-20, 0, -20], [-20, 0, +20], [0, 1, 1, 1]);
+  g_debugLineGroup.addLine([-20, 0, +20], [+20, 0, +20], [0, 1, 1, 1]);
+  g_debugLineGroup.addLine([+20, 0, +20], [+20, 0, -20], [0, 1, 1, 1]);
+  g_debugLineGroup.addLine([+20, 0, -20], [-20, 0, -20], [0, 1, 1, 1]);
+
+  // create a line for updating.
+  g_startEndLine = g_debugLineGroup.addLine();
+
+  // Add axes to all the transforms.
+  g_debugHelper.addAxes(g_client.root);
+
+  // Add a cube to a transform.
+  g_debugHelper.addCube(g_transforms[3]);
+  g_debugHelper.setCubeScale(g_transforms[3], 10);
+  g_debugHelper.setCubeColor(g_transforms[3], [1, 1, 0, 1]);  // yellow.
+
+  // Add a sphere to a transform.
+  g_debugHelper.addSphere(g_transforms[7]);
+  g_debugHelper.setSphereScale(g_transforms[7], 20);
+  g_debugHelper.setSphereColor(g_transforms[7], [1, 0, 1, 1]);  // magenta.
+
+  // Setup an onrender callback for animation.
+  g_client.setRenderCallback(onrender);
+
+  g_finished = true;  // for selenium testing.
+}
+
+// spin the camera.
+function onrender(render_event) {
+  // Get the number of seconds since the last render.
+  var elapsedTime = render_event.elapsedTime;
+  g_clock += elapsedTime * g_timeMult;
+
+  var x = Math.sin(g_clock * 0.3) * 400;
+  var z = Math.cos(g_clock * 0.3) * 400;
+  var y = Math.sin(g_clock * 0.7) * 50 + 100;
+
+  g_viewInfo.drawContext.view = g_math.matrix4.lookAt(
+      [x, y, z],   // eye
+      [0, 100, 0], // target
+      [0, 1, 0]);  // up
+
+  // Make our bone chain bend.
+  var rotation = Math.PI / g_transforms.length * Math.sin(g_clock * 1);
+  for (var ii = 1; ii < g_transforms.length; ++ii) {
+    var transform = g_transforms[ii];
+    transform.identity();
+    transform.translate(0, 20, 0);
+    transform.rotateX(rotation);
+  }
+
+  // change the color of an axis each frame.
+  if ((g_clock * 2) % 2 < 1) {
+    g_debugHelper.setAxisColor(g_transforms[4], [1, 1, 1, 1]);
+  } else {
+    g_debugHelper.clearAxisColor(g_transforms[4]);
+  }
+
+  var start = g_math.matrix4.getTranslation(g_transforms[0].worldMatrix);
+  var end = g_math.matrix4.getTranslation(g_transforms[10].worldMatrix);
+  g_startEndLine.setEndPoints(start, end);
+
+  // Add/Remove some axes.
+  var tempAxesOn = (g_clock % 2) < 1;
+  if (tempAxesOn != g_tempAxesOn) {
+    g_tempAxesOn = tempAxesOn;
+    if (tempAxesOn) {
+      g_debugHelper.addAxes(g_transforms[7]);
+    } else {
+      g_debugHelper.removeAxes(g_transforms[7]);
+    }
+  }
+
+  // Create or delete a line group.
+  var tempLinesOn = (g_clock * 1.1 % 2) < 1;
+  if (tempLinesOn != g_tempLinesOn) {
+    g_tempLinesOn = tempLinesOn;
+    if (tempLinesOn) {
+      g_tempLineGroup = g_debugHelper.createDebugLineGroup(g_transforms[10]);
+      g_tempLineGroup.setColor([1, 0.7, 0.7, 1]);
+      g_tempLineGroup.addLine([-20, 0, -20], [-20, 0, +20]);
+      g_tempLineGroup.addLine([-20, 0, +20], [+20, 0, +20]);
+      g_tempLineGroup.addLine([+20, 0, +20], [+20, 0, -20]);
+      g_tempLineGroup.addLine([+20, 0, -20], [-20, 0, -20]);
+    } else {
+      g_tempLineGroup.destroy();
+    }
+  }
+
+  g_lastClock = g_clock;
+}
+
+/**
+ * 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>
+<h1>Debugging.</h1>
+<p>This sample shows examples of using the debug.js utilities.
+<!-- Start of O3D plugin -->
+<div id="o3d" style="width: 800px; height: 600px;"></div>
+<!-- End of O3D plugin -->
+</body>
+</html>