expand gradient.html demo

Author: peteroupc

camera.js

@@ -44,26 +44,30 @@ Camera.prototype._updateView=function(){
  this.scene.setViewMatrix(GLMath.mat4invert(look));
  return this;
 }
+/**
+ * Not documented yet.
+ * @param {*} dist
+ */
 Camera.prototype.setDistance=function(dist){
  this.distance=Math.max(this.near,dist);
  this.position=[0,0,this.distance]
  return this._updateView();
 }
-
+/** @private */
 Camera.prototype._orbit=function(deltaMouseX,deltaMouseY,angleMultiplier){
   var x=deltaMouseX
   var y=deltaMouseY
   this.angleX+=x*angleMultiplier;
   this.angleY+=y*angleMultiplier;
-  this.angleX=((this.angleX>=0 && this.angleX<360) ? this.angleX : 
+  this.angleX=((this.angleX>=0 && this.angleX<360) ? this.angleX :
      ((this.angleX%360)+(this.angleX<0 ? 360 : 0)));
   if(this.angleY>=89.99999)this.angleY=89.99999;
-  if(this.angleY<=-89.99999)this.angleY=-89.99999;  
+  if(this.angleY<=-89.99999)this.angleY=-89.99999;
   this.inverseQuat=GLMath.quatFromTaitBryan(
    this.angleY,this.angleX,0,GLMath.RollYawPitch);
   this.inverseQuat=GLMath.quatInverse(this.inverseQuat);
 }
-
+/** @private */
 Camera.prototype._trackball=function(deltaMouseX,deltaMouseY,angleMultiplier){
   var x=deltaMouseX
   var y=deltaMouseY
@@ -77,19 +81,26 @@ Camera.prototype._trackball=function(deltaMouseX,deltaMouseY,angleMultiplier){
    GLMath.quatNormInPlace(this.inverseQuat);
   }
 }
+/**
+ * Not documented yet.
+ * @param {*} e
+ */
 Camera.prototype.mousewheel=function(e){
  var ticks=e.delta/120.0;
  // mousewheel up (negative) means move forward,
  // mousewheel down (positive) means move back
  this.setDistance(this.distance-0.6*ticks)
 }
+/**
+ * Not documented yet.
+ */
 Camera.prototype.update=function(){
  var delta=this.input.deltaXY();
  if(this.input.leftButton){
   if(this.trackballMode){
    this._trackball(delta.x,delta.y,0.3);
   } else {
-   this._orbit(delta.x,delta.y,0.3);  
+   this._orbit(delta.x,delta.y,0.3);
   }
  } else if(this.input.middleButton){
   this.setDistance(this.distance+0.2*delta.y)
@@ -165,6 +176,10 @@ function InputTracker(element){
   mouseEvent(thisObj,{"target":e.target,"isDown":false,"button":-1});
  })
 };
+/**
+ * Not documented yet.
+ * @param {*} func
+ */
 InputTracker.prototype.mousewheel=function(func){
  var cb=function(e, click){
   var clientX=e.clientX-InputTracker._getPageX(e.target);
@@ -189,11 +204,10 @@ InputTracker.prototype.mousewheel=function(func){
  if("onmousewheel" in this.element){
   this.element.addEventListener("mousewheel",cb);
  } else {
-  this.element.addEventListener("DOMMouseScroll",cb); 
+  this.element.addEventListener("DOMMouseScroll",cb);
  }
 }
 
-
 /** @private */
 InputTracker._getPageX=function(o) {
  "use strict";

glmath.js

@@ -1103,15 +1103,15 @@ mat4translate:function(mat,v3,v3y,v3z){
 * the near clipping plane. Objects closer than this distance won't be
 * seen.<p>This value should not be 0 or less, and should be set to the highest distance
 * from the camera that the application can afford to clip out for being too
-* close, for example, 0.5, 1, or higher. 
+* close, for example, 0.5, 1, or higher.
 * @param {number} far The distance from the camera to
 * the far clipping plane. Objects beyond this distance will be too far
 * to be seen.  This value should be greater than "near" and be set so that the ratio of "far" to "near"
 * is as small as the application can accept.<p>
  * (Depth buffers often allow only 65536 possible values per pixel,
  * which are more spread out toward the far clipping plane than toward the
- * near plane due to the perspective projection.  The greater the ratio of "far" to 
- * "near", the more the values spread out, and the more likely two objects close 
+ * near plane due to the perspective projection.  The greater the ratio of "far" to
+ * "near", the more the values spread out, and the more likely two objects close
  * to the far plane will have identical depth values.)
  * @return {Array<number>} The resulting 4x4 matrix.
  */
@@ -1204,7 +1204,7 @@ mat4ortho:function(l,r,b,t,n,f){
  * Returns a 4x4 matrix representing a perspective projection
  * given an X-axis field of view.<p>
  * This method assumes a right-hand coordinate system;
- * see {@link glmath.GLMath.mat4perspective}.  For considerations 
+ * see {@link glmath.GLMath.mat4perspective}.  For considerations
  * when choosing the "n" and "f" parameters,
  * see {@link glmath.GLMath.mat4perspective}.
 * @param {number}  fovX X-axis field of view, in degrees. Should be less

glutil-mesh.js

@@ -338,7 +338,7 @@ Mesh.prototype.normal3=function(x,y,z){
   } else {
    this.color[0]=x[0];
    this.color[1]=x[1];
-   this.color[2]=x[2];  
+   this.color[2]=x[2];
   }
   this._elementsDefined|=Mesh.COLORS_BIT;
   return this;
@@ -796,7 +796,7 @@ function SubMesh(vertices,faces,format){
      (this.vertices.length-this.startIndex)>=(stride*3)){
    var index=(this.vertices.length/stride)-2;
    var firstIndex=(this.startIndex/stride);
-   this._setTriangle(vertexStartIndex,stride,firstIndex,index,index+1);   
+   this._setTriangle(vertexStartIndex,stride,firstIndex,index,index+1);
   } else if(currentMode==Mesh.LINE_STRIP &&
      (this.vertices.length-this.startIndex)>=(stride*2)){
    var index=(this.vertices.length/stride)-2;

glutil-meshes.js

@@ -517,8 +517,6 @@ Meshes.createSphere=function(radius, slices, stacks, flat, inside){
  return Meshes._createCapsule(radius,0,slices,stacks,1,flat,inside);
 }
 
-
-
 /**
 * Creates a mesh of a capsule, centered at the origin.
 * The length of the capsule will run along the z-axis. (If the capsule
@@ -528,16 +526,16 @@ Meshes.createSphere=function(radius, slices, stacks, flat, inside){
 * @param {number} radius Radius of each spherical
 * end of the capsule.
 * May be null or omitted, in which case the default is 1.
-* @param {number} length Length of the middle section. 
+* @param {number} length Length of the middle section.
 * May be null or omitted, in which case the default is 1.
 * If this value is 0, an approximation to a sphere will be generated.
 * @param {number} slices Number of vertical sections the capsule consists
 * of.  This function will create an octahedron if "slices" is 4 and "stacks" is 2.
 * Must be 3 or greater. May be null or omitted, in which case the default is 16.
-* @param {number} stacks Number of horizontal sections 
+* @param {number} stacks Number of horizontal sections
 * each spherical half consists of.
 * May be null or omitted, in which case the default is 8.
-* @param {number} middleStacks Number of vertical sections 
+* @param {number} middleStacks Number of vertical sections
 * the middle of the capsule consists of.
 * May be null or omitted, in which case the default is 1.
 * @param {boolean} flat If true, will generate normals such that the
@@ -630,7 +628,7 @@ Meshes._createCapsule=function(radius, length, slices, stacks, middleStacks, fla
     txs=(i<halfStacks) ? texStart*sphereRatio :
      (1.0-(1.0-texStart)*sphereRatio)
     txe=(i<halfStacks) ? texEnd*sphereRatio :
-     (1.0-(1.0-texEnd)*sphereRatio)   
+     (1.0-(1.0-texEnd)*sphereRatio)
    }
    lastZeCen=zeCen;
    lastTex=texEnd;

glutil-shaderprog.js

@@ -166,7 +166,7 @@ ShaderProgram.prototype._saveIfNotCurrent=function(v,i,isCurrentProgram){
        // Save this uniform to write later
        this.savedUniforms[i]=(typeof v=="number") ? v : v.slice(0,v.length);
        this.uniformValues[i]=null;
-      } 
+      }
       return isCurrentProgram;
 }
 /** @private */

glutil-transform.js

@@ -171,12 +171,12 @@ Transform.prototype.movePosition=function(x,y,z){
    } else {
     this.position[0]+=x;
     this.position[1]+=x;
-    this.position[2]+=x;   
+    this.position[2]+=x;
    }
   } else {
     this.position[0]+=x;
     this.position[1]+=y;
-    this.position[2]+=z;   
+    this.position[2]+=z;
   }
   this._isIdentity=(this._isIdentity &&
    this.position[0]==0 &&

glutil.js

@@ -207,7 +207,7 @@ var GLUtil={
 * Loads a file from a URL asynchronously, using XMLHttpRequest.
 * @param {string} url URL of the file to load.
 * @param {string|null} responseType Expected data type of
-* the file.  Can be "json", "xml", "text", or "arraybuffer".  
+* the file.  Can be "json", "xml", "text", or "arraybuffer".
 * If null or omitted, the default is "text".
 * @return {Promise} A promise that resolves when the data
 * file is loaded successfully (the result will be an object with
@@ -831,7 +831,7 @@ var Texture=function(name){
 }
 
 /**
-* Sets the wrapping behavior of texture coordinates that 
+* Sets the wrapping behavior of texture coordinates that
 * fall out of range when using this texture.  This setting
 * will only have an effect on textures whose width and height
 * are both powers of two.  For other textures, this setting
@@ -852,7 +852,7 @@ Texture.prototype.setClamp=function(clamp){
 /**
 *  Loads a texture by its URL.
 * @param {string} name URL of the texture data.  Images with a TGA
-* extension that use the RGBA or grayscale format are supported.  
+* extension that use the RGBA or grayscale format are supported.
 * Images supported by the browser will be loaded via
 * the JavaScript DOM's Image class.
 * @param {Object} [textureCache] An object whose keys
@@ -881,6 +881,17 @@ 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,
+* with the pixels arranged in left-to-right rows from top to bottom.
+* Each pixel takes 4 bytes, where the bytes are the red, green, blue,
+* and alpha components, in that order.
+* @param {Uint8Array} width Width, in pixels, of the texture.
+* @param {Uint8Array} height Height, in pixels, of the texture.
+* @return {glutil.Texture} The new Texture object.
+*/
 Texture.fromUint8Array=function(array, width, height){
  if(width<0)throw new Error("width less than 0")
  if(height<0)throw new Error("height less than 0")
@@ -941,7 +952,7 @@ Texture.loadTga=function(name){
      arr[io+2]=col
      arr[io+3]=0xFF
      offset++;
-    }  
+    }
    }
    return {"width":width,"height":height,"image":arr}
   })
@@ -1701,7 +1712,7 @@ Scene3D.prototype.loadAndMapTexture=function(name){
 * rejection).
 * @return {Promise} A promise that is resolved when
 * all the URLs in the textureFiles array are either resolved or rejected.
-* The result will be an object with three properties: 
+* The result will be an object with three properties:
 * "successes", "failures", and "results".
 * See {@link glutil.GLUtil.getPromiseResults}.
 */

gradient.html

@@ -4,6 +4,10 @@
 <script type="text/javascript" src="frame.js"></script>
 </head>
 <body>
+<a href="javascript:link1()">Red/blue linear</a>,
+<a href="javascript:link2()">Green/yellow linear</a>,
+<a href="javascript:link3()">Red/blue radial</a>,
+<a href="javascript:link4()">Green/yellow radial</a>
 <canvas width="600" height="450" id=canvas></canvas>
 <script id="demo">
 //<!--
@@ -32,16 +36,59 @@
  var i=0;
  for(var y=0;y<size;y++){
   for(var x=0;x<size;x++,i+=4){
-   gradient[i]=Math.floor(arr[x][0])
-   gradient[i+1]=Math.floor(arr[x][1])
-   gradient[i+2]=Math.floor(arr[x][2])
-   gradient[i+3]=Math.floor(arr[x][3])
+   gradient[i]=Math.round(arr[x][0])
+   gradient[i+1]=Math.round(arr[x][1])
+   gradient[i+2]=Math.round(arr[x][2])
+   gradient[i+3]=Math.round(arr[x][3])
   }
  }
  return Texture.fromUint8Array(
   new Uint8Array(gradient),size,size).setClamp(true);
 }
 
+// Generates a radial gradient
+function radialGradient(colorCenter,colorEdges){
+ colorCenter=GLUtil.toGLColor(colorCenter);
+ colorEdges=GLUtil.toGLColor(colorEdges);
+ var gradient=[]
+ var arr=[];
+ var size=32;
+ for(var i=0;i<32;i++){
+  arr.push(
+    GLMath.vec4scaleInPlace(GLMath.vec4lerp(colorCenter,colorEdges,i/31),255)
+  )
+ }
+ var i=0
+ var radius=(size-1)*0.5;
+ var recipradius=1.0/radius;
+ for (var y=0;y<size;y++){
+  for (var x=0;x<size;x++,i+=4){
+   var yy=(y-radius)*recipradius;
+   var xx=(x-radius)*recipradius;
+   var a=arr[Math.min(31,Math.floor(31 * Math.sqrt(xx * xx + yy * yy)))];
+   gradient[i]=Math.round(a[0])
+   gradient[i+1]=Math.round(a[1])
+   gradient[i+2]=Math.round(a[2])
+   gradient[i+3]=Math.round(a[3])
+  }
+ }
+ return Texture.fromUint8Array(
+  new Uint8Array(gradient),size,size).setClamp(true);
+}
+
+function link1(){
+ shape.setTexture(horizontalGradient("red","blue"))
+}
+function link2(){
+ shape.setTexture(horizontalGradient("green","yellow"))
+}
+function link3(){
+ shape.setTexture(radialGradient("red","blue"))
+}
+function link4(){
+ shape.setTexture(radialGradient("green","yellow"))
+}
+
   // Create the 3D scene; find the HTML canvas and pass it
   // to Scene3D.
   var scene=new Scene3D(document.getElementById("canvas"));

objmtl.js

@@ -401,7 +401,7 @@ ObjData._loadObj=function(str){
       vertexKind=-1;
       lastPrimitiveSeen=-1;
       haveNormals=false;
-      mesh=new Mesh();     
+      mesh=new Mesh();
     }
     mesh.mode(prim==Mesh.TRIANGLES ?
       Mesh.TRIANGLE_FAN :