fix bugs with texture mapping; add textures demo

peteroupc · peteroupc · commit f2336274743a · 2015-04-26T05:37:13.000-04:00
diff --git a/461223191.jpg b/461223191.jpg
diff --git a/README.md b/README.md
@@ -38,6 +38,8 @@ a rotating, pulsating box.
 * [surfaces.html](https://peteroupc.github.io/html3dutil/surfaces.html) - Demonstrates
 using evaluators to generate parametric surfaces.
 * [stl.html](https://peteroupc.github.io/html3dutil/stl.html) - Demonstrates loading 3D models.
+* [textured.html](https://peteroupc.github.io/html3dutil/textured.html) - Demonstrates loading textures
+and applying them to 3D shapes.
 
 Examples
 ---------
diff --git a/glutil-binders.js b/glutil-binders.js
@@ -62,6 +62,13 @@ function LoadedTexture(textureImage, context){
   if(GLUtil._isPowerOfTwo(textureImage.image.width) &&
       GLUtil._isPowerOfTwo(textureImage.image.height)){
     context.generateMipmap(context.TEXTURE_2D);
+  } else {
+    context.texParameteri(context.TEXTURE_2D,
+        context.TEXTURE_MIN_FILTER, context.LINEAR);
+    context.texParameteri(context.TEXTURE_2D,
+        context.TEXTURE_WRAP_S, context.CLAMP_TO_EDGE);
+    context.texParameteri(context.TEXTURE_2D,
+        context.TEXTURE_WRAP_T, context.CLAMP_TO_EDGE);
   }
 }
 
@@ -145,7 +152,8 @@ TextureBinder.prototype.bind=function(program){
       // set magnification
       context.texParameteri(context.TEXTURE_2D,
        context.TEXTURE_MAG_FILTER, context.LINEAR);
-      if(texture.powerOfTwo){
+      if(GLUtil._isPowerOfTwo(texture.width) &&
+          GLUtil._isPowerOfTwo(texture.height)){
        // Enable mipmaps if texture's dimensions are powers of two
        context.texParameteri(context.TEXTURE_2D,
          context.TEXTURE_MIN_FILTER, context.LINEAR_MIPMAP_LINEAR);
diff --git a/glutil.js b/glutil.js
@@ -1593,8 +1593,12 @@ Scene3D.prototype.loadTexture=function(name){
 * object), and is rejected when an error occurs.
 */
 Scene3D.prototype.loadAndMapTexture=function(name){
- return Texture.loadAndMapTexture(
-   name, this.context, this.textureCache);
+ var context=this.context;
+ return Texture.loadTexture(
+   name, this.context, this.textureCache).then(function(texture){
+    texture.loadedTexture=new LoadedTexture(texture,context);
+    return texture;
+  });
 }
 /**
 * Loads one or more textures from an image URL and uploads each of them
@@ -1615,10 +1619,7 @@ Scene3D.prototype.loadAndMapTextures=function(textureFiles, resolve, reject){
  var context=this.context;
  for(var i=0;i<textureFiles.length;i++){
   var objf=textureFiles[i];
-  var p=this.loadAndMapTexture(objf).then(function(texture){
-    texture.loadedTexture=new LoadedTexture(texture,context);
-  });
-  promises.push(p);
+  promises.push(this.loadAndMapTexture(objf));
  }
  return GLUtil.getPromiseResults(promises, resolve, reject);
 }
diff --git a/glutil_min.js b/glutil_min.js
diff --git a/textured.html b/textured.html
@@ -0,0 +1,50 @@
+<meta charset=utf-8>
+<head>
+<script type="text/javascript" src="glutil_min.js"></script>
+<script type="text/javascript" src="frame.js"></script>
+</head>
+<body>
+<canvas width="600" height="450" id=canvas></canvas>
+<p>Texture courtesy of pdtextures.blogspot.com</p>
+<script id="demo">
+//<!--
+/*
+Written by Peter O. in 2015.
+
+Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/
+If you like this, you should donate to Peter O.
+at: http://upokecenter.dreamhosters.com/articles/donate-now-2/
+*/
+  // Create the 3D scene; find the HTML canvas and pass it
+  // to Scene3D.
+  var scene=new Scene3D(document.getElementById("canvas"));
+  var fc=new FrameCounterDiv(scene)
+  scene.setPerspective(45,scene.getAspect(),0.1,100);
+  scene.setLookAt([0,0,40]);
+  scene.loadAndMapTextures([
+   "461223191.jpg"
+  ]).then(function(results){
+   var mesh=Meshes.createBox(10,20,20);
+   var shape=scene.makeShape(mesh).setTexture(results.successes[0])
+   scene.addShape(shape);
+   var rotation=[0,0,0];
+   GLUtil.renderLoop(function(){
+    fc.update();
+    rotation[0]+=.5; // Adjust x-rotation by .5 degree
+    rotation[1]+=1.0; // Adjust y-rotation by 1 degree
+    var q=GLMath.quatFromTaitBryan(rotation);
+    shape.setQuaternion(q);
+    scene.render();
+   });
+ })
+//-->
+</script>
+<script>
+window.addEventListener("load",function(){
+ var e=document.createElement("pre")
+ e.innerHTML=document.getElementById("demo").textContent.replace(/</g,"&lt;")
+ document.body.appendChild(e)
+})
+</script>
+</body>
