diff options
-rw-r--r-- | o3d/samples/o3d-webgl-samples/hellocube-colors.html | 2 | ||||
-rw-r--r-- | o3d/samples/o3d-webgl-samples/hellocube-textures.html | 2 | ||||
-rw-r--r-- | o3d/samples/o3d-webgl-samples/hellocube.html | 2 | ||||
-rw-r--r-- | o3d/samples/o3d-webgl-samples/helloworld.html | 2 | ||||
-rw-r--r-- | o3d/samples/o3d-webgl-samples/primitives.html | 2 | ||||
-rw-r--r-- | o3d/samples/o3d-webgl-samples/shadow-map.html | 2 | ||||
-rw-r--r-- | o3d/samples/o3d-webgl/pack.js | 9 | ||||
-rw-r--r-- | o3d/samples/o3d-webgl/texture.js | 34 | ||||
-rw-r--r-- | o3d/samples/o3djs/webgl.js | 15 |
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); |