make objmtl.js compatible with more MTL files; fix bug there; edit demos some more

peteroupc · peteroupc · commit 383ed9df0661 · 2015-05-09T19:54:49.000-04:00
diff --git a/README.md b/README.md
@@ -69,8 +69,6 @@ Examples
   var shape=scene.makeShape(mesh).setColor("red");
   // Add the shape to the scene
   scene.addShape(shape);
-  // Set the starting rotation
-  var rotation=[0,0,0];
   // Create a timer
   var timer={};
   // Set up the render loop
@@ -80,12 +78,13 @@ Examples
    scene.setPerspective(45,scene.getClientAspect(),0.1,100);
    // Move the camera back 40 units.
    scene.setLookAt([0,0,40]);
-   // Adjust x-rotation
-   rotation[0]=360*GLUtil.getTimePosition(timer,time,6000);
-   // Adjust y-rotation
-   rotation[1]=360*GLUtil.getTimePosition(timer,time,12000);
    // Update the shape's rotation
-   shape.setQuaternion(GLMath.quatFromTaitBryan(rotation));
+   var q=GLMath.quatFromTaitBryan(
+     360*GLUtil.getTimePosition(timer,time,6000),
+     360*GLUtil.getTimePosition(timer,time,12000),
+     0
+   );
+   shape.setQuaternion(q);
    // Render the scene
    scene.render();
   });
diff --git a/demos/compositeMesh.html b/demos/compositeMesh.html
@@ -64,11 +64,6 @@
   // to Scene3D.
   var scene=new Scene3D(document.getElementById("canvas"));
   scene.setDirectionalLight(0,[5,5,10])
-  // Set the perspective view.  Camera has a 45-degree field of view
-  // and will see objects from 0.1 to 100 units away.
-  scene.setPerspective(45,scene.getClientAspect(),0.1,100);
-  // Move the camera back 40 units.
-  scene.setLookAt([0,0,40]);
   // Create an arrow mesh 10 units in size
   var mesh1=multiColoredArrow(10,2,1,2);
   var mesh2=arrow(10,2,1,2);
@@ -79,14 +74,23 @@
   scene.addShape(shape1);
   // Set the starting rotation
   var rotation=[0,0,0];
+  // Create a timer
   var timer={};
   // Set up the render loop
   GLUtil.renderLoop(function(time){
-   rotation[0]=360*GLUtil.getTimePosition(timer,time,6000);
-   rotation[1]=360*GLUtil.getTimePosition(timer,time,12000);
+   // Set the perspective view.  Camera has a 45-degree field of view
+   // and will see objects from 0.1 to 100 units away.
+   scene.setPerspective(45,scene.getClientAspect(),0.1,100);
+   // Move the camera back 40 units.
+   scene.setLookAt([0,0,40]);
    // Update the shape's rotation
-   var q=GLMath.quatFromTaitBryan(rotation);
-   scene.shapes[0].setQuaternion(q);
+   var q=GLMath.quatFromTaitBryan(
+     360*GLUtil.getTimePosition(timer,time,6000),
+     360*GLUtil.getTimePosition(timer,time,12000),
+     0
+   );
+   shape1.setQuaternion(q);
+   shape2.setQuaternion(q);
    // Render the scene
    scene.render();
   });
diff --git a/demos/simple.html b/demos/simple.html
@@ -28,8 +28,6 @@
   var shape=scene.makeShape(mesh).setColor("red");
   // Add the shape to the scene
   scene.addShape(shape);
-  // Set the starting rotation
-  var rotation=[0,0,0];
   // Create a timer
   var timer={};
   // Set up the render loop
@@ -39,12 +37,12 @@
    scene.setPerspective(45,scene.getClientAspect(),0.1,100);
    // Move the camera back 40 units.
    scene.setLookAt([0,0,40]);
-   // Adjust x-rotation
-   rotation[0]=360*GLUtil.getTimePosition(timer,time,6000);
-   // Adjust y-rotation
-   rotation[1]=360*GLUtil.getTimePosition(timer,time,12000);
    // Update the shape's rotation
-   var q=GLMath.quatFromTaitBryan(rotation);
+   var q=GLMath.quatFromTaitBryan(
+     360*GLUtil.getTimePosition(timer,time,6000),
+     360*GLUtil.getTimePosition(timer,time,12000),
+     0
+   );
    shape.setQuaternion(q);
    // Render the scene
    scene.render();
diff --git a/demos/surfaces.html b/demos/surfaces.html
@@ -10,13 +10,14 @@
 <script type="text/javascript" src="demoutil.js"></script>
 </head>
 <body>
+<p style="position:absolute;left:0;top:1em">
 <a href="javascript:link1()">Superellipsoid</a>,
 <a href="javascript:link2()">Klein bottle</a>,
 <a href="javascript:link3()">M&ouml;bius strip</a>,
 <a href="javascript:link4()">Surface of revolution for f(x) = sin x</a>,
 <a href="javascript:link5()">Surface of revolution for f(x) = x<sup>2</sup></a>,
 <a href="javascript:link6()">Supertoroid</a>
-<br>
+</p>
 <canvas id=canvas></canvas>
 <script id="demo">
 //<!--
diff --git a/demos/textured.html b/demos/textured.html
@@ -27,22 +27,30 @@
   var scene=new Scene3D(document.getElementById("canvas"))
     .cullFace(Scene3D.BACK);
   var fc=new FrameCounterDiv(scene)
-  scene.setPerspective(45,scene.getClientAspect(),0.1,100);
-  scene.setLookAt([0,0,40]);
-  var timer={}
   scene.loadAndMapTexture("461223191.jpg").then(function(tex){
    var mesh=Meshes.createBox(10,20,20);
    var shape=scene.makeShape(mesh).setTexture(tex)
    scene.addShape(shape);
-   var rotation=[0,0,0];
-   GLUtil.renderLoop(function(time){
-    fc.update();
-    rotation[0]=360*GLUtil.getTimePosition(timer,time,12000);
-    rotation[1]=360*GLUtil.getTimePosition(timer,time,6000);
-    var q=GLMath.quatFromTaitBryan(rotation);
-    shape.setQuaternion(q);
-    scene.render();
-   });
+   // Create a timer
+   var timer={};
+  // Set up the render loop
+  GLUtil.renderLoop(function(time){
+   // Set the perspective view.  Camera has a 45-degree field of view
+   // and will see objects from 0.1 to 100 units away.
+   scene.setPerspective(45,scene.getClientAspect(),0.1,100);
+   // Move the camera back 40 units.
+   scene.setLookAt([0,0,40]);
+   // Update the shape's rotation
+   var q=GLMath.quatFromTaitBryan(
+     360*GLUtil.getTimePosition(timer,time,6000),
+     360*GLUtil.getTimePosition(timer,time,12000),
+     0
+   );
+   fc.update();
+   shape.setQuaternion(q);
+   // Render the scene
+   scene.render();
+  });
  })
 //-->
 </script>
diff --git a/demos/tris.html b/demos/tris.html
@@ -109,8 +109,9 @@
 
   // Create the 3D scene; find the HTML canvas and pass it
   // to Scene3D.
-  var scene=new Scene3D(document.getElementById("canvas"));
-  scene.disableLighting()
+  var scene=new Scene3D(document.getElementById("canvas"))
+   .setClearColor("white")
+   .disableLighting()
   var tris=new TriangleParticles(scene,200);
   // Set up the render loop
   GLUtil.renderLoop(function(time){
diff --git a/glutil-eval.js b/glutil-eval.js
@@ -178,7 +178,7 @@ BezierCurve.prototype.evaluate=function(u){
 /**
  * A parametric evaluator for B&eacute;zier surfaces.<p>
  * A B&eacute;zier surface is defined by a series of control points, where
- * the first and last control points on each corner define the endpoints of the surface, and
+ * the control points on each corner define the endpoints of the surface, and
  * the remaining control points define the surface's shape, though they don't
  * necessarily cross the surface.
  * @class
@@ -188,11 +188,11 @@ BezierCurve.prototype.evaluate=function(u){
  * control point is an array with the same length as the other control points.
  * It is assumed that:<ul>
  * <li>The length of this parameter minus 1 represents the degree of the B&eacute;zier
- * curve along the V axis.  For example, a degree-3 (cubic) curve along the V axis
+ * surface along the V axis.  For example, a degree-3 (cubic) surface along the V axis
  * contains 4 control points, one in each control point array.  A degree of 1 on
  * both the U and V axes results in a flat surface.
  * <li>The length of the first control point array minus 1 represents the degree of the B&eacute;zier
- * curve along the U axis.
+ * surface along the U axis.
  * <li>The first control point's length represents the size of all the control
  * points.
  * </ul>
diff --git a/objmtl.js b/objmtl.js
@@ -173,7 +173,11 @@ MtlData._getMaterial=function(mtl){
  }
  if(mtl.hasOwnProperty("Ke")){
   var ke=mtl["Ke"];
-  emission=[ke,ke,ke];
+  if(ke.length==1){
+   emission=[ke,ke,ke];
+  } else {
+   emission=xyzToRgb(ke);
+  }
  }
  if(mtl.hasOwnProperty("Ks")){
   specular=xyzToRgb(mtl["Ks"]);
@@ -212,12 +216,10 @@ ObjData.loadMtlFromUrl=function(url){
 Loads a WaveFront OBJ file (along with its associated MTL, or
 material file, if available) asynchronously.
 @param {string} url The URL to load.
-@return {Promise} A promise that:
-- Resolves when:
-The OBJ file is loaded successfully, whether or not its associated
-MTL is also loaded successfully.  The result is an ObjData object.
-- Is rejected when:
-An error occurs when loading the OBJ file.
+@return {Promise} A promise that resolves when
+the OBJ file is loaded successfully, whether or not its associated
+MTL is also loaded successfully (the result is an ObjData object),
+and is rejected when an error occurs when loading the OBJ file.
 */
 ObjData.loadObjFromUrl=function(url){
  return GLUtil.loadFileFromUrl(url).then(
@@ -251,13 +253,15 @@ ObjData.loadObjFromUrl=function(url){
 MtlData._loadMtl=function(str){
  var number="(-?(?:\\d+\\.?\\d*|\\d*\\.\\d+)(?:[Ee][\\+\\-]?\\d+)?)"
  var nonnegInteger="(\\d+)"
- var oneNumLine=new RegExp("^(Ns|d|Tr|Ni|Ke)\\s+"+number+"\\s*$")
- var oneIntLine=new RegExp("^(illum)\\s+"+nonnegInteger+"\\s*$")
- var threeNumLine=new RegExp("^(Tf)\\s+"+number+"\\s+"+number
+ var oneNumLine=new RegExp("^[ \\t]*(Ns|d|Tr|Ni)\\s+"+number+"\\s*$")
+ var oneIntLine=new RegExp("^[ \\t]*(illum)\\s+"+nonnegInteger+"\\s*$")
+ var threeNumLine=new RegExp("^[ \\t]*(Tf)\\s+"+number+"\\s+"+number
    +"\\s+"+number+"\\s*$")
- var threeOrFourNumLine=new RegExp("^(Kd|Ka|Ks)\\s+"+number+"\\s+"+number
+ var oneOrThreeNumLine=new RegExp("^[ \\t]*(Ke)\\s+"+number+"(?:\\s+"+number
+   +"\\s+"+number+")?\\s*$")
+ var threeOrFourNumLine=new RegExp("^[ \\t]*(Kd|Ka|Ks)\\s+"+number+"\\s+"+number
    +"\\s+"+number+"(?:\\s+"+number+")?\\s*$")
- var mapLine=new RegExp("^(map_Kd|map_bump|map_Ka|map_Ks)\\s+(.*?)\\s*$")
+ var mapLine=new RegExp("^[ \\t]*(map_Kd|map_bump|map_Ka|map_Ks)\\s+(.*?)\\s*$")
  var newmtlLine=new RegExp("^newmtl\\s+([^\\s]*)$")
  var faceStart=new RegExp("^f\\s+")
  var lines=str.split(/\r?\n/)
@@ -305,6 +309,15 @@ MtlData._loadMtl=function(str){
     currentMat[e[1]]=[parseFloat(e[2]),parseFloat(e[3]),parseFloat(e[4])];
     continue;
   }
+  e=oneOrThreeNumLine.exec(line)
+  if(e){
+    if(e[3]){
+      currentMat[e[1]]=[parseFloat(e[2]),parseFloat(e[3]),parseFloat(e[4])];
+    } else {
+      currentMat[e[1]]=[parseFloat(e[2]),parseFloat(e[2]),parseFloat(e[2])];
+    }
+    continue;
+  }
   e=oneNumLine.exec(line)
   if(e){
     currentMat[e[1]]=parseFloat(e[2]);
@@ -526,7 +539,7 @@ ObjData._loadObj=function(str){
         vertexKind=-1;
         lastPrimitiveSeen=-1;
         haveNormals=false;
-        usemtl=nul;
+        usemtl=null;
         mesh=new Mesh();
       }
       meshName=e[2];
diff --git a/tutorials/camera.md b/tutorials/camera.md
@@ -1,6 +1,6 @@
 ## Introduction
 
-This article describes projection and view transforms commonly used in 3D graphics,
+This tip describes projection and view transforms commonly used in 3D graphics,
 especially when using my [HTML 3D Library](http://peteroupc.github.io/html3dutil).
 
 **Download the latest version of the library at the [HTML 3D Library's Releases page](https://github.com/peteroupc/html3dutil/releases).**
@@ -25,7 +25,7 @@ the HTML 3D library.
 
 * A _world matrix_ transforms an object's own coordinates to _world space_,
 the coordinate system shared by every object in the scene.  The world matrix
-is not discussed in this article.
+is not discussed in this page.
 * A _view matrix_ transforms coordinates in world space to _camera space_ or _eye space_.
 * A _projection matrix_ transforms coordinates in camera space to _clip space_.
 * Additionally, the graphics pipeline (outside the HTML 3D library) converts the
@@ -178,3 +178,10 @@ This is optional.  The default is [0, 1, 0].
 This method allows you to set the view matrix to an arbitrary [4x4 matrix]{@tutorial glmath}.
 
 * `matrix` - The 4x4 matrix to use.
+
+## Other Pages
+
+The following pages of mine on CodeProject also discuss this library:
+
+* [_Public-Domain HTML 3D Library_](http://www.codeproject.com/Tips/896839/Public-Domain-HTML-ThreeD-Library)
+* [_Creating shapes using the Public Domain HTML 3D Library_](http://www.codeproject.com/Tips/987914/Creating-shapes-using-the-Public-Domain-HTML-D-Lib)
