Update the manipulator rotate1 example to use

a separate transform graph and render graph from
the main scene's.

two more things

1) added a scale to one transform in the scene
to show an issue with manipulators that might 
need to be fixed

2) changed the material used by the manipulators
to be constant. This is on the path to making
the manipulators be line primitives instead
of geometry.

Review URL: http://codereview.chromium.org/434060

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@33040 0039d316-1c4b-4281-b951-d872f2087c98

4 files changed, 151 insertions, 76 deletions

diff --git a/o3d/samples/manipulators/rotate1.html b/o3d/samples/manipulators/rotate1.html
index e7c95d4..49f56f3 100644
--- a/o3d/samples/manipulators/rotate1.html
+++ b/o3d/samples/manipulators/rotate1.html
@@ -58,12 +58,12 @@ var g_o3dElement;
 var g_client;
 var g_o3d;
 var g_math;
-var g_pack;
-var g_viewInfo;
-
+var g_mainPack;
+var g_mainViewInfo;
+var g_mainRoot;
 var g_lightPosition = [5, 5, 7];
 var g_eyePosition = [1, 5, 23];
-
+var g_lastCubeTransform;
 var g_primitives = [];
 var g_manager;
 
@@ -92,15 +92,15 @@ function main(clientElements) {
   // Init global variables.
   initGlobals(clientElements);
 
-  // Set up the view and projection transformations.
-  initContext();
-
   // Add the shapes to the transform heirarchy.
   createShapes();
 
   // Add the manipulators to the transform hierarchy.
   createManipulators();
 
+  // Set up the view and projection transformations.
+  initContext();
+
   // Start picking; it won't do anything until the scene finishes loading.
   o3djs.event.addEventListener(o3dElement, 'mousedown', onMouseDown);
   o3djs.event.addEventListener(o3dElement, 'mousemove', onMouseMove);
@@ -111,16 +111,16 @@ function main(clientElements) {
 
 function onMouseDown(e) {
   g_manager.mousedown(e.x, e.y,
-                      g_viewInfo.drawContext.view,
-                      g_viewInfo.drawContext.projection,
+                      g_mainViewInfo.drawContext.view,
+                      g_mainViewInfo.drawContext.projection,
                       g_client.width,
                       g_client.height);
 }
 
 function onMouseMove(e) {
   g_manager.mousemove(e.x, e.y,
-                      g_viewInfo.drawContext.view,
-                      g_viewInfo.drawContext.projection,
+                      g_mainViewInfo.drawContext.view,
+                      g_mainViewInfo.drawContext.projection,
                       g_client.width,
                       g_client.height);
   g_manager.updateInactiveManipulators();
@@ -141,12 +141,15 @@ function initGlobals(clientElements) {
   g_math = o3djs.math;
 
   // Create a pack to manage the objects created.
-  g_pack = g_client.createPack();
+  g_mainPack = g_client.createPack();
+
+  // Make a root transform for our scene.
+  g_mainRoot = g_mainPack.createObject('Transform');
 
-  // Create the render graph for a view.
-  g_viewInfo = o3djs.rendergraph.createBasicView(
-      g_pack,
-      g_client.root,
+  // Create the render graph for the scene view.
+  g_mainViewInfo = o3djs.rendergraph.createBasicView(
+      g_mainPack,
+      g_mainRoot,
       g_client.renderGraphRoot);
 }
 
@@ -155,18 +158,18 @@ function initGlobals(clientElements) {
  */
 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_mainViewInfo.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.
+      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, 2, 0],    // target
-      [0, 1, 0]);  // up
+  g_mainViewInfo.drawContext.view = g_math.matrix4.lookAt(
+      g_eyePosition,  // eye
+      [0, 2, 0],      // target
+      [0, 1, 0]);     // up
 }
 
 /**
@@ -175,7 +178,8 @@ function initContext() {
  */
 function createShapes() {
   // Create a little tree-like hierarchy of cubes
-  createCubeTree(2, 1.5, [0, 0, 0], g_client.root);
+  createCubeTree(2, 1.5, [0, 0, 0], g_mainRoot);
+  g_lastCubeTransform.scale(3, 1, 1);
 }
 
 /**
@@ -210,13 +214,14 @@ function createCubeTree(depth, edgeLength, translation, parent) {
  */
 function createCube(edgeLength, opt_translation, opt_parent) {
   var cube = o3djs.primitives.createCube(
-      g_pack,
+      g_mainPack,
       // A green phong-shaded material.
-      o3djs.material.createBasicMaterial(g_pack,
-                                         g_viewInfo,
+      o3djs.material.createBasicMaterial(g_mainPack,
+                                         g_mainViewInfo,
                                          [0, 1, 0, 1]),
       edgeLength);
-  var transform = g_pack.createObject('Transform');
+  var transform = g_mainPack.createObject('Transform');
+  g_lastCubeTransform = transform;
   transform.addShape(cube);
   if (opt_translation) {
     transform.translate(opt_translation);
@@ -224,7 +229,7 @@ function createCube(edgeLength, opt_translation, opt_parent) {
   if (opt_parent) {
     transform.parent = opt_parent;
   } else {
-    transform.parent = g_client.root;
+    transform.parent = g_mainRoot;
   }
   g_primitives.push(transform);
   return transform;
@@ -234,11 +239,39 @@ function createCube(edgeLength, opt_translation, opt_parent) {
  * Creates manipulators attached to the objects we've just created.
  */
 function createManipulators() {
-  g_manager = o3djs.manipulators.createManager(g_pack,
-                                               g_viewInfo.performanceDrawList,
-                                               g_client.root,
-                                               null,
-                                               0);
+  // Create a separate pack for the manipulators so they don't get mixed in
+  // with the main scene's objects.
+  var pack = g_client.createPack();
+
+  // Create a root transform for the manipulators so they are 100% separate
+  // from the scene's transforms.
+  var manipulatorRoot = pack.createObject('Transform');
+
+  // Create the render graph for the manipulators view that uses the same
+  // DrawContext as the main view.
+  var manipulatorViewInfo = o3djs.rendergraph.createView(
+      pack,
+      manipulatorRoot,
+      g_client.renderGraphRoot,
+      undefined,  // clearColor
+      undefined,  // priority
+      undefined,  // viewport
+      undefined,  // performanceDrawList
+      undefined,  // zOrderedDrawList
+      g_mainViewInfo.drawContext);
+
+  // Make sure the manipulators gets drawn after the scene.
+  manipulatorViewInfo.root.priority = g_mainViewInfo.root.priority + 1;
+
+  // Turn off clearing the color for the manipulators.
+  manipulatorViewInfo.clearBuffer.clearColorFlag = false;
+
+  g_manager = o3djs.manipulators.createManager(
+      pack,
+      manipulatorViewInfo.performanceDrawList,
+      manipulatorRoot,
+      null,
+      0);
   var jj = 2;
   for (var ii = 0; ii < g_primitives.length; ii++) {
     var manip1 = g_manager.createRotate1();
diff --git a/o3d/samples/o3djs/manipulators.js b/o3d/samples/o3djs/manipulators.js
index 74cc79e..7bea7a5 100644
--- a/o3d/samples/o3djs/manipulators.js
+++ b/o3d/samples/o3djs/manipulators.js
@@ -495,14 +495,14 @@ o3djs.manipulators.Manager = function(pack,
    * @type {!o3d.Material}
    */
   this.defaultMaterial =
-      this.createPhongMaterial_(o3djs.manipulators.DEFAULT_COLOR);
+      this.createMaterial_(o3djs.manipulators.DEFAULT_COLOR);
   /**
    * The material used for manipulators when they are highlighted.
    * (TODO(simonrad): This is not currently used; only defaultMaterial is used. Remove this?)
    * @type {!o3d.Material}
    */
   this.highlightedMaterial =
-      this.createPhongMaterial_(o3djs.manipulators.HIGHLIGHTED_COLOR);
+      this.createMaterial_(o3djs.manipulators.HIGHLIGHTED_COLOR);
 
   /**
    * A map from the manip's parent Transform clientId to the manip.
@@ -532,31 +532,17 @@ o3djs.manipulators.Manager = function(pack,
 }
 
 /**
- * Creates a phong material based on the given single color.
+ * Creates a material based on the given single color.
  * @private
  * @param {!o3djs.math.Vector4} baseColor A vector with 4 entries, the
  *     R,G,B, and A components of a color.
  * @return {!o3d.Material} A phong material whose overall pigment is baseColor.
  */
-o3djs.manipulators.Manager.prototype.createPhongMaterial_ =
+o3djs.manipulators.Manager.prototype.createMaterial_ =
     function(baseColor) {
   // Create a new, empty Material object.
-  var material = this.pack.createObject('Material');
-
-  o3djs.effect.attachStandardShader(
-      this.pack, material, this.lightPosition, 'phong');
-
-  material.drawList = this.drawList;
-
-  // Assign parameters to the phong material.
-  material.getParam('emissive').value = [0, 0, 0, 1];
-  material.getParam('ambient').value =
-    o3djs.math.mulScalarVector(0.1, baseColor);
-  material.getParam('diffuse').value = baseColor;
-  material.getParam('specular').value = [.2, .2, .2, 1];
-  material.getParam('shininess').value = 20;
-
-  return material;
+  return o3djs.material.createConstantMaterialEx(
+     this.pack, this.drawList, baseColor);
 }
 
 /**
@@ -1182,7 +1168,7 @@ o3djs.manipulators.Translate1 = function(manager) {
    * @private
    * @type {!o3d.ParamFloat4}
    */
-  this.colorParam_ = this.getTransform().createParam('diffuse', 'ParamFloat4');
+  this.colorParam_ = this.getTransform().createParam('emissive', 'ParamFloat4');
   this.clearHighlight();
 
   /**
@@ -1293,7 +1279,7 @@ o3djs.manipulators.Translate2 = function(manager) {
    * @private
    * @type {!o3d.ParamFloat4}
    */
-  this.colorParam_ = this.getTransform().createParam('diffuse', 'ParamFloat4');
+  this.colorParam_ = this.getTransform().createParam('emissive', 'ParamFloat4');
   this.clearHighlight();
 
   /**
@@ -1406,7 +1392,7 @@ o3djs.manipulators.Rotate1 = function(manager) {
    * @private
    * @type {!o3d.ParamFloat4}
    */
-  this.colorParam_ = this.getTransform().createParam('diffuse', 'ParamFloat4');
+  this.colorParam_ = this.getTransform().createParam('emissive', 'ParamFloat4');
   this.clearHighlight();
 
   /**
diff --git a/o3d/samples/o3djs/material.js b/o3d/samples/o3djs/material.js
index a2aa67c..7ba3c8e 100644
--- a/o3d/samples/o3djs/material.js
+++ b/o3d/samples/o3djs/material.js
@@ -200,6 +200,30 @@ o3djs.material.prepareMaterials = function(pack,
 };
 
 /**
+ * Builds a standard effect for a given material.
+ * If the material already has an effect, none is created.
+ * @param {!o3d.Pack} pack Pack to manage created objects.
+ * @param {!o3d.Material} material The material for which to create an
+ *     effect.
+ * @param {string} effectType Type of effect to create ('phong', 'lambert',
+ *     'constant').
+ *
+ * @see o3djs.effect.attachStandardShader
+ */
+o3djs.material.attachStandardEffectEx = function(pack,
+                                                 material,
+                                                 effectType) {
+  if (!material.effect) {
+    if (!o3djs.effect.attachStandardShader(pack,
+                                           material,
+                                           [0, 0, 0],
+                                           effectType)) {
+      throw 'Could not attach a standard effect';
+    }
+  }
+};
+
+/**
  * Builds a standard effect for a given material.  The position of the
  * default light is set to the view position.  If the material already has
  * an effect, none is created.
@@ -223,14 +247,13 @@ o3djs.material.attachStandardEffect = function(pack,
             o3djs.math.inverse(viewInfo.drawContext.view));
     if (!o3djs.effect.attachStandardShader(pack,
                                            material,
-                                           lightPos,
+                                           lightPos,  // TODO(gman): remove this
                                            effectType)) {
       throw 'Could not attach a standard effect';
     }
   }
 };
 
-
 /**
  * Prepares all the materials in the given pack by setting their
  * drawList.
@@ -341,21 +364,16 @@ o3djs.material.createBasicMaterial = function(pack,
  * useful for debugging shapes and 2d UI elements.
  *
  * @param {!o3d.Pack} pack Pack to manage created objects.
- * @param {!o3djs.rendergraph.ViewInfo} viewInfo as returned from
- *     o3djs.rendergraph.createBasicView.
+ * @param {!o3d.DrawList} drawList The DrawList for the material.
  * @param {(!o3djs.math.Vector4|!o3d.Texture)} colorOrTexture Either a color in
  *     the format [r, g, b, a] or an O3D texture.
- * @param {boolean} opt_transparent Whether or not the material is transparent.
- *     Defaults to false.
  * @return {!o3d.Material} The created material.
  */
-o3djs.material.createConstantMaterial = function(pack,
-                                                 viewInfo,
-                                                 colorOrTexture,
-                                                 opt_transparent) {
+o3djs.material.createConstantMaterialEx = function(pack,
+                                                   drawList,
+                                                   colorOrTexture) {
   var material = pack.createObject('Material');
-  material.drawList = opt_transparent ? viewInfo.zOrderedDrawList :
-                                        viewInfo.performanceDrawList;
+  material.drawList = drawList;
 
   // If it has a length assume it's a color, otherwise assume it's a texture.
   if (colorOrTexture.length) {
@@ -367,12 +385,36 @@ o3djs.material.createConstantMaterial = function(pack,
     sampler.texture = colorOrTexture;
   }
 
-  o3djs.material.attachStandardEffect(pack, material, viewInfo, 'constant');
+  o3djs.material.attachStandardEffectEx(pack, material, 'constant');
 
   return material;
 };
 
 /**
+ * This function creates a constant material. No lighting. It is especially
+ * useful for debugging shapes and 2d UI elements.
+ *
+ * @param {!o3d.Pack} pack Pack to manage created objects.
+ * @param {!o3djs.rendergraph.ViewInfo} viewInfo as returned from
+ *     o3djs.rendergraph.createBasicView.
+ * @param {(!o3djs.math.Vector4|!o3d.Texture)} colorOrTexture Either a color in
+ *     the format [r, g, b, a] or an O3D texture.
+ * @param {boolean} opt_transparent Whether or not the material is transparent.
+ *     Defaults to false.
+ * @return {!o3d.Material} The created material.
+ */
+o3djs.material.createConstantMaterial = function(pack,
+                                                 viewInfo,
+                                                 colorOrTexture,
+                                                 opt_transparent) {
+  return o3djs.material.createConstantMaterialEx(
+      pack,
+      opt_transparent ? viewInfo.zOrderedDrawList :
+                        viewInfo.performanceDrawList,
+      colorOrTexture)
+};
+
+/**
  * This function creates 2 color procedureal texture material.
  *
  * @see o3djs.material.createBasicMaterial
diff --git a/o3d/samples/o3djs/rendergraph.js b/o3d/samples/o3djs/rendergraph.js
index 5587623..2457004 100644
--- a/o3d/samples/o3djs/rendergraph.js
+++ b/o3d/samples/o3djs/rendergraph.js
@@ -61,6 +61,8 @@ o3djs.rendergraph = o3djs.rendergraph || {};
  *     use for performanceDrawPass.
  * @param {!o3d.DrawList} opt_zOrderedDrawList Optional DrawList to
  *     use for zOrderedDrawPass.
+ * @param {!o3d.DrawContext} opt_drawContext Optional DrawContext to
+ *     use. If not passed in one is created.
  * @return {!o3djs.rendergraph.ViewInfo} A ViewInfo object with info about
  *         everything created.
  */
@@ -71,7 +73,8 @@ o3djs.rendergraph.createView = function(pack,
                                         opt_priority,
                                         opt_viewport,
                                         opt_performanceDrawList,
-                                        opt_zOrderedDrawList) {
+                                        opt_zOrderedDrawList,
+                                        opt_drawContext) {
   return new o3djs.rendergraph.ViewInfo(pack,
                                         treeRoot,
                                         opt_parent,
@@ -79,7 +82,8 @@ o3djs.rendergraph.createView = function(pack,
                                         opt_priority,
                                         opt_viewport,
                                         opt_performanceDrawList,
-                                        opt_zOrderedDrawList);
+                                        opt_zOrderedDrawList,
+                                        opt_drawContext);
 };
 
 /**
@@ -164,6 +168,8 @@ o3djs.rendergraph.createExtraView = function(viewInfo,
  *     performanceDrawPass.
  * @param {!o3d.DrawList} opt_zOrderedDrawList DrawList to use for
  *     zOrderedDrawPass.
+ * @param {!o3d.DrawContext} opt_drawContext Optional DrawContext to
+ *     use. If not passed in one is created.
  */
 o3djs.rendergraph.ViewInfo = function(pack,
                                       treeRoot,
@@ -172,7 +178,8 @@ o3djs.rendergraph.ViewInfo = function(pack,
                                       opt_priority,
                                       opt_viewport,
                                       opt_performanceDrawList,
-                                      opt_zOrderedDrawList) {
+                                      opt_zOrderedDrawList,
+                                      opt_drawContext) {
   var that = this;
   var clearColor = opt_clearColor || [0.5, 0.5, 0.5, 1.0];
   var viewPriority = opt_priority || 0;
@@ -240,7 +247,7 @@ o3djs.rendergraph.ViewInfo = function(pack,
   this.clearBuffer = clearBuffer;
 
   // Create DrawContext.
-  var drawContext = pack.createObject('DrawContext');
+  var drawContext = opt_drawContext || pack.createObject('DrawContext');
 
   /**
    * The DrawContext used by this ViewInfo.
@@ -371,6 +378,13 @@ o3djs.rendergraph.ViewInfo = function(pack,
    * @type {!o3d.DrawPass}
    */
   this.zOrderedDrawPass = zOrderedDrawPassInfo.drawPass;
+
+  /**
+   * A flag whether or not we created the DrawContext for this DrawPassInfo.
+   * @private
+   * @type {boolean}
+   */
+  this.ownDrawContext_ = opt_drawContext ? false : true;
 };
 
 /**
@@ -395,7 +409,7 @@ o3djs.rendergraph.ViewInfo.prototype.destroy = function(
   // Remove everything we created from the pack.
   this.pack.removeObject(this.viewport);
   this.pack.removeObject(this.clearBuffer);
-  if (opt_destroyDrawContext) {
+  if (opt_destroyDrawContext && this.ownDrawContext_) {
     this.pack.removeObject(this.drawContext);
   }
   this.pack.removeObject(this.treeTraversal);