expand loadAndMapTexture; add starfield.html demo; optimize getMatrix methods of Shape and ShapeGroup

Author: peteroupc

README.md

@@ -43,6 +43,7 @@ and applying them to 3D shapes.
 * [tris.html](https://peteroupc.github.io/html3dutil/tris.html) - Demonstrates a particle system.
 * [gradient.html](https://peteroupc.github.io/html3dutil/gradient.html) - Demonstrates generating a custom
 texture -- a linear gradient from one color to another.
+* [starfield.html](https://peteroupc.github.io/html3dutil/starfield.html) - Demo of a star field.
 
 Examples
 ---------

camera.js

@@ -49,6 +49,7 @@ Camera.prototype._updateView=function(){
  * @param {*} dist
  */
 Camera.prototype.setDistance=function(dist){
+ // don't move closer than the near plane
  this.distance=Math.max(this.near,dist);
  this.position=[0,0,this.distance]
  return this._updateView();
@@ -200,6 +201,7 @@ InputTracker.prototype.mousewheel=function(func){
      "click":click,
      "x":clientX,
      "y":clientY});
+   e.preventDefault();
  }
  if("onmousewheel" in this.element){
   this.element.addEventListener("mousewheel",cb);

glmath.js

@@ -342,6 +342,19 @@ mat4copy:function(mat){
 vec4copy:function(vec){
  return vec.slice(0,4);
 },
+/**
+ * Returns whether a 4x4 matrix is the identity matrix.
+ * @param {Array<number>} mat A 4x4 matrix.
+ * @return {boolean}
+ */
+mat4isIdentity:function(mat){
+return (
+    mat[0]==1 && mat[1]==0 && mat[2]==0 && mat[3]==0 &&
+    mat[4]==0 && mat[5]==1 && mat[6]==0 && mat[7]==0 &&
+    mat[8]==0 && mat[9]==0 && mat[10]==1 && mat[11]==0 &&
+    mat[12]==0 && mat[13]==0 && mat[14]==0 && mat[15]==1
+ );
+},
 /**
  * Finds the inverse of a 4x4 matrix.
  * @param {Array<number>} m A 4x4 matrix.

glutil-transform.js

@@ -54,6 +54,7 @@ Transform.prototype.reset=function(){
  this.rotation=GLMath.quatIdentity();
  this.complexMatrix=false;
  this._matrixDirty=false;
+ this._isIdentity=true;
  return this;
 }
 /**
@@ -66,16 +67,26 @@ Transform.prototype.reset=function(){
  */
 Transform.prototype.setMatrix=function(value){
  this._matrixDirty=false;
- this._isIdentity=false;
  this.complexMatrix=true;
  this.matrix=value.slice(0,16);
  this.position=[this.matrix[12],this.matrix[13],this.matrix[14]];
  this.rotation=GLMath.quatFromMat4(this.matrix);
  this.rotation=GLMath.quatNormInPlace(this.rotation);
  this.scale=[this.matrix[0],this.matrix[5],this.matrix[10]];
+ this._isIdentity=(
+    value[0]==1 && value[1]==0 && value[2]==0 && value[3]==0 &&
+    value[4]==0 && value[5]==1 && value[6]==0 && value[7]==0 &&
+    value[8]==0 && value[9]==0 && value[10]==1 && value[11]==0 &&
+    value[12]==0 && value[13]==0 && value[14]==0 && value[15]==1
+ );
  return this;
 }
-
+Transform.prototype.isIdentity=function(){
+ if(this._matrixDirty){
+  this.getMatrix();
+ }
+ return this._isIdentity;
+}
 /**
 * Resets this transform to the untransformed state.
 * @return {glutil.Transform} This object.
@@ -206,7 +217,6 @@ Transform.prototype.setQuaternion=function(quat){
   if(this.complexMatrix)return this;
   this.rotation=quat.slice(0,4);
   GLMath.quatNormInPlace(this.rotation);
-  this._isIdentity=false;
   this._matrixDirty=true;
   return this;
 }
@@ -258,7 +268,6 @@ Transform.prototype.multQuaternion=function(quat){
   if(this.complexMatrix)return this;
   this.rotation=GLMath.quatNormInPlace(
    GLMath.quatMultiply(this.rotation,quat));
-  this._isIdentity=false;
   this._matrixDirty=true;
   return this;
 }
@@ -292,9 +301,6 @@ Transform.prototype.multOrientation=function(angle, v,vy,vz){
  * @return {Array<number>}
  */
 Transform.prototype.getMatrix=function(){
-  if(this._isIdentity){
-   return GLMath.mat4identity();
-  }
   if(this._matrixDirty){
    this._matrixDirty=false;
    // for best results, multiply in this order:
@@ -310,6 +316,15 @@ Transform.prototype.getMatrix=function(){
    }
    // 3. scaling
    GLMath.mat4scaleInPlace(this.matrix,this.scale);
+   var m=this.matrix
+   this._isIdentity=(
+    m[0]==1 && m[1]==0 && m[2]==0 && m[3]==0 &&
+    m[4]==0 && m[5]==1 && m[6]==0 && m[7]==0 &&
+    m[8]==0 && m[9]==0 && m[10]==1 && m[11]==0 &&
+    m[12]==0 && m[13]==0 && m[14]==0 && m[15]==1
+   );
+  } else if(this._isIdentity){
+   return GLMath.mat4identity();
   }
   return this.matrix.slice(0,16);
 }

glutil.js

@@ -883,7 +883,6 @@ Texture.loadTexture=function(name, textureCache){
   });
 }
 
-
 /**
 *  Creates a texture from a byte array specifying the texture data.
 * @param {Uint8Array} array A byte array containing the texture data,
@@ -1689,18 +1688,25 @@ Scene3D.prototype.loadTexture=function(name){
 /**
 * Loads a texture from an image URL and uploads it
 * to a texture buffer object.
-* @param {string} name URL of the image to load.
+* @param {string|glutil.Texture} texture String giving the
+* URL of the image to load, or
+* a Texture object whose data may or may not be loaded.
 * @return {Promise} A promise that is resolved when
 * the image is loaded successfully and uploaded
 * to a texture buffer (the result will be a Texture
 * object), and is rejected when an error occurs.
 */
-Scene3D.prototype.loadAndMapTexture=function(name){
+Scene3D.prototype.loadAndMapTexture=function(texture){
  var context=this.context;
- return Texture.loadTexture(
-   name, this.context, this.textureCache).then(function(texture){
-    texture.loadedTexture=new LoadedTexture(texture,context);
-    return texture;
+ var tex=null;
+ if(texture.constructor==Texture){
+   tex=texture.loadImage();
+ } else {
+   tex=Texture.loadTexture(texture, this.context, this.textureCache)
+ }
+ return tex.then(function(textureInner){
+    textureInner.loadedTexture=new LoadedTexture(textureInner,context);
+    return textureInner;
   });
 }
 /**
@@ -2058,10 +2064,19 @@ ShapeGroup.prototype.getTransform=function(){
  * Not documented yet.
  */
 ShapeGroup.prototype.getMatrix=function(){
-  var mat=this.getTransform().getMatrix();
+  var xform=this.getTransform();
+  var thisIdentity=xform.isIdentity();
   if(this.parent!=null){
    var pmat=this.parent.getMatrix();
-   mat=GLMath.mat4multiply(pmat,mat);
+   if(thisIdentity){
+    mat=GLMath.mat4multiply(pmat,xform.getMatrix());
+   } else if(GLMath.mat4isIdentity(pmat)){
+    mat=xform.getMatrix();
+   } else {
+    mat=pmat;
+   }
+  } else {
+   mat=xform.getMatrix();
   }
   return mat;
 }
@@ -2289,10 +2304,19 @@ Shape.prototype.setQuaternion=function(quat){
  * @return {Array<number>} The current transformation matrix.
  */
 Shape.prototype.getMatrix=function(){
-  var mat=this.getTransform().getMatrix();
+  var xform=this.getTransform();
+  var thisIdentity=xform.isIdentity();
   if(this.parent!=null){
    var pmat=this.parent.getMatrix();
-   mat=GLMath.mat4multiply(pmat,mat);
+   if(thisIdentity){
+    mat=pmat;
+   } else if(GLMath.mat4isIdentity(pmat)){
+    mat=xform.getMatrix();
+   } else {
+    mat=GLMath.mat4multiply(pmat,xform.getMatrix());
+   }
+  } else {
+   mat=xform.getMatrix();
   }
   return mat;
 }