summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--o3d/samples/o3d-webgl-samples/hellocube-colors.html2
-rw-r--r--o3d/samples/o3d-webgl-samples/hellocube-textures.html2
-rw-r--r--o3d/samples/o3d-webgl-samples/hellocube.html2
-rw-r--r--o3d/samples/o3d-webgl-samples/helloworld.html2
-rw-r--r--o3d/samples/o3d-webgl-samples/primitives.html2
-rw-r--r--o3d/samples/o3d-webgl-samples/shadow-map.html2
-rw-r--r--o3d/samples/o3d-webgl/pack.js9
-rw-r--r--o3d/samples/o3d-webgl/texture.js34
-rw-r--r--o3d/samples/o3djs/webgl.js15
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);