Make the fullscreen sample be the simplest possible one that shows good practices.

Review URL: http://codereview.chromium.org/119340 git-svn-id: svn://svn.chromium.org/chrome/trunk/src@18007 0039d316-1c4b-4281-b951-d872f2087c98
author: ericu@google.com <ericu@google.com@0039d316-1c4b-4281-b951-d872f2087c98> 2009-06-10 00:38:12 +0000
committer: ericu@google.com <ericu@google.com@0039d316-1c4b-4281-b951-d872f2087c98> 2009-06-10 00:38:12 +0000
commit: 88bb6e36a9655361bcc01f96a71ef079d71d3c52 (patch)
tree: fe69ca0ccb5418df14b0dbe71ffe3dd7cea3d4e7 /o3d
parent: 889e50af8cba9b18642aad3f035e152725043247 (diff)
download: chromium_src-88bb6e36a9655361bcc01f96a71ef079d71d3c52.zip
chromium_src-88bb6e36a9655361bcc01f96a71ef079d71d3c52.tar.gz
chromium_src-88bb6e36a9655361bcc01f96a71ef079d71d3c52.tar.bz2
1 files changed, 195 insertions, 403 deletions
diff --git a/o3d/samples/fullscreen.html b/o3d/samples/fullscreen.html
index 198eadb..cf80c56 100644
--- a/o3d/samples/fullscreen.html
+++ b/o3d/samples/fullscreen.html
@@ -30,9 +30,9 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 -->
 
 <!--
-HUD 2D Overlay with fullscreen toggle.
+Full-Screen Mode Example
 
-This example modifies the HUD sample to add fullscreen functionality.
+In this tutorial, we load and display a scene in O3D.
 -->
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
@@ -40,7 +40,7 @@ This example modifies the HUD sample to add fullscreen functionality.
 <head>
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <title>
-HUD 2D Overlay with fullscreen toggle.
+Full-Screen Mode Example
 </title>
 <!-- Include sample javascript library functions-->
 <script type="text/javascript" src="o3djs/base.js"></script>
@@ -50,237 +50,241 @@ HUD 2D Overlay with fullscreen toggle.
 o3djs.require('o3djs.util');
 o3djs.require('o3djs.math');
 o3djs.require('o3djs.rendergraph');
+o3djs.require('o3djs.camera');
+o3djs.require('o3djs.pack');
+o3djs.require('o3djs.scene');
 o3djs.require('o3djs.primitives');
-o3djs.require('o3djs.effect');
-o3djs.require('o3djs.loader');
-o3djs.require('o3djs.event');
 
 // Events
 // init() once the page has finished loading.
-// unload() when the page is unloaded.
 window.onload = init;
-window.onunload= unload;
 
 // global variables
-var g_o3dElement;
 var g_o3d;
 var g_math;
 var g_client;
-var g_3dRoot;
-var g_hudRoot;
 var g_viewInfo;
-var g_hudViewInfo;
 var g_pack;
-var g_clock = 0;
-var g_timeMult = 1;
 var g_finished = false;  // for selenium testing
-var g_cameraRadius = 35;
-var g_cameraSpeed = 0.3;
-var g_gaugeWidth = 145;
-var g_gaugeHeight = 16;
-var g_planeShape;
-var g_groundShape;
-var g_cubeShape;
-var g_materialUrls = [
-  'shaders/texture-colormult.shader',    // 0
-  'shaders/phong-with-colormult.shader'  // 1
-];
-var g_materials = [];
-var g_textures = [];
-var g_textureUrls = [
-  'assets/purple-flower.png',   // 0
-  'assets/orange-flower.png',   // 1
-  'assets/egg.png',             // 2
-  'assets/gaugeback.png',       // 3
-  'assets/gauge.png',           // 4
-  'assets/iconback.png',        // 5
-  'assets/radar.png',           // 6
-  'assets/one-pixel-white.tga', // 7
-  'assets/fullscreen.png'       // 8
-];
-var g_radar;
-var g_radarNeedle;
-var g_gaugeBack;
-var g_fullscreen;
-var g_gauges = [];
-var g_gaugeFrames = [];
-var g_iconBacks = [];
-var g_icons = [];
-var g_selectedIndex = 0;
-var g_randSeed = 0;
+var g_teapotRoot;
+var g_orthoRoot;
+var g_o3dElement;
 
 /**
- * Returns a deterministic pseudorandom number bewteen 0 and 1
- * @return {number} a random number between 0 and 1
+ * Creates the polygon and texture that will display the fullscreen banner, and
+ * makes a clickable region to match that will trigger the transition.
+ * @param {!number} clientHeight the height of the plugin region in pixels.
+ * @param {!o3djs.rendergraph.viewInfo} viewInfo the view corresponding to the
+ * orthographic projection on which we'll be displaying the banner.
  */
-function pseudoRandom() {
-  var range = Math.pow(2, 32);
+function createBannerSurfaceAndClickableRegion(clientHeight, viewInfo) {
+  var effect = g_pack.createObject('Effect');
+  o3djs.effect.loadEffect(effect, 'shaders/texture-only.shader');
 
-  return (g_randSeed = (134775813 * g_randSeed + 1) % range) / range;
-}
+  // Create a Material for the effect.
+  var material = g_pack.createObject('Material');
 
-/**
- * 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;
+  // Apply our effect to this material.
+  material.effect = effect;
 
-  // Creates a pack to manage our resources/assets
-  g_pack = g_client.createPack();
+  // Create the params the effect needs on the material.
+  effect.createUniformParameters(material);
 
-  // Create 2 root transforms, one for the 3d parts, one for the 2d parts.
-  // This is not strictly neccassary but it is helpful for organization.
-  g_3dRoot = g_pack.createObject('Transform');
-  g_hudRoot = g_pack.createObject('Transform');
+  // Set the drawlist for z-ordering.
+  material.drawList = viewInfo.zOrderedDrawList;
 
-  g_viewInfo = o3djs.rendergraph.createBasicView(
+  // Create a 2d plane for images. createPlane makes an XZ plane by default
+  // so we pass in matrix to rotate it to an XY plane. We could do
+  // all our manipulations in XZ but most people seem to like XY for 2D.
+  g_planeShape = o3djs.primitives.createPlane(
       g_pack,
-      g_3dRoot,
-      g_client.renderGraphRoot);
+      material,
+      1,
+      1,
+      1,
+      1,
+      [[1, 0, 0, 0],
+       [0, 0, 1, 0],
+       [0,-1, 0, 0],
+       [0, 0, 0, 1]]);
+   
+  // Load our banner.
+  var url = o3djs.util.getCurrentURI() + 'assets/fullscreen.png';
+  o3djs.io.loadTexture(g_pack, url, function(texture, exception) {
+    if (exception) {
+      alert(exception);
+    } else {
+      var sampler = g_pack.createObject('Sampler');
+      sampler.addressModeU = g_o3d.Sampler.CLAMP;
+      sampler.addressModeV = g_o3d.Sampler.CLAMP;
+      var paramSampler = g_orthoRoot.createParam('texSampler0', 'ParamSampler');
+      paramSampler.value = sampler;
+
+      sampler.texture = texture;
+      g_orthoRoot.addShape(g_planeShape);
+
+      // Convert to a top-left-corner-based coordinate system from the
+      // center-based default.
+      g_orthoRoot.translate(texture.width / 2, texture.height / 2, 0);
+
+      // Place the banner 10 pixels in from the bottom-left corner.
+      g_orthoRoot.translate(10, clientHeight - texture.height - 10, 0);
+
+      // Adjust the scale such that the above adjustment is in pixels; we could
+      // alternatively make the order work out by doing the scaling and
+      // transformation in separate transforms, with the translation in the
+      // parent and the scaling in the child.
+      g_orthoRoot.scale(texture.width, -texture.height, 1);
+
+      o3djs.event.addEventListener(g_o3dElement, 'resize', handleResizeEvent);
+      g_client.setFullscreenClickRegion(10, clientHeight - texture.height - 10,
+          texture.width, texture.height, getFullscreenModeId());
+    }
+    g_finished = true;  // for selenium testing.
+  });
+}
+
+/**
+ * Creates an orthographic projection view that will overlay the main display,
+ * and places on it the fullscreen banner.  Also creates the corresponding
+ * clickable region that triggers the fullscreen transition.
+ * @param {!number} width the width of the plugin region.
+ * @param {!number} height the height of the plugin region.
+ * @param {!o3djs.rendergraph.viewInfo} viewInfo the view corresponding to the
+ * orthographic projection on which we'll be displaying the banner.
+ */
+function setupBanner(width, height, viewInfo) {
+  g_orthoRoot = g_pack.createObject('Transform');
 
-  // Create a second view for the hud. There are other ways to do this but
-  // this is the easiest.
-  g_hudViewInfo = o3djs.rendergraph.createBasicView(
+  // Create a view for the orthographic display of the fullscreen banner.
+  var orthoViewInfo = o3djs.rendergraph.createBasicView(
         g_pack,
-        g_hudRoot,
+        g_orthoRoot,
         g_client.renderGraphRoot);
 
-  // Make sure the hud gets drawn after the 3d stuff
-  g_hudViewInfo.root.priority = g_viewInfo.root.priority + 1;
+  // Make sure the orthographic view gets drawn after the 3d stuff
+  orthoViewInfo.root.priority = g_viewInfo.root.priority + 1;
 
-  // Turn off clearing the color for the hud since that would erase the 3d
-  // parts but leave clearing the depth and stencil so the HUD is unaffected
-  // by anything done by the 3d parts.
-  g_hudViewInfo.clearBuffer.clearColorFlag = false;
+  // Turn off clearing the color for the orthographic view, since that would
+  // erase the 3d parts.  Leave clearing the depth and stencil, so it's
+  // unaffected by anything done by the 3d parts.
+  orthoViewInfo.clearBuffer.clearColorFlag = false;
 
   // Set culling to none so we can flip images using rotation or negative scale.
-  g_hudViewInfo.zOrderedState.getStateParam('CullMode').value =
+  orthoViewInfo.zOrderedState.getStateParam('CullMode').value =
       g_o3d.State.CULL_NONE;
-  g_hudViewInfo.zOrderedState.getStateParam('ZWriteEnable').value = false;
-
-  // Create an orthographic matrix for 2d stuff in the HUD.
-  // We assume the area is 800 pixels by 600 pixels and therefore we can
-  // position things using a 0-799, 0-599 coordinate system. If we change the
-  // size of the client area everything will get scaled to fix but we don't
-  // have to change any of our code. See 2d.html
-  g_hudViewInfo.drawContext.projection = g_math.matrix4.orthographic(
+  orthoViewInfo.zOrderedState.getStateParam('ZWriteEnable').value = false;
+
+  // Create an orthographic matrix for the banner.
+  // The area we're using for display is width by height pixels.
+  // If we change the size of the client area after setup, everything will get
+  // scaled to match, but we don't have to change any of our code.
+  orthoViewInfo.drawContext.projection = g_math.matrix4.orthographic(
       0 + 0.5,
-      800 + 0.5,
-      600 + 0.5,
+      width + 0.5,
+      height + 0.5,
       0 + 0.5,
       0.001,
       1000);
 
-  g_hudViewInfo.drawContext.view = g_math.matrix4.lookAt(
+  orthoViewInfo.drawContext.view = g_math.matrix4.lookAt(
       [0, 0, 1],   // eye
       [0, 0, 0],   // target
       [0, 1, 0]);  // up
 
-  g_viewInfo.drawContext.projection = g_math.matrix4.perspective(
-      g_math.degToRad(30), // 30 degree fov.
-      g_client.width / g_client.height,
-      0.1,                // Near plane.
-      5000);              // Far plane.
-
-  for (var ii = 0; ii < g_materialUrls.length; ++ii) {
-    var effect = g_pack.createObject('Effect');
-    o3djs.effect.loadEffect(effect, g_materialUrls[ii]);
+  createBannerSurfaceAndClickableRegion(g_client.height, orthoViewInfo);
+}
 
-    // Create a Material for the effect.
-    var material = g_pack.createObject('Material');
+/**
+ * Sets up the view and protection matrices, given a transform holding camera
+ * parameters.
+ * @param {!o3d.Transform} camera Transform with camera information on it.
+ */
+function setupCamera(camera) {
+  // Get a CameraInfo (an object with a view and projection matrix)
+  // using our javascript library function
+  var cameraInfo = o3djs.camera.getViewAndProjectionFromCameras(
+      camera,
+      g_client.width,
+      g_client.height);
+
+  // Copy the view and projection to the draw context.
+  g_viewInfo.drawContext.view = cameraInfo.view;
+  g_viewInfo.drawContext.projection = cameraInfo.projection;
+}
 
-    // Apply our effect to this material.
-    material.effect = effect;
+/**
+ * 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;
+    }
 
-    // Create the params the effect needs on the material.
-    effect.createUniformParameters(material);
+    setupCamera(parent);
 
-    // Set the default params. We'll override these with params on transforms.
-    material.getParam('colorMult').value = [1, 1, 1, 1];
+    // Generate draw elements and setup material draw lists.
+    o3djs.pack.preparePack(pack, g_viewInfo);
 
-    g_materials[ii] = material;
+    setupBanner(g_client.width, g_client.height, g_viewInfo);
   }
+}
+
+/**
+ * Creates the client area.
+ */
+function init() {
+  o3djs.util.makeClients(initStep2);
+}
 
-  // Set the materials' drawLists
-  g_materials[0].drawList = g_hudViewInfo.zOrderedDrawList;
-  g_materials[1].drawList = g_viewInfo.performanceDrawList;
+/**
+ * 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.
+  g_o3dElement = clientElements[0];
+  g_o3d = g_o3dElement.o3d;
+  g_math = o3djs.math;
+  g_client = g_o3dElement.client;
 
-  g_materials[1].getParam('lightWorldPos').value = [500, 1000, 0];
-  g_materials[1].getParam('lightIntensity').value = [1, 1, 1, 1];
-  g_materials[1].getParam('ambientIntensity').value = [0.1, 0.1, 0.1, 1];
-  g_materials[1].getParam('ambient').value = [1, 1, 1, 1];
-  g_materials[1].getParam('diffuse').value = [1, 1, 1, 1];
-  g_materials[1].getParam('specular').value = [0.5, 0.5, 0.5, 1];
-  g_materials[1].getParam('shininess').value = 20;
+  // Creates a pack to manage our resources/assets
+  g_pack = g_client.createPack();
 
-  // Create a 2d plane for images. createPlane makes an XZ plane by default
-  // so we pass in matrix to rotate it to an XY plane. We could do
-  // all our manipluations in XZ but most people seem to like XY for 2D.
-  g_planeShape = o3djs.primitives.createPlane(
+  // Create the render graph for a view.
+  g_viewInfo = o3djs.rendergraph.createBasicView(
       g_pack,
-      g_materials[0],
-      1,
-      1,
-      1,
-      1,
-      [[1, 0, 0, 0],
-       [0, 0, 1, 0],
-       [0,-1, 0, 0],
-       [0, 0, 0, 1]]);
+      g_client.root,
+      g_client.renderGraphRoot);
 
-  // Create a ground plane
-  g_groundShape = o3djs.primitives.createPlane(
-      g_pack,
-      g_materials[1],
-      30,
-      30,
-      10,
-      10);
-
-  // Create a cube with its origin at the bottom center.
-  g_cubeShape = o3djs.primitives.createCube(
-      g_pack,
-      g_materials[1],
-      1,
-      [[0.9, 0, 0, 0],
-       [0, 1, 0, 0],
-       [0, 0, 0.9, 0],
-       [0, 0.5, 0, 1]]);
-
-  // Load all the textures.
-  var loader = o3djs.loader.createLoader(initStep3);
-  for (var ii = 0; ii < g_textureUrls.length; ++ii) {
-    loadTexture(loader, g_textureUrls[ii], ii);
-  }
-  loader.finish();
-}
+  // Creates a transform to put our data on.
+  g_teapotRoot = g_pack.createObject('Transform');
 
-/**
- * Loads a texture and saves it in the g_textures array.
- * @param {Object} loader The loader to load with.
- * @param {stinrg} url of texture to load
- * @param {number} index Index to put texture in g_textures
- */
-function loadTexture(loader, url, index) {
-  loader.loadTexture(g_pack, url, function(texture, exception) {
-    if (exception) {
-      alert(exception);
-    } else {
-      g_textures[index] = texture;
-    }
-  });
+  // Connects our root to the client root.
+  g_teapotRoot.parent = g_client.root;
+
+  // Load the scene into the transform graph as a child g_teapotRoot
+  loadScene(g_pack, 'assets/teapot.o3dtgz', g_teapotRoot);
 }
 
 /**
@@ -304,235 +308,23 @@ function getFullscreenModeId() {
 }
 
 function handleResizeEvent(event) {
-  g_fullscreen.transform.visible = !event.fullscreen;
-}
+  // Only show the fullscreen banner if we're in plugin mode.
+  g_orthoRoot.visible = !event.fullscreen;
 
-/**
- * Now that the textures are loaded continue.
- */
-function initStep3() {
-  // Setup the hud images.
-  g_radar = new Image(g_textures[6], true);
-  g_radar.transform.translate(3, 1, -2);
-
-  g_radarNeedle = new Image(g_textures[7], false);
-  g_radarNeedle.scaleTransform.translate(0, 0.5, 0);
-
-  g_gaugeBack = new Image(g_textures[3], true);
-  g_gaugeBack.transform.translate(201, 17, -2);
-
-  // This image is 150x60, and we keep it 10 pixels from the edge.
-  g_fullscreen = new Image(g_textures[8], true);
-  g_fullscreen.transform.translate(10, 600 - 60 - 10, -2);
-  o3djs.event.addEventListener(g_o3dElement, 'resize', handleResizeEvent);
-  g_client.setFullscreenClickRegion(10, 600 - 60 - 10, 150, 60,
-      getFullscreenModeId());
-
-  for (var ii = 0; ii < 3; ++ii) {
-    g_gaugeFrames[ii] = new Image(g_textures[4], true);
-    g_gaugeFrames[ii].transform.translate(220, 39 + ii * 21, -2);
-
-    g_gauges[ii] = new Image(g_textures[7], true);
-    g_gauges[ii].setColor((ii == 0) ? 1 : 0,
-                          (ii == 1) ? 1 : 0,
-                          (ii == 2) ? 1 : 0,
-                          1);
-
-    g_iconBacks[ii] = new Image(g_textures[5], true);
-    g_iconBacks[ii].transform.translate(634, 17 + ii * 140, -2);
-
-    // Make the icons' origin their center so we can easily rotate/scale them.
-    g_icons[ii] = new Image(g_textures[ii], false);
-  }
-
-  resetIcons();
-
-  // make the ground plane.
-  var transform = g_pack.createObject('Transform');
-  transform.addShape(g_groundShape);
-  transform.parent = g_3dRoot;
-  transform.createParam('colorMult', 'ParamFloat4').value =
-      [166 / 255, 124 / 255, 82 / 255, 1];
-
-  // Make a random city with 25 blocks.
-  for (var bz = -2; bz <= 2; ++bz) {
-    for (var bx = -2; bx <= 2; ++bx) {
-      for (var xx = 0; xx < 4; ++xx) {
-        createBuilding(bx * 5 + 1 + xx - 1.5, bz * 5 + 1 - 1.5);
-        createBuilding(bx * 5 + 1 + xx - 1.5, bz * 5 + 4 - 1.5);
-      }
-      for (var zz = 1; zz < 3; ++zz) {
-        createBuilding(bx * 5 + 1 - 1.5, bz * 5 + 1 + zz - 1.5);
-        createBuilding(bx * 5 + 4 - 1.5, bz * 5 + 1 + zz - 1.5);
-      }
-    }
-  }
-
-  // Setup an onrender callback for animation.
-  g_client.setRenderCallback(onrender);
-
-  g_finished = true;  // for selenium testing.
+  setupCamera(g_teapotRoot);
 }
 
-/**
- * Creates a building.
- * @param {number} x X coordinate to create building at
- * @param {number} z Y coordinate to create building at
- */
-function createBuilding(x, z) {
-  var transform = g_pack.createObject('Transform');
-  transform.addShape(g_cubeShape);
-  transform.parent = g_3dRoot;
-  transform.translate(x, 0, z);
-  transform.scale(1, pseudoRandom() * 3 + 1, 1);
-  transform.createParam('colorMult', 'ParamFloat4').value = [
-    pseudoRandom() * 0.6 + 0.4,
-    pseudoRandom() * 0.6 + 0.4,
-    pseudoRandom() * 0.6 + 0.4,
-    1];
-}
 
-/**
- * Resets the orientation of the icons.
- */
-function resetIcons() {
-  for (var ii = 0; ii < g_icons.length; ++ii) {
-    g_icons[ii].transform.identity();
-    g_icons[ii].transform.translate(634 + 6 + 64, 17 + ii * 140 + 5 + 64, -1);
-    g_icons[ii].transform.scale(0.8, 0.8, 0);
-  }
-}
-
-/**
- * Called every frame.
- * @param {!o3d.RenderEvent} renderEvent Rendering Information.
- */
-function onrender(renderEvent) {
-  var elapsedTime = renderEvent.elapsedTime;
-  g_clock += elapsedTime * g_timeMult;
-
-  g_selectedIndex = Math.floor(g_clock / 3) % 3;
-
-  // Fly the camera around the city.
-  var eye = [
-      Math.sin(g_clock * g_cameraSpeed) * g_cameraRadius,
-      10,
-      Math.cos(g_clock * g_cameraSpeed) * g_cameraRadius];
-
-  g_viewInfo.drawContext.view = g_math.matrix4.lookAt(
-      eye,
-      [0, 0, 0],  // target
-      [0, 1, 0]); // up
-
-  // Rotate/Scale the selected icon.
-  var icon = g_icons[g_selectedIndex];
-  icon.transform.identity();
-  icon.transform.translate(
-      634 + 6 + 64, 17 + g_selectedIndex * 140 + 5 + 64, -1);
-  icon.transform.rotateZ(g_clock * -1);
-  var scale = Math.sin(g_clock * 15) * 0.1 + 0.7;
-  icon.transform.scale(scale, scale, 1);
-
-  // Adjust the gauges
-  for (var ii = 0; ii < 3; ++ii) {
-    var gauge = g_gauges[ii];
-    gauge.transform.identity();
-    gauge.transform.translate(220 + 1, 39 + ii * 21 + 1, -1);
-    switch (ii) {
-      case 0:
-        gauge.transform.scale((Math.sin(g_clock) * 0.5 + 0.5) * g_gaugeWidth,
-                              g_gaugeHeight,
-                              1);
-      break;
-      case 1:
-        gauge.transform.scale((Math.cos(g_clock) * 0.5 + 0.5) * g_gaugeWidth,
-                              g_gaugeHeight,
-                              1);
-      break;
-      case 2:
-        gauge.transform.scale(
-            (Math.cos(g_clock * 3.2) * 0.2 + 0.6) * g_gaugeWidth,
-            g_gaugeHeight,
-            1);
-      break;
-    }
-  }
-
-  // Rotate the radar
-  g_radarNeedle.transform.identity();
-  g_radarNeedle.transform.translate(93, 89, 0);
-  g_radarNeedle.transform.rotateZ(g_clock * 3);
-  g_radarNeedle.transform.scale(1, 80, 1);
-}
-
-/**
- * Creates an Image object which is a transform and a child scaleTransform
- * scaled to match the texture
- *
- * @constructor
- * @param {!o3d.Texture} texture The texture
- * @param {boolean} opt_topLeft If true the origin of the image will be its
- *    topleft corner, the default is the center of the image.
- */
-function Image(texture, opt_topLeft) {
-  // create a transform for positioning
-  this.transform = g_pack.createObject('Transform');
-  this.transform.parent = g_hudRoot;
-
-  // create a transform for scaling to the size of the image just so
-  // we don't have to manage that manually in the transform above.
-  this.scaleTransform = g_pack.createObject('Transform');
-  this.scaleTransform.parent = this.transform;
-
-  // setup the sampler for the texture
-  this.sampler = g_pack.createObject('Sampler');
-  this.sampler.addressModeU = g_o3d.Sampler.CLAMP;
-  this.sampler.addressModeV = g_o3d.Sampler.CLAMP;
-  this.paramSampler = this.scaleTransform.createParam('texSampler0',
-                                                      'ParamSampler');
-  this.paramSampler.value = this.sampler;
-
-  // Setup our UV offsets and color multiplier
-  this.paramColorMult = this.scaleTransform.createParam('colorMult',
-                                                        'ParamFloat4');
-
-  this.setColor(1, 1, 1, 1);
-
-  this.sampler.texture = texture;
-  this.scaleTransform.addShape(g_planeShape);
-  if (opt_topLeft) {
-    this.scaleTransform.translate(texture.width / 2, texture.height / 2, 0);
-  }
-  this.scaleTransform.scale(texture.width, -texture.height, 1);
-}
-
-/**
- * Sets the color multiplier for the image.
- * @param {number} r Red component.
- * @param {number} g Green component.
- * @param {number} b Blue component.
- * @param {number} a Alpha component.
- */
-Image.prototype.setColor = function(r, g, b, a) {
-  this.paramColorMult.set(r, g, b, a);
-};
-
-/**
- * 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>
-<h1>HUD 2D Overlay</h1>
-HUD = Heads Up Display.
+<h1>Fullscreen mode.</h1>
+This tutorial shows how to toggle between plugin and full-screen display.
+<p>It's built on top of helloworld.html; diff the two to see what changes were
+necessary.
 <br/>
 <!-- Start of O3D plugin -->
-<div id="o3d" style="width: 800px; height: 600px;"></div>
+<div id="o3d" style="width: 600px; height: 600px;"></div>
 <!-- End of O3D plugin -->
 </body>
 </html>
author	ericu@google.com <ericu@google.com@0039d316-1c4b-4281-b951-d872f2087c98>	2009-06-10 00:38:12 +0000
committer	ericu@google.com <ericu@google.com@0039d316-1c4b-4281-b951-d872f2087c98>	2009-06-10 00:38:12 +0000
commit	88bb6e36a9655361bcc01f96a71ef079d71d3c52 (patch)
tree	fe69ca0ccb5418df14b0dbe71ffe3dd7cea3d4e7 /o3d
parent	889e50af8cba9b18642aad3f035e152725043247 (diff)
download	chromium_src-88bb6e36a9655361bcc01f96a71ef079d71d3c52.zip chromium_src-88bb6e36a9655361bcc01f96a71ef079d71d3c52.tar.gz chromium_src-88bb6e36a9655361bcc01f96a71ef079d71d3c52.tar.bz2