diff options
Diffstat (limited to 'o3d/samples/o3d-webgl-samples/multiple-views.html')
| -rw-r--r-- | o3d/samples/o3d-webgl-samples/multiple-views.html | 222 |
1 files changed, 222 insertions, 0 deletions
diff --git a/o3d/samples/o3d-webgl-samples/multiple-views.html b/o3d/samples/o3d-webgl-samples/multiple-views.html new file mode 100644 index 0000000..bd1f222 --- /dev/null +++ b/o3d/samples/o3d-webgl-samples/multiple-views.html @@ -0,0 +1,222 @@ +<!-- +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. +--> + +<!-- +Example of multiple views into the same scene. +--> +<!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> +Multiple Views +</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.camera'); +o3djs.require('o3djs.pack'); +o3djs.require('o3djs.scene'); + +// Events +// init() once the page has finished loading. +window.onload = init; + +// global variables +var g_o3d; +var g_math; +var g_client; +var g_viewInfos = []; +var g_pack; +var g_finished = false; // for selenium testing + +/** + * Loads a scene into the transform graph. + * @param {!o3d.Pack} pack Pack to load scene into. + * @param {string} fileName filename of the scene. + * @param {!o3d.Transform} parent parent node in the transform graph to + * which to load the scene into. + */ +function loadScene(pack, fileName, parent) { + // Get our full path to the scene + var scenePath = o3djs.util.getCurrentURI() + fileName; + + // Load the file given the full path, and call the callback function + // when its done loading. + o3djs.scene.loadScene(g_client, pack, parent, scenePath, callback); + + /** + * Our callback is called once the scene has been loaded into memory + * from the web or locally. + * @param {!o3d.Pack} pack The pack that was passed in above. + * @param {!o3d.Transform} parent The parent that was passed in above. + * @param {*} exception null if loading succeeded. + */ + function callback(pack, parent, exception) { + if (exception) { + alert('Could not load: ' + fileName + '\n' + exception); + return; + } + // Get a cameraInfo (an object with a view and projection matrix) + // using our javascript library function + var cameraInfo = o3djs.camera.getViewAndProjectionFromCameras( + parent, + g_client.width / 2, // because this context is only used 1/2 the area + g_client.height); + + // Copy the view and projection to the draw context. + g_viewInfos[0].drawContext.view = cameraInfo.view; + g_viewInfos[0].drawContext.projection = cameraInfo.projection; + + // Generate draw elements and setup material draw lists. + o3djs.pack.preparePack(pack, g_viewInfos[0]); + + g_finished = true; // for selenium testing. + } +} + +/** + * Creates the client area. + */ +function init() { + o3djs.webgl.makeClients(initStep2); +} + +/** + * Initializes O3D and loads the scene into the transform graph. + * @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; + + // Creates a pack to manage our resources/assets + g_pack = g_client.createPack(); + + // Create the render graph for a view for the left half of screen. + g_viewInfos[0] = o3djs.rendergraph.createBasicView( + g_pack, + g_client.root, + g_client.renderGraphRoot, + [0.7, 0.2, 0.2, 1], + 0, + [0, 0, 0.5, 1]); // left half of screen. + + // Setup 3 areas. Each area needs a viewport, a tree traveral, 2 drawpasses + // and although we could clear the screen once let's do it per viewport just + // as an example. The original area is already setup except it needs a + // viewport setting. + + // make the 2 right viewports + for (var yy = 0; yy < 2; yy++) { + // Set the view extents to the right half, top or bottom. + var viewExtents = [0.5, yy * 0.5, 0.5, 0.5]; + + // Give each view a different background color. + var viewBackgroundColor = [0.5, 0.2 + 0.5 * yy, 0.7 - 0.5 * yy, 1.0]; + + // Make this view get processes after the first view. + var viewPriority = yy + 1; + + // Create an extra view. We call createExtraView because we want to + // share DrawLists with the first view so that all 3 views draw the same + // things. + var viewInfo = o3djs.rendergraph.createExtraView( + g_viewInfos[0], + viewExtents, + viewBackgroundColor, + viewPriority); + + // Save it off for later. + g_viewInfos[g_viewInfos.length] = viewInfo; + + // Get the DrawContext for this area and set the view and + // projection matrices. + var drawContext = viewInfo.drawContext; + + if (yy == 0) { + drawContext.projection = g_math.matrix4.perspective( + g_math.degToRad(45), + (g_client.width * 0.5) / (g_client.height * 0.5), + 0.1, + 100); + drawContext.view = g_math.matrix4.lookAt( + [-10, 3, -15], // eye + [0, 2, 0], // target + [0, 1, 0]); // up + } else { + // lets make this one orthographic + var aspect = g_client.width / g_client.height; + drawContext.projection = g_math.matrix4.orthographic( + -10, + 10, + -10 / aspect, + 10 / aspect, + 0, + 100); + // look directly from the front + drawContext.view = g_math.matrix4.lookAt( + [0, 5, 30], // eye + [0, 5, 0], // target + [0, 1, 0]); // up + } + } + + // Creates a transform to put our data on. + var my_data_root = g_pack.createObject('Transform'); + + // Connects our root to the client's root. + my_data_root.parent = g_client.root; + + // Load the scene into the transform graph as a child my_data_root + loadScene(g_pack, '../assets/yard/scene.json', my_data_root); +} +</script> +</head> +<body> +<h1>Multiple Views</h1> +<br/> +<!-- Start of O3D plugin --> +<div id="o3d" style="width: 800px; height: 600px;"></div> +<!-- End of O3D plugin --> +</body> +</html> |