Fixed samples to work with resizing code introduced yesterday. Now the

setup of the containing div is identical to that in the plugin version
of O3D. Fixed createClients to only call the initialization callback
once the client's initial size has been set. Fixed bug in texture wrap
mode setup which was breaking the bump map in helloworld.html.

BUG=none
TEST=ran all o3d-webgl samples
TBR=petersont

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

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

9 files changed, 57 insertions, 13 deletions

diff --git a/o3d/samples/o3d-webgl-samples/hellocube-colors.html b/o3d/samples/o3d-webgl-samples/hellocube-colors.html
index 2af5699..db707fd 100644
--- a/o3d/samples/o3d-webgl-samples/hellocube-colors.html
+++ b/o3d/samples/o3d-webgl-samples/hellocube-colors.html
@@ -286,7 +286,7 @@ This example shows how to use parameters to the color output of a shader.
 
 
 <!-- Start of O3D plugin -->
-<div id="o3d" width="600px" height="600px"></div>
+<div id="o3d" style="width: 600px; height: 600px;"></div>
 <!-- End of O3D plugin -->
 
 <form name="default_form" action="#" method="get">
diff --git a/o3d/samples/o3d-webgl-samples/hellocube-textures.html b/o3d/samples/o3d-webgl-samples/hellocube-textures.html
index 0c20cf4..c7b7201 100644
--- a/o3d/samples/o3d-webgl-samples/hellocube-textures.html
+++ b/o3d/samples/o3d-webgl-samples/hellocube-textures.html
@@ -382,7 +382,7 @@ This example shows how texture map a cube using an image fetched from a URL.
 
 
 <!-- Start of O3D plugin -->
-<div id="o3d" width="600px" height="600px"></div>
+<div id="o3d" style="width: 600px; height: 600px;"></div>
 <!-- End of O3D plugin -->
 <br />
 Image URL: <input type="text" id="url" size="100">
diff --git a/o3d/samples/o3d-webgl-samples/hellocube.html b/o3d/samples/o3d-webgl-samples/hellocube.html
index f0db297f..148183b 100644
--- a/o3d/samples/o3d-webgl-samples/hellocube.html
+++ b/o3d/samples/o3d-webgl-samples/hellocube.html
@@ -262,7 +262,7 @@ This example shows how to display a spinning red cube in O3D.
 <br/>
 
 <!-- Start of O3D plugin -->
-<div id="o3d" width="600px" height="600px"></div>
+<div id="o3d" style="width: 600px; height: 600px;"></div>
 <!-- End of O3D plugin -->
 
 <!-- Don't render the textarea -->
diff --git a/o3d/samples/o3d-webgl-samples/helloworld.html b/o3d/samples/o3d-webgl-samples/helloworld.html
index f44a08e..c2ce678 100644
--- a/o3d/samples/o3d-webgl-samples/helloworld.html
+++ b/o3d/samples/o3d-webgl-samples/helloworld.html
@@ -171,7 +171,7 @@ function initStep2(clientElements) {
 This tutorial shows how we load and display a scene in O3D.
 <br/>
 <!-- Start of O3D plugin -->
-<div id="o3d" width="600" height="600"></div>
+<div id="o3d" style="width: 600px; height: 600px;"></div>
 <!-- End of O3D plugin -->
 </body>
 </html>
diff --git a/o3d/samples/o3d-webgl-samples/primitives.html b/o3d/samples/o3d-webgl-samples/primitives.html
index 93fd1cb..1b3e1c0 100644
--- a/o3d/samples/o3d-webgl-samples/primitives.html
+++ b/o3d/samples/o3d-webgl-samples/primitives.html
@@ -241,7 +241,7 @@ 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>
+<div id="o3d" style="width: 600px; height: 600px;"></div>
 <!-- End of O3D plugin -->
 </body>
 </html>
diff --git a/o3d/samples/o3d-webgl-samples/shadow-map.html b/o3d/samples/o3d-webgl-samples/shadow-map.html
index 6a2cea3..bf1969a 100644
--- a/o3d/samples/o3d-webgl-samples/shadow-map.html
+++ b/o3d/samples/o3d-webgl-samples/shadow-map.html
@@ -624,7 +624,7 @@ function moveLight(delta) {
 This sample implements a basic shadow map.
 <br/>
 <!-- Start of O3D plugin -->
-<div id="o3d" width="800px" height="600px"></div>
+<div id="o3d" style="width: 800px; height: 600px;"></div>
 <!-- End of O3D plugin -->
 Use A, S, D, W, I and O to move the light.
 Press spacebar to see the shadow map.
diff --git a/o3d/samples/o3d-webgl/pack.js b/o3d/samples/o3d-webgl/pack.js
index 4a72feb..58abf20 100644
--- a/o3d/samples/o3d-webgl/pack.js
+++ b/o3d/samples/o3d-webgl/pack.js
@@ -211,17 +211,14 @@ o3d.Pack.prototype.createTexture2D =
     this.gl.bindTexture(this.gl.TEXTURE_2D, texture.texture_);
     this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, width, height,
         0, this.gl.RGBA, this.gl.UNSIGNED_BYTE, null);
+    texture.setupRepeatModes_(width, height);
   }
 
   this.gl.bindTexture(this.gl.TEXTURE_2D, texture.texture_);
   this.gl.texParameteri(this.gl.TEXTURE_2D,
-    this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
-  this.gl.texParameteri(this.gl.TEXTURE_2D,
-    this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
+      this.gl.TEXTURE_MAG_FILTER, this.gl.LINEAR);
   this.gl.texParameteri(this.gl.TEXTURE_2D,
-    this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
-  this.gl.texParameteri(this.gl.TEXTURE_2D,
-    this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+      this.gl.TEXTURE_MIN_FILTER, this.gl.LINEAR);
 
   return texture;
 };
diff --git a/o3d/samples/o3d-webgl/texture.js b/o3d/samples/o3d-webgl/texture.js
index 9f5db11..68d6a4f 100644
--- a/o3d/samples/o3d-webgl/texture.js
+++ b/o3d/samples/o3d-webgl/texture.js
@@ -281,6 +281,7 @@ o3d.Texture2D.prototype.setFromBitmap =
                      0,  // Level.
                      bitmap.canvas_,
                      bitmap.defer_flip_vertically_to_texture_);
+  this.setupRepeatModes_(bitmap.canvas_.width, bitmap.canvas_.height);
   if (bitmap.defer_mipmaps_to_texture_) {
     this.generateMips();
   }
@@ -288,6 +289,39 @@ o3d.Texture2D.prototype.setFromBitmap =
 
 
 /**
+ * Sets up the repeat modes for the given width and height.
+ * Assumes the texture is already bound to the TEXTURE_2D binding point.
+ * @private
+ */
+o3d.Texture2D.prototype.setupRepeatModes_ = function(width, height) {
+  // OpenGL ES 2.0 and consequently WebGL don't support anything but
+  // CLAMP_TO_EDGE for NPOT textures.
+  if (o3d.Texture2D.isPowerOfTwo_(width) &&
+      o3d.Texture2D.isPowerOfTwo_(height)) {
+    this.gl.texParameteri(this.gl.TEXTURE_2D,
+        this.gl.TEXTURE_WRAP_S, this.gl.REPEAT);
+    this.gl.texParameteri(this.gl.TEXTURE_2D,
+        this.gl.TEXTURE_WRAP_T, this.gl.REPEAT);
+  } else {
+    this.gl.texParameteri(this.gl.TEXTURE_2D,
+        this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
+    this.gl.texParameteri(this.gl.TEXTURE_2D,
+        this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
+  }
+};
+
+/**
+ * Indicates whether the given number is a power of two.
+ * @private
+ */
+o3d.Texture2D.isPowerOfTwo_ = function(value) {
+  if (value == undefined)
+    return false;
+  return (value & (value - 1)) == 0;
+};
+
+
+/**
  * Copy pixels from source bitmap to certain mip level.
  * Scales if the width and height of source and dest do not match.
  * TODO(petersont): Takes optional arguments.
diff --git a/o3d/samples/o3djs/webgl.js b/o3d/samples/o3djs/webgl.js
index 9687af6..d9c53f3 100644
--- a/o3d/samples/o3djs/webgl.js
+++ b/o3d/samples/o3djs/webgl.js
@@ -80,7 +80,19 @@ o3djs.webgl.makeClients = function(callback,
     clientElements.push(objElem);
   }
 
-  callback(clientElements);
+  // Wait for the client elements to be fully initialized. This
+  // involves waiting for the page to fully layout and the initial
+  // resize event to be processed.
+  var clearId = window.setInterval(function() {
+    for (var cc = 0; cc < clientElements.length; ++cc) {
+      var element = clientElements[cc];
+      if (!element.sizeInitialized_) {
+        return;
+      }
+    }
+    window.clearInterval(clearId);
+    callback(clientElements);
+  });
 };
 
 
@@ -154,6 +166,7 @@ o3djs.webgl.createClient = function(element, opt_features, opt_debug) {
     var height = Math.max(1, canvas.clientHeight);
     canvas.width = width;
     canvas.height = height;
+    canvas.sizeInitialized_ = true;
   };
   window.addEventListener('resize', resizeHandler, false);
   setTimeout(resizeHandler, 0);