summaryrefslogtreecommitdiffstats
path: root/o3d/samples/o3d-webgl-samples
diff options
context:
space:
mode:
authorpetersont@google.com <petersont@google.com@0039d316-1c4b-4281-b951-d872f2087c98>2010-04-07 21:45:34 +0000
committerpetersont@google.com <petersont@google.com@0039d316-1c4b-4281-b951-d872f2087c98>2010-04-07 21:45:34 +0000
commit9d7a5dded02f75bbf4dce8857d871d8d18d9c9ac (patch)
tree717f3760e42042a470d9b11cc28a02d4e02e162a /o3d/samples/o3d-webgl-samples
parentf0dfb8223d5a73cacd2dbaafdd890adec101d5c7 (diff)
downloadchromium_src-9d7a5dded02f75bbf4dce8857d871d8d18d9c9ac.zip
chromium_src-9d7a5dded02f75bbf4dce8857d871d8d18d9c9ac.tar.gz
chromium_src-9d7a5dded02f75bbf4dce8857d871d8d18d9c9ac.tar.bz2
Modified effect.js to emit glsl as well as the original o3d shader language. Also got primitives.html working and added it to o3d-webgl-samples directory.
Review URL: http://codereview.chromium.org/1300002 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@43884 0039d316-1c4b-4281-b951-d872f2087c98
Diffstat (limited to 'o3d/samples/o3d-webgl-samples')
-rw-r--r--o3d/samples/o3d-webgl-samples/primitives.html247
1 files changed, 247 insertions, 0 deletions
diff --git a/o3d/samples/o3d-webgl-samples/primitives.html b/o3d/samples/o3d-webgl-samples/primitives.html
new file mode 100644
index 0000000..93fd1cb
--- /dev/null
+++ b/o3d/samples/o3d-webgl-samples/primitives.html
@@ -0,0 +1,247 @@
+<!--
+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.
+-->
+
+<!--
+O3D Primitives
+
+This sample shows how to use the functions in the primitives utility library
+to make various shapes.
+-->
+<!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>
+Primitives
+</title>
+<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.rendergraph');
+o3djs.require('o3djs.primitives');
+o3djs.require('o3djs.material');
+
+// global variables
+var g_o3dElement;
+var g_client;
+var g_o3d;
+var g_math;
+var g_pack;
+var g_viewInfo;
+var g_eyePosition = [3, 4, 14];
+
+/**
+ * Creates the client area.
+ */
+function initClient() {
+ window.g_finished = false; // for selenium testing.
+ o3djs.webgl.makeClients(main);
+}
+
+/**
+ * Initializes global variables, positions camera, draws shapes.
+ * @param {Array} clientElements Array of o3d object elements.
+ */
+function main(clientElements) {
+ // Init global variables.
+ initGlobals(clientElements);
+
+ // Set up the view and projection transformations.
+ initContext();
+
+ // Add the shapes to the transform heirarchy.
+ createShapes();
+
+ window.g_finished = true; // for selenium testing.
+}
+
+/**
+ * Initializes global variables and libraries.
+ */
+function initGlobals(clientElements) {
+ g_o3dElement = clientElements[0];
+ window.g_client = g_client = g_o3dElement.client;
+ g_o3d = g_o3dElement.o3d;
+ g_math = o3djs.math;
+
+ // Create a pack to manage the objects created.
+ 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);
+}
+
+/**
+ * Sets up reasonable view and projection matrices.
+ */
+function initContext() {
+ // Set up a perspective transformation for the projection.
+ g_viewInfo.drawContext.projection = g_math.matrix4.perspective(
+ g_math.degToRad(30), // 30 degree frustum.
+ g_o3dElement.clientWidth / g_o3dElement.clientHeight, // Aspect ratio.
+ 1, // Near plane.
+ 5000); // Far plane.
+
+ // Set up our view transformation to look towards the world origin where the
+ // primitives are located.
+ g_viewInfo.drawContext.view = g_math.matrix4.lookAt(
+ g_eyePosition, // eye
+ [0, 0, 0], // target
+ [0, 1, 0]); // up
+}
+
+/**
+ * Creates a material based on the given single color.
+ * @param {!o3djs.math.Vector4} baseColor A 4-component vector with
+ * the R,G,B, and A components of a color.
+ * @return {!o3d.Material} A phong material whose overall pigment is
+ * baseColor.
+ */
+function createMaterial(baseColor) {
+ // Create a new, empty Material object.
+ return o3djs.material.createBasicMaterial(g_pack, g_viewInfo, baseColor);
+}
+
+/**
+ * Creates shapes using the primitives utility library, and adds them to the
+ * transform graph at the root node.
+ */
+function createShapes() {
+ var cube = o3djs.primitives.createCube(
+ g_pack,
+ createMaterial([0,1,0,1]), // A green phong-shaded material.
+ Math.sqrt(2)); // The length of each side of the cube.
+
+ var sphere = o3djs.primitives.createSphere(
+ g_pack,
+ createMaterial([1,0,0,1]),
+ 1.0, // Radius of the sphere.
+ 30, // Number of meridians.
+ 20); // Number of parallels.
+
+ var cylinder = o3djs.primitives.createCylinder(
+ g_pack,
+ createMaterial([1,0,1,1]),
+ 0.5, // Radius.
+ 1.5, // Height.
+ 20, // Number of radial subdivisions.
+ 20); // Number of vertical subdivisions.
+
+ var truncatedCone = o3djs.primitives.createTruncatedCone(
+ g_pack,
+ createMaterial([0,0,1,1]),
+ 0.3, // Bottom radius.
+ 0.5, // Top radius.
+ 1.5, // Height.
+ 20, // Number of radial subdivisions.
+ 20); // Number of vertical subdivisions.
+
+ var cone = o3djs.primitives.createTruncatedCone(
+ g_pack,
+ createMaterial([0,1,0,1]),
+ 0.5, // Bottom radius.
+ 0.0, // Top radius.
+ 1.5, // Height.
+ 20, // Number of radial subdivisions.
+ 20); // Number of vertical subdivisions.
+
+ var plane = o3djs.primitives.createPlane(
+ g_pack,
+ createMaterial([0,1,1,1]),
+ 1, // Width.
+ 1.618, // Depth.
+ 3, // Horizontal subdivisions.
+ 3); // Vertical subdivisions.
+
+ // Make a polygon to extrude for the prism.
+ var polygon = [];
+ var n = 10;
+ for (var i = 0; i < n; ++i) {
+ var theta = 2.0 * i * Math.PI / n;
+ var radius = (i % 2) ? 1 : 0.382;
+ polygon.push([radius * Math.cos(theta), radius * Math.sin(theta)]);
+ }
+
+ var prism = o3djs.primitives.createPrism(
+ g_pack,
+ createMaterial([1,1,0,1]),
+ polygon, // The profile polygon to be extruded.
+ 1); // The depth of the extrusion.
+
+ var disc = o3djs.primitives.createDisc(
+ g_pack,
+ createMaterial([1,0,0,1]),
+ 1, // Radius.
+ 7, // Divisions.
+ 2, // Stacks (optional).
+ 0, // Start Stack (optional).
+ 2); // Stack Power (optional).
+
+ // Add the shapes to the transforms.
+ var transformTable = [
+ {shape: cube, translation: [-3, 1, 0]},
+ {shape: sphere, translation: [-1, 1, 0]},
+ {shape: cylinder, translation: [1, 1, 0]},
+ {shape: truncatedCone, translation: [3, 1, 0]},
+ {shape: plane, translation: [-3, -1, 0]},
+ {shape: prism, translation: [-1, -1, 0]},
+ {shape: disc, translation: [1, -1, 0]},
+ {shape: cone, translation: [3, -1, 0]},
+ ];
+
+ for (var tt = 0; tt < transformTable.length; ++tt) {
+ var transform = g_pack.createObject('Transform');
+ transform.addShape(transformTable[tt].shape);
+ transform.translate(transformTable[tt].translation);
+ transform.parent = g_client.root;
+ }
+}
+
+
+</script>
+</head>
+<body onload="initClient()">
+<h1>Primitives</h1>
+This example shows how to use the primitives utility library to make various
+shapes.
+<br/>
+<!-- Start of O3D plugin -->
+<div id="o3d" width="600px" height="600px"></div>
+<!-- End of O3D plugin -->
+</body>
+</html>
generated by cgit v1.1 at 2025-01-30 19:03:47 +0000