Updated all sources to current WebGL and TypedArray APIs; WebGLFloatArra...

CanvasMatrix.js

@@ -33,7 +33,7 @@
         void load(in CanvasMatrix4 matrix);                 // copy the values from the passed matrix
         void load(in sequence<float> array);                // copy 16 floats into the matrix
         sequence<float> getAsArray();                       // return the matrix as an array of 16 floats
-        WebGLFloatArray getAsWebGLFloatArray();           // return the matrix as a WebGLFloatArray with 16 values
+        Float32Array getAsFloat32Array();                   // return the matrix as a Float32Array with 16 values
         void makeIdentity();                                // replace the matrix with identity
         void transpose();                                   // replace the matrix with its transpose
         void invert();                                      // replace the matrix with its inverse
@@ -139,9 +139,9 @@ CanvasMatrix4.prototype.getAsArray = function()
     ];
 }
 
-CanvasMatrix4.prototype.getAsWebGLFloatArray = function()
+CanvasMatrix4.prototype.getAsFloat32Array = function()
 {
-    return new WebGLFloatArray(this.getAsArray());
+    return new Float32Array(this.getAsArray());
 }
 
 CanvasMatrix4.prototype.makeIdentity = function()

box.js

@@ -96,15 +96,15 @@ function box(options, source) {
 
 		this.vertexVBO = this.gl.createBuffer();
 		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexVBO);
-		this.gl.bufferData(this.gl.ARRAY_BUFFER, new WebGLFloatArray(vertices), this.gl.STATIC_DRAW);
+		this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(vertices), this.gl.STATIC_DRAW);
 
 		if (this.indexVBO) {
 			this.gl.deleteBuffer(this.indexVBO);
 		}
 
 		this.indexVBO = this.gl.createBuffer();
 		this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.indexVBO);
-		this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(indices), this.gl.STATIC_DRAW);
+		this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), this.gl.STATIC_DRAW);
 
 		this.index_ct = indices.length;
 	}
@@ -152,7 +152,7 @@ function box(options, source) {
 
 		vertex_source = vertex_source.replace("/* CYLINDRICAL", "//* Cylindrical")
 
-		this.compile_program(vertex_source, frag_source);		
+		this.compile_program(vertex_source, frag_source, { "position": 0 });
 	}
 }
 

datasurface.js

@@ -157,15 +157,15 @@ function datasurface(source, width, height, b_width, b_height) {
 
 		this.vertexVBO = this.gl.createBuffer();
 		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexVBO);
-		this.gl.bufferData(this.gl.ARRAY_BUFFER, new WebGLFloatArray(vertices), this.gl.STATIC_DRAW);
+		this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(vertices), this.gl.STATIC_DRAW);
 
 		this.textureVBO = this.gl.createBuffer();
 		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.textureVBO);
-		this.gl.bufferData(this.gl.ARRAY_BUFFER, new WebGLFloatArray(texture), this.gl.STATIC_DRAW);
+		this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(texture), this.gl.STATIC_DRAW);
 
 		this.indexVBO = this.gl.createBuffer();
 		this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.indexVBO);
-		this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(indices), this.gl.STATIC_DRAW);
+		this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), this.gl.STATIC_DRAW);
 
 		this.index_ct = indices.length;
 	}
@@ -225,7 +225,7 @@ function datasurface(source, width, height, b_width, b_height) {
 		var vertex_source = this.read("shaders/datasurface.vert");
 		var frag_source		= this.read("shaders/datasurface.frag");
 
-		this.compile_program(vertex_source, frag_source);		
+		this.compile_program(vertex_source, frag_source, { "position": 0, "aTextureCoord": 1 });
 	}
 }
 

emptytexture.js

@@ -58,16 +58,13 @@ function emptytexture(context, width, height) {
 		this.texture = this.gl.createTexture();
 		this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
 
-		var pixels = new WebGLFloatArray(width * height * 4);
+		var pixels = new Float32Array(width * height * 4);
+		this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, width, height, 0, this.gl.RGBA, this.gl.FLOAT, pixels);
 
-		this.gl.texImage2D(this.gl.TEXTURE_2D, 0, 0x8814, width, height, 0, this.gl.RGBA, this.gl.FLOAT, pixels);
-		//this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, width, height, 0, this.gl.RGBA, this.gl.FLOAT, pixels);
-
-		this.gl.enable(this.gl.TEXTURE_2D);
 		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.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_S_WRAP, this.gl.REPEAT);
-		this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_T_WRAP, this.gl.REPEAT);
+		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.bindTexture(this.gl.TEXTURE_2D, null);
 	}
 
@@ -79,7 +76,6 @@ function emptytexture(context, width, height) {
 	 * @deprecated
 	 */
 	this.bind = function() {
-		this.gl.enable(this.gl.TEXTURE_2D);
 		this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
 	}
 

flow.js

@@ -224,19 +224,19 @@ function flow(string, options) {
 
 		this.vertexVBO = this.gl.createBuffer();
 		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexVBO);
-		this.gl.bufferData(this.gl.ARRAY_BUFFER, new WebGLFloatArray(vertices), this.gl.STATIC_DRAW);
+		this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(vertices), this.gl.STATIC_DRAW);
 
 		/* One of the options (currently anticipated from this version) is
 		 * to color the surface with a normal map or a regular texture and
 		 * lighting information for the perception of depth on the object.
 		 */
 		this.textureVBO = this.gl.createBuffer();
 		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.textureVBO);
-		this.gl.bufferData(this.gl.ARRAY_BUFFER, new WebGLFloatArray(texture), this.gl.STATIC_DRAW);
+		this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(texture), this.gl.STATIC_DRAW);
 
 		this.indexVBO = this.gl.createBuffer();
 		this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.indexVBO);
-		this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(indices), this.gl.STATIC_DRAW);
+		this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), this.gl.STATIC_DRAW);
 
 		this.index_ct = indices.length;
 	}
@@ -276,7 +276,6 @@ function flow(string, options) {
 		this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, this.fbo);
 		this.gl.framebufferTexture2D(this.gl.FRAMEBUFFER, this.gl.COLOR_ATTACHMENT0, this.gl.TEXTURE_2D, this.ping, 0);
 
-		this.gl.enable(this.gl.TEXTURE_2D);
 		this.gl.activeTexture(this.gl.TEXTURE0);
 		this.gl.bindTexture(this.gl.TEXTURE_2D, this.pong);
 		this.gl.activeTexture(this.gl.TEXTURE1);
@@ -337,7 +336,6 @@ function flow(string, options) {
 		this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
 
 		// the recently-drawn texture
-		this.gl.enable(this.gl.TEXTURE_2D);
 		this.gl.activeTexture(this.gl.TEXTURE0);
 		this.gl.bindTexture(this.gl.TEXTURE_2D, this.ping);
 		this.gl.drawElements(this.gl.TRIANGLE_STRIP, this.index_ct, this.gl.UNSIGNED_SHORT, 0);
@@ -361,12 +359,12 @@ function flow(string, options) {
 		var vertex_source = this.read("shaders/flow.calc.vert").replace("USER_FUNCTION", this.f);
 		var frag_source   = this.read("shaders/flow.calc.frag").replace("USER_FUNCTION", this.f);
 
-		this.calc_program = this.compile_program(vertex_source, frag_source);		
+                this.calc_program = this.compile_program(vertex_source, frag_source, { "position": 0, "aTextureCoord": 1 });
 
 		var vertex_source = this.read("shaders/flow.vert").replace("USER_FUNCTION", this.f);
 		var frag_source   = this.read("shaders/flow.frag").replace("USER_FUNCTION", this.f);
 
-		this.program      = this.compile_program(vertex_source, frag_source);
+		this.program      = this.compile_program(vertex_source, frag_source, { "position": 0, "aTextureCoord": 1 });
 	}
 }
 

flowsurface.html

@@ -6,7 +6,7 @@
 		based plotting library for mathematical primitives.
 	-->
 	<title>WebGLot Alpha</title>
-	
+
 	<!--
 		This is a matrix library I have been using for the time being, though
 		I may move to something more standard.  I originally got this code from

ftexture.js

@@ -21,7 +21,7 @@
 
 /** Creates a WebGLTexture based on any function that the 
  * programmer would like to use.  Include a function that
- * when given a WebGLFloatArray, sets all the appropriate
+ * when given a Float32Array, sets all the appropriate
  * values.  It expects that the supplied data will be of
  * the format RGBA in successive elements, and is stored
  * internally in full 32-bit floats.  Thus, the array passed
@@ -30,7 +30,7 @@
  * @param {WebGLContext} context the context to use to create textures
  * @param {int} width the width to make the texture
  * @param {int} height the height to make the texture
- * @param {function(WebGLFloatArray)} a function that fills \
+ * @param {function(Float32Array)} a function that fills \
  *     the provided array with the appropriate data
  */
 function ftexture(context, width, height, f) {
@@ -49,22 +49,21 @@ function ftexture(context, width, height, f) {
 	 * of the class is going to change soon.  Currently, ftexture
 	 * actually returns a WebGLTexture, and not a wrapper of one.
 	 *
-	 * @param {function(WebGLFloatArray)} f
+	 * @param {function(Float32Array)} f
 	 */
 	this.initialize = function(f) {
 		this.texture = this.gl.createTexture();
 		this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
 
-		var pixels = new WebGLFloatArray(this.width * this.height * 4);
+		var pixels = new Float32Array(this.width * this.height * 4);
 		// Pass pixels into the user-provided function
 		pixels = f(pixels);
-		this.gl.texImage2D(this.gl.TEXTURE_2D, 0, 0x8814, this.width, this.height, 0, this.gl.RGBA, this.gl.FLOAT, pixels);
+		this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.width, this.height, 0, this.gl.RGBA, this.gl.FLOAT, pixels);
 
-		this.gl.enable(this.gl.TEXTURE_2D);
 		this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST);
 		this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST);
-		this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_S_WRAP, this.gl.CLAMP);
-		this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_T_WRAP, this.gl.CLAMP);
+		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.bindTexture(this.gl.TEXTURE_2D, null);
 	}
 

grapher.js

@@ -75,29 +75,50 @@ function grapher() {
 	 * only browser specific, but version specific as well.
 	 */
 	this.getContext = function() {
+		if (this.gl)
+			return this.gl;
+
 		/* Though the canvas name is hard-coded, it will likely be moved
 		 * to a parameter if multiple view contexts are desired.
 		 */
 		var canvas = document.getElementById("glot");
 
-		var gl = null;
-
 		/* These seem to the be the context names for most current imp-
 		 * lementations around now.
 		 */
 		var strings = ["experimental-webgl", "moz-webgl", "webkit-3d", "webgl"];
 
 		for (var i = 0; i < strings.length; ++i) {
 			try {
-				if (!gl) {
-					gl = canvas.getContext(strings[i]);
+				if (!this.gl) {
+					this.gl = canvas.getContext(strings[i]);
 				} else {
 					break;
 				}
 			} catch (e) { }
 		}
 
-		return gl;
+		// The vast majority of this library uses floating-point textures, so
+		// require the availability of the OES_texture_float extension here.
+		if (!this.gl.getExtension("OES_texture_float")) {
+			this.gl = null;
+			throw "Requires the OES_texture_float extension";
+		}
+
+		/*
+		// Uncomment, and include webgl-debug.js in .html file (must copy from Khronos repository),
+		// to debug WebGL errors.
+		function throwOnGLError(err, funcName, args) {
+			var errorString = WebGLDebugUtils.glEnumToString(err) +
+				" was caused by call to " + funcName;
+			throw errorString;
+		};
+
+		if (this.gl)
+			this.gl = WebGLDebugUtils.makeDebugContext(this.gl, throwOnGLError);
+		*/
+
+		return this.gl;
 	}
 
 	/** This returns the 3D point clicked, on a unit glass ball
@@ -339,21 +360,19 @@ function grapher() {
 
 		/* Enable some features I'd like to use.
 		 */
-		gl.enable(gl.POINT_SMOOTH);
-		gl.enable(gl.VERTEX_ARRAY);
-		gl.enable(gl.LINE_SMOOTH);
 		gl.enable(gl.DEPTH_TEST);
 		gl.enable(gl.BLEND);
 
 		// Other smoothness and blending options
 		gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-		gl.hint(gl.LINE_SMOOTH_HINT, gl.DONT_CARE);
 
 		// Set the line width and point size
 		gl.lineWidth(1.5);
 
 		this.setDomain(-2, 2, -2, 2);
 
+		// FIXME: must set the point size using gl_PointSize in the vertex shader.
+
 		/* WebGL doesn't support this, it seems.  OpenGL ES 2.0 elliminated
 		 * it to obviate the need for dedicated hardware for this task,
 		 * which is a luxury in some sense.

isosurface.js

@@ -136,15 +136,15 @@ function isosurface(string, options, source) {
 
 		this.vertexVBO = this.gl.createBuffer();
 		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexVBO);
-		this.gl.bufferData(this.gl.ARRAY_BUFFER, new WebGLFloatArray(vertices), this.gl.STATIC_DRAW);
+		this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(vertices), this.gl.STATIC_DRAW);
 
 		this.textureVBO = this.gl.createBuffer();
 		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.textureVBO);
-		this.gl.bufferData(this.gl.ARRAY_BUFFER, new WebGLFloatArray(texture), this.gl.STATIC_DRAW);
+		this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(texture), this.gl.STATIC_DRAW);
 
 		this.indexVBO = this.gl.createBuffer();
 		this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.indexVBO);
-		this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(indices), this.gl.STATIC_DRAW);
+		this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), this.gl.STATIC_DRAW);
 
 		this.index_ct = indices.length;
 	}
@@ -198,8 +198,8 @@ function isosurface(string, options, source) {
 			frag_source   = frag_source.replace("/* SPHERICAL", "//* Spherical");
 		}
 
-		this.compile_program(vertex_source, frag_source);		
+		this.compile_program(vertex_source, frag_source, { "vPosition": 0, "vTexCoord": 1 });
 	}
 }
 
-isosurface.prototype = new primitive();
+isosurface.prototype = new primitive();

noisetexture.js

@@ -45,7 +45,7 @@ function noisetexture(context, width, height) {
 		this.texture = this.gl.createTexture();
 		this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
 
-		var pixels = new WebGLFloatArray(this.width * this.height * 4);
+		var pixels = new Float32Array(this.width * this.height * 4);
 		var count = this.width * this.height * 4;
 		//*
 		for (var i = 0; i < count; i += 1) {
@@ -62,16 +62,14 @@ function noisetexture(context, width, height) {
 		*/	
 		this.gl.texImage2D(this.gl.TEXTURE_2D, 0, this.gl.RGBA, this.width, this.height, 0, this.gl.RGBA, this.gl.FLOAT, pixels);
 
-		this.gl.enable(this.gl.TEXTURE_2D);
 		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.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_S_WRAP, this.gl.CLAMP);
-		this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_T_WRAP, this.gl.CLAMP);
+		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.bindTexture(this.gl.TEXTURE_2D, null);
 	}
 
 	this.bind = function() {
-		this.gl.enable(this.gl.TEXTURE_2D);
 		this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
 	}
 

nurbs.js

@@ -299,15 +299,15 @@ function nurbs(string, options) {
 
 		this.vertexVBO = this.gl.createBuffer();
 		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.vertexVBO);
-		this.gl.bufferData(this.gl.ARRAY_BUFFER, new WebGLFloatArray(vertices), this.gl.STATIC_DRAW);
+		this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(vertices), this.gl.STATIC_DRAW);
 
 		this.lVBO = this.gl.createBuffer();
 		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.lVBO);
-		this.gl.bufferData(this.gl.ARRAY_BUFFER, new WebGLFloatArray(ls), this.gl.STATIC_DRAW);
+		this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array(ls), this.gl.STATIC_DRAW);
 
 		this.indexVBO = this.gl.createBuffer();
 		this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.indexVBO);
-		this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(indices), this.gl.STATIC_DRAW);
+		this.gl.bufferData(this.gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), this.gl.STATIC_DRAW);
 
 		this.index_ct = indices.length;
 	}
@@ -337,9 +337,6 @@ function nurbs(string, options) {
 		this.gl.uniform2f(this.gl.getUniformLocation(this.program, "cpCounts"  ), this.cps.length, this.cps[0].length);
 		this.gl.uniform2f(this.gl.getUniformLocation(this.program, "n"         ), this.nu, this.nv);
 
-		this.gl.bindAttribLocation(this.program, 0, "position");
-	    this.gl.bindAttribLocation(this.program, 1, "ls");
-
 		this.gl.enableVertexAttribArray(0);
 		this.gl.enableVertexAttribArray(1);
 
@@ -356,7 +353,6 @@ function nurbs(string, options) {
 		this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, null);
 
 		// the recently-drawn texture
-		this.gl.enable(this.gl.TEXTURE_2D);
 		this.gl.activeTexture(this.gl.TEXTURE0);
 		this.gl.bindTexture(this.gl.TEXTURE_2D, this.usTex);
 		this.gl.activeTexture(this.gl.TEXTURE1);
@@ -386,7 +382,7 @@ function nurbs(string, options) {
 		var vertex_source = this.read("shaders/nurbs.vert").replace("USER_FUNCTION", this.f);
 		var frag_source   = this.read("shaders/nurbs.frag").replace("USER_FUNCTION", this.f);
 
-		this.program      = this.compile_program(vertex_source, frag_source);
+		this.program      = this.compile_program(vertex_source, frag_source, { "position": 0, "ls": 1 });
 	}
 }