sawine@2: //
sawine@2: // initWebGL
sawine@2: //
sawine@2: // Initialize the Canvas element with the passed name as a WebGL object and return the
sawine@2: // WebGLRenderingContext. 
sawine@2: //
sawine@2: // Load shaders with the passed names and create a program with them. Return this program 
sawine@2: // in the 'program' property of the returned context.
sawine@2: //
sawine@2: // For each string in the passed attribs array, bind an attrib with that name at that index.
sawine@2: // Once the attribs are bound, link the program and then use it.
sawine@2: //
sawine@2: // Set the clear color to the passed array (4 values) and set the clear depth to the passed value.
sawine@2: // Enable depth testing and blending with a blend func of (SRC_ALPHA, ONE_MINUS_SRC_ALPHA)
sawine@2: //
sawine@2: function initWebGL(canvasName, vshader, fshader, attribs, clearColor, clearDepth)
sawine@2: {
sawine@2:     var canvas = document.getElementById(canvasName);
sawine@2:     var gl = canvas.getContext("webkit-3d");
sawine@2: 
sawine@2:     // create our shaders
sawine@2:     var vertexShader = loadShader(gl, vshader);
sawine@2:     var fragmentShader = loadShader(gl, fshader);
sawine@2: 
sawine@2:     if (!vertexShader || !fragmentShader)
sawine@2:         return null;
sawine@2: 
sawine@2:     // Create the program object
sawine@2:     gl.program = gl.createProgram();
sawine@2: 
sawine@2:     if (!gl.program)
sawine@2:         return null;
sawine@2: 
sawine@2:     // Attach our two shaders to the program
sawine@2:     gl.attachShader (gl.program, vertexShader);
sawine@2:     gl.attachShader (gl.program, fragmentShader);
sawine@2: 
sawine@2:     // Bind attributes
sawine@2:     for (var i in attribs)
sawine@2:         gl.bindAttribLocation (gl.program, i, attribs[i]);
sawine@2: 
sawine@2:     // Link the program
sawine@2:     gl.linkProgram(gl.program);
sawine@2: 
sawine@2:     // Check the link status
sawine@2:     var linked = gl.getProgrami(gl.program, gl.LINK_STATUS);
sawine@2:     if (!linked) {
sawine@2:         // something went wrong with the link
sawine@2:         var error = gl.getProgramInfoLog (gl.program);
sawine@2:         console.log("Error in program linking:"+error);
sawine@2: 
sawine@2:         gl.deleteProgram(gl.program);
sawine@2:         gl.deleteProgram(fragmentShader);
sawine@2:         gl.deleteProgram(vertexShader);
sawine@2: 
sawine@2:         return null;
sawine@2:     }
sawine@2: 
sawine@2:     gl.useProgram(gl.program);
sawine@2: 
sawine@2:     gl.clearColor (clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
sawine@2:     gl.clearDepth (clearDepth);
sawine@2: 
sawine@2:     gl.enable(gl.DEPTH_TEST);
sawine@2:     gl.enable(gl.BLEND);
sawine@2:     gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
sawine@2: 
sawine@2:     return gl;
sawine@2: }
sawine@2: 
sawine@2: //
sawine@2: // loadShader
sawine@2: //
sawine@2: // 'shaderId' is the id of a <script> element containing the shader source string.
sawine@2: // Load this shader and return the WebGLShader object corresponding to it.
sawine@2: //
sawine@2: function loadShader(ctx, shaderId)
sawine@2: {
sawine@2:     var shaderScript = document.getElementById(shaderId);
sawine@2:     if (!shaderScript) {
sawine@2:         console.log("*** Error: shader script '"+shaderId+"' not found");
sawine@2:         return null;
sawine@2:     }
sawine@2:         
sawine@2:     if (shaderScript.type == "x-shader/x-vertex")
sawine@2:         var shaderType = ctx.VERTEX_SHADER;
sawine@2:     else if (shaderScript.type == "x-shader/x-fragment")
sawine@2:         var shaderType = ctx.FRAGMENT_SHADER;
sawine@2:     else {
sawine@2:         console.log("*** Error: shader script '"+shaderId+"' of undefined type '"+shaderScript.type+"'");       
sawine@2:         return null;
sawine@2:     }
sawine@2: 
sawine@2:     // Create the shader object
sawine@2:     var shader = ctx.createShader(shaderType);
sawine@2:     if (shader == null) {
sawine@2:         console.log("*** Error: unable to create shader '"+shaderId+"'");       
sawine@2:         return null;
sawine@2:     }
sawine@2: 
sawine@2:     // Load the shader source
sawine@2:     ctx.shaderSource(shader, shaderScript.text);
sawine@2: 
sawine@2:     // Compile the shader
sawine@2:     ctx.compileShader(shader);
sawine@2: 
sawine@2:     // Check the compile status
sawine@2:     var compiled = ctx.getShaderi(shader, ctx.COMPILE_STATUS);
sawine@2:     if (!compiled) {
sawine@2:         // Something went wrong during compilation; get the error
sawine@2:         var error = ctx.getShaderInfoLog(shader);
sawine@2:         console.log("*** Error compiling shader '"+shaderId+"':"+error);
sawine@2:         ctx.deleteShader(shader);
sawine@2:         return null;
sawine@2:     }
sawine@2: 
sawine@2:     return shader;
sawine@2: }
sawine@2: 
sawine@2: // 
sawine@2: // makeBox
sawine@2: //
sawine@2: // Create a box with vertices, normals and texCoords. Create VBOs for each as well as the index array.
sawine@2: // Return an object with the following properties:
sawine@2: //
sawine@2: //  normalObject        WebGLBuffer object for normals
sawine@2: //  texCoordObject      WebGLBuffer object for texCoords
sawine@2: //  vertexObject        WebGLBuffer object for vertices
sawine@2: //  indexObject         WebGLBuffer object for indices
sawine@2: //  numIndices          The number of indices in the indexObject
sawine@2: // 
sawine@2: function makeBox(ctx)
sawine@2: {
sawine@2:     // box
sawine@2:     //    v6----- v5
sawine@2:     //   /|      /|
sawine@2:     //  v1------v0|
sawine@2:     //  | |     | |
sawine@2:     //  | |v7---|-|v4
sawine@2:     //  |/      |/
sawine@2:     //  v2------v3
sawine@2:     //
sawine@2:     // vertex coords array
sawine@2:     var vertices = new WebGLFloatArray(
sawine@2:         [  1, 1, 1,  -1, 1, 1,  -1,-1, 1,   1,-1, 1,    // v0-v1-v2-v3 front
sawine@2:            1, 1, 1,   1,-1, 1,   1,-1,-1,   1, 1,-1,    // v0-v3-v4-v5 right
sawine@2:            1, 1, 1,   1, 1,-1,  -1, 1,-1,  -1, 1, 1,    // v0-v5-v6-v1 top
sawine@2:           -1, 1, 1,  -1, 1,-1,  -1,-1,-1,  -1,-1, 1,    // v1-v6-v7-v2 left
sawine@2:           -1,-1,-1,   1,-1,-1,   1,-1, 1,  -1,-1, 1,    // v7-v4-v3-v2 bottom
sawine@2:            1,-1,-1,  -1,-1,-1,  -1, 1,-1,   1, 1,-1 ]   // v4-v7-v6-v5 back
sawine@2:     );
sawine@2: 
sawine@2:     // normal array
sawine@2:     var normals = new WebGLFloatArray(
sawine@2:         [  0, 0, 1,   0, 0, 1,   0, 0, 1,   0, 0, 1,     // v0-v1-v2-v3 front
sawine@2:            1, 0, 0,   1, 0, 0,   1, 0, 0,   1, 0, 0,     // v0-v3-v4-v5 right
sawine@2:            0, 1, 0,   0, 1, 0,   0, 1, 0,   0, 1, 0,     // v0-v5-v6-v1 top
sawine@2:           -1, 0, 0,  -1, 0, 0,  -1, 0, 0,  -1, 0, 0,     // v1-v6-v7-v2 left
sawine@2:            0,-1, 0,   0,-1, 0,   0,-1, 0,   0,-1, 0,     // v7-v4-v3-v2 bottom
sawine@2:            0, 0,-1,   0, 0,-1,   0, 0,-1,   0, 0,-1 ]    // v4-v7-v6-v5 back
sawine@2:        );
sawine@2: 
sawine@2: 
sawine@2:     // texCoord array
sawine@2:     var texCoords = new WebGLFloatArray(
sawine@2:         [  1, 1,   0, 1,   0, 0,   1, 0,    // v0-v1-v2-v3 front
sawine@2:            0, 1,   0, 0,   1, 0,   1, 1,    // v0-v3-v4-v5 right
sawine@2:            1, 0,   1, 1,   0, 1,   0, 0,    // v0-v5-v6-v1 top
sawine@2:            1, 1,   0, 1,   0, 0,   1, 0,    // v1-v6-v7-v2 left
sawine@2:            0, 0,   1, 0,   1, 1,   0, 1,    // v7-v4-v3-v2 bottom
sawine@2:            0, 0,   1, 0,   1, 1,   0, 1 ]   // v4-v7-v6-v5 back
sawine@2:        );
sawine@2: 
sawine@2:     // index array
sawine@2:     var indices = new WebGLUnsignedByteArray(
sawine@2:         [  0, 1, 2,   0, 2, 3,    // front
sawine@2:            4, 5, 6,   4, 6, 7,    // right
sawine@2:            8, 9,10,   8,10,11,    // top
sawine@2:           12,13,14,  12,14,15,    // left
sawine@2:           16,17,18,  16,18,19,    // bottom
sawine@2:           20,21,22,  20,22,23 ]   // back
sawine@2:       );
sawine@2: 
sawine@2:     var retval = { };
sawine@2:     
sawine@2:     retval.normalObject = ctx.createBuffer();
sawine@2:     ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.normalObject);
sawine@2:     ctx.bufferData(ctx.ARRAY_BUFFER, normals, ctx.STATIC_DRAW);
sawine@2:     
sawine@2:     retval.texCoordObject = ctx.createBuffer();
sawine@2:     ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.texCoordObject);
sawine@2:     ctx.bufferData(ctx.ARRAY_BUFFER, texCoords, ctx.STATIC_DRAW);
sawine@2: 
sawine@2:     retval.vertexObject = ctx.createBuffer();
sawine@2:     ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.vertexObject);
sawine@2:     ctx.bufferData(ctx.ARRAY_BUFFER, vertices, ctx.STATIC_DRAW);
sawine@2:     
sawine@2:     ctx.bindBuffer(ctx.ARRAY_BUFFER, 0);
sawine@2: 
sawine@2:     retval.indexObject = ctx.createBuffer();
sawine@2:     ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, retval.indexObject);
sawine@2:     ctx.bufferData(ctx.ELEMENT_ARRAY_BUFFER, indices, ctx.STATIC_DRAW);
sawine@2:     ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, 0);
sawine@2:     
sawine@2:     retval.numIndices = indices.length;
sawine@2: 
sawine@2:     return retval;
sawine@2: }
sawine@2: 
sawine@2: // 
sawine@2: // makeSphere
sawine@2: //
sawine@2: // Create a sphere with the passed number of latitude and longitude bands and the passed radius. 
sawine@2: // Sphere has vertices, normals and texCoords. Create VBOs for each as well as the index array.
sawine@2: // Return an object with the following properties:
sawine@2: //
sawine@2: //  normalObject        WebGLBuffer object for normals
sawine@2: //  texCoordObject      WebGLBuffer object for texCoords
sawine@2: //  vertexObject        WebGLBuffer object for vertices
sawine@2: //  indexObject         WebGLBuffer object for indices
sawine@2: //  numIndices          The number of indices in the indexObject
sawine@2: // 
sawine@2: function makeSphere(ctx, radius, lats, longs)
sawine@2: {
sawine@2:     var geometryData = [ ];
sawine@2:     var normalData = [ ];
sawine@2:     var texCoordData = [ ];
sawine@2:     var indexData = [ ];
sawine@2:     
sawine@2:     for (var latNumber = 0; latNumber <= lats; ++latNumber) {
sawine@2:         for (var longNumber = 0; longNumber <= longs; ++longNumber) {
sawine@2:             var theta = latNumber * Math.PI / lats;
sawine@2:             var phi = longNumber * 2 * Math.PI / longs;
sawine@2:             var sinTheta = Math.sin(theta);
sawine@2:             var sinPhi = Math.sin(phi);
sawine@2:             var cosTheta = Math.cos(theta);
sawine@2:             var cosPhi = Math.cos(phi);
sawine@2:             
sawine@2:             var x = cosPhi * sinTheta;
sawine@2:             var y = cosTheta;
sawine@2:             var z = sinPhi * sinTheta;
sawine@2:             var u = 1-(longNumber/longs);
sawine@2:             var v = latNumber/lats;
sawine@2:             
sawine@2:             normalData.push(x);
sawine@2:             normalData.push(y);
sawine@2:             normalData.push(z);
sawine@2:             texCoordData.push(u);
sawine@2:             texCoordData.push(v);
sawine@2:             geometryData.push(radius * x);
sawine@2:             geometryData.push(radius * y);
sawine@2:             geometryData.push(radius * z);
sawine@2:         }
sawine@2:     }
sawine@2:     
sawine@2:     longs += 1;
sawine@2:     for (var latNumber = 0; latNumber < lats; ++latNumber) {
sawine@2:         for (var longNumber = 0; longNumber < longs; ++longNumber) {
sawine@2:             var first = (latNumber * longs) + (longNumber % longs);
sawine@2:             var second = first + longs;
sawine@2:             indexData.push(first);
sawine@2:             indexData.push(second);
sawine@2:             indexData.push(first+1);
sawine@2: 
sawine@2:             indexData.push(second);
sawine@2:             indexData.push(second+1);
sawine@2:             indexData.push(first+1);
sawine@2:         }
sawine@2:     }
sawine@2:     
sawine@2:     var retval = { };
sawine@2:     
sawine@2:     retval.normalObject = ctx.createBuffer();
sawine@2:     ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.normalObject);
sawine@2:     ctx.bufferData(ctx.ARRAY_BUFFER, new WebGLFloatArray(normalData), ctx.STATIC_DRAW);
sawine@2: 
sawine@2:     retval.texCoordObject = ctx.createBuffer();
sawine@2:     ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.texCoordObject);
sawine@2:     ctx.bufferData(ctx.ARRAY_BUFFER, new WebGLFloatArray(texCoordData), ctx.STATIC_DRAW);
sawine@2: 
sawine@2:     retval.vertexObject = ctx.createBuffer();
sawine@2:     ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.vertexObject);
sawine@2:     ctx.bufferData(ctx.ARRAY_BUFFER, new WebGLFloatArray(geometryData), ctx.STATIC_DRAW);
sawine@2:     
sawine@2:     retval.numIndices = indexData.length;
sawine@2:     retval.indexObject = ctx.createBuffer();
sawine@2:     ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, retval.indexObject);
sawine@2:     ctx.bufferData(ctx.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(indexData), ctx.STREAM_DRAW);
sawine@2:     
sawine@2:     return retval;
sawine@2: }
sawine@2: 
sawine@2: //
sawine@2: // loadObj
sawine@2: //
sawine@2: // Load a .obj file from the passed URL. Return an object with a 'loaded' property set to false.
sawine@2: // When the object load is complete, the 'loaded' property becomes true and the following 
sawine@2: // properties are set:
sawine@2: //
sawine@2: //  normalObject        WebGLBuffer object for normals
sawine@2: //  texCoordObject      WebGLBuffer object for texCoords
sawine@2: //  vertexObject        WebGLBuffer object for vertices
sawine@2: //  indexObject         WebGLBuffer object for indices
sawine@2: //  numIndices          The number of indices in the indexObject
sawine@2: //  
sawine@2: function loadObj(ctx, url)
sawine@2: {
sawine@2:     var obj = { loaded : false };
sawine@2:     obj.ctx = ctx;
sawine@2:     var req = new XMLHttpRequest();
sawine@2:     req.obj = obj;
sawine@2:     req.onreadystatechange = function () { processLoadObj(req) };
sawine@2:     req.open("GET", url, true);
sawine@2:     req.send(null);
sawine@2:     return obj;
sawine@2: }
sawine@2: 
sawine@2: function processLoadObj(req) 
sawine@2: {
sawine@2:     console.log("req="+req)
sawine@2:     // only if req shows "complete"
sawine@2:     if (req.readyState == 4) {
sawine@2:         doLoadObj(req.obj, req.responseText);
sawine@2:     }
sawine@2: }
sawine@2: 
sawine@2: function doLoadObj(obj, text)
sawine@2: {
sawine@2:     vertexArray = [ ];
sawine@2:     normalArray = [ ];
sawine@2:     textureArray = [ ];
sawine@2:     indexArray = [ ];
sawine@2:     
sawine@2:     var vertex = [ ];
sawine@2:     var normal = [ ];
sawine@2:     var texture = [ ];
sawine@2:     var facemap = { };
sawine@2:     var index = 0;
sawine@2:         
sawine@2:     var lines = text.split("\n");
sawine@2:     for (var lineIndex in lines) {
sawine@2:         var line = lines[lineIndex].replace(/[ \t]+/g, " ").replace(/\s\s*$/, "");
sawine@2:         
sawine@2:         // ignore comments
sawine@2:         if (line[0] == "#")
sawine@2:             continue;
sawine@2:             
sawine@2:         var array = line.split(" ");
sawine@2:         if (array[0] == "v") {
sawine@2:             // vertex
sawine@2:             vertex.push(parseFloat(array[1]));
sawine@2:             vertex.push(parseFloat(array[2]));
sawine@2:             vertex.push(parseFloat(array[3]));
sawine@2:         }
sawine@2:         else if (array[0] == "vt") {
sawine@2:             // normal
sawine@2:             texture.push(parseFloat(array[1]));
sawine@2:             texture.push(parseFloat(array[2]));
sawine@2:         }
sawine@2:         else if (array[0] == "vn") {
sawine@2:             // normal
sawine@2:             normal.push(parseFloat(array[1]));
sawine@2:             normal.push(parseFloat(array[2]));
sawine@2:             normal.push(parseFloat(array[3]));
sawine@2:         }
sawine@2:         else if (array[0] == "f") {
sawine@2:             // face
sawine@2:             if (array.length != 4) {
sawine@2:                 console.log("*** Error: face '"+line+"' not handled");
sawine@2:                 continue;
sawine@2:             }
sawine@2:             
sawine@2:             for (var i = 1; i < 4; ++i) {
sawine@2:                 if (!(array[i] in facemap)) {
sawine@2:                     // add a new entry to the map and arrays
sawine@2:                     var f = array[i].split("/");
sawine@2:                     var vtx, nor, tex;
sawine@2:                     
sawine@2:                     if (f.length == 1) {
sawine@2:                         vtx = parseInt(f[0]) - 1;
sawine@2:                         nor = vtx;
sawine@2:                         tex = vtx;
sawine@2:                     }
sawine@2:                     else if (f.length = 3) {
sawine@2:                         vtx = parseInt(f[0]) - 1;
sawine@2:                         tex = parseInt(f[1]) - 1;
sawine@2:                         nor = parseInt(f[2]) - 1;
sawine@2:                     }
sawine@2:                     else {
sawine@2:                         console.log("*** Error: did not understand face '"+array[i]+"'");
sawine@2:                         return null;
sawine@2:                     }
sawine@2:                     
sawine@2:                     // do the vertices
sawine@2:                     var x = 0;
sawine@2:                     var y = 0;
sawine@2:                     var z = 0;
sawine@2:                     if (vtx * 3 + 2 < vertex.length) {
sawine@2:                         x = vertex[vtx*3];
sawine@2:                         y = vertex[vtx*3+1];
sawine@2:                         z = vertex[vtx*3+2];
sawine@2:                     }
sawine@2:                     vertexArray.push(x);
sawine@2:                     vertexArray.push(y);
sawine@2:                     vertexArray.push(z);
sawine@2:                     
sawine@2:                     // do the textures
sawine@2:                     x = 0;
sawine@2:                     y = 0;
sawine@2:                     if (tex * 2 + 1 < texture.length) {
sawine@2:                         x = texture[tex*2];
sawine@2:                         y = texture[tex*2+1];
sawine@2:                     }
sawine@2:                     textureArray.push(x);
sawine@2:                     textureArray.push(y);
sawine@2:                     
sawine@2:                     // do the normals
sawine@2:                     x = 0;
sawine@2:                     y = 0;
sawine@2:                     z = 1;
sawine@2:                     if (nor * 3 + 2 < normal.length) {
sawine@2:                         x = normal[nor*3];
sawine@2:                         y = normal[nor*3+1];
sawine@2:                         z = normal[nor*3+2];
sawine@2:                     }
sawine@2:                     normalArray.push(x);
sawine@2:                     normalArray.push(y);
sawine@2:                     normalArray.push(z);
sawine@2:                     
sawine@2:                     facemap[array[i]] = index++;
sawine@2:                 }
sawine@2:                 
sawine@2:                 indexArray.push(facemap[array[i]]);
sawine@2:             }
sawine@2:         }
sawine@2:     }
sawine@2: 
sawine@2:     // set the VBOs
sawine@2:     obj.normalObject = obj.ctx.createBuffer();
sawine@2:     obj.ctx.bindBuffer(obj.ctx.ARRAY_BUFFER, obj.normalObject);
sawine@2:     obj.ctx.bufferData(obj.ctx.ARRAY_BUFFER, new WebGLFloatArray(normalArray), obj.ctx.STATIC_DRAW);
sawine@2: 
sawine@2:     obj.texCoordObject = obj.ctx.createBuffer();
sawine@2:     obj.ctx.bindBuffer(obj.ctx.ARRAY_BUFFER, obj.texCoordObject);
sawine@2:     obj.ctx.bufferData(obj.ctx.ARRAY_BUFFER, new WebGLFloatArray(textureArray), obj.ctx.STATIC_DRAW);
sawine@2: 
sawine@2:     obj.vertexObject = obj.ctx.createBuffer();
sawine@2:     obj.ctx.bindBuffer(obj.ctx.ARRAY_BUFFER, obj.vertexObject);
sawine@2:     obj.ctx.bufferData(obj.ctx.ARRAY_BUFFER, new WebGLFloatArray(vertexArray), obj.ctx.STATIC_DRAW);
sawine@2:     
sawine@2:     obj.numIndices = indexArray.length;
sawine@2:     obj.indexObject = obj.ctx.createBuffer();
sawine@2:     obj.ctx.bindBuffer(obj.ctx.ELEMENT_ARRAY_BUFFER, obj.indexObject);
sawine@2:     obj.ctx.bufferData(obj.ctx.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(indexArray), obj.ctx.STREAM_DRAW);
sawine@2:     
sawine@2:     obj.loaded = true;
sawine@2: }
sawine@2: 
sawine@2: //
sawine@2: // loadImageTexture
sawine@2: //
sawine@2: // Load the image at the passed url, place it in a new WebGLTexture object and return the WebGLTexture.
sawine@2: //
sawine@2: function loadImageTexture(ctx, url)
sawine@2: {
sawine@2:     var texture = ctx.createTexture();
sawine@2:     texture.image = new Image();
sawine@2:     texture.image.onload = function() { doLoadImageTexture(ctx, texture.image, texture) }
sawine@2:     texture.image.src = url;
sawine@2:     return texture;
sawine@2: }
sawine@2: 
sawine@2: function doLoadImageTexture(ctx, image, texture)
sawine@2: {
sawine@2:     ctx.enable(ctx.TEXTURE_2D);
sawine@2:     ctx.bindTexture(ctx.TEXTURE_2D, texture);
sawine@2:     ctx.texImage2D(ctx.TEXTURE_2D, 0, image);
sawine@2:     ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MAG_FILTER, ctx.LINEAR);
sawine@2:     ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.LINEAR_MIPMAP_LINEAR);
sawine@2:     ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.CLAMP_TO_EDGE);
sawine@2:     ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE);
sawine@2:     ctx.generateMipmap(ctx.TEXTURE_2D)
sawine@2:     ctx.bindTexture(ctx.TEXTURE_2D, 0);
sawine@2: }
sawine@2: 
sawine@2: //
sawine@2: // Framerate object
sawine@2: //
sawine@2: // This object keeps track of framerate and displays it as the innerHTML text of the 
sawine@2: // HTML element with the passed id. Once created you call snapshot at the end
sawine@2: // of every rendering cycle. Every 500ms the framerate is updated in the HTML element.
sawine@2: //
sawine@2: Framerate = function(id)
sawine@2: {
sawine@2:     this.numFramerates = 10;
sawine@2:     this.framerateUpdateInterval = 500;
sawine@2:     this.id = id;
sawine@2: 
sawine@2:     this.renderTime = -1;
sawine@2:     this.framerates = [ ];
sawine@2:     self = this;
sawine@2:     var fr = function() { self.updateFramerate() }
sawine@2:     setInterval(fr, this.framerateUpdateInterval);
sawine@2: }
sawine@2: 
sawine@2: Framerate.prototype.updateFramerate = function()
sawine@2: {
sawine@2:     var tot = 0;
sawine@2:     for (var i = 0; i < this.framerates.length; ++i)
sawine@2:         tot += this.framerates[i];
sawine@2:         
sawine@2:     var framerate = tot / this.framerates.length;
sawine@2:     framerate = Math.round(framerate);
sawine@2:     document.getElementById(this.id).innerHTML = "Framerate:"+framerate+"fps";
sawine@2: }
sawine@2: 
sawine@2: Framerate.prototype.snapshot = function()
sawine@2: {
sawine@2:     if (this.renderTime < 0)
sawine@2:         this.renderTime = new Date().getTime();
sawine@2:     else {
sawine@2:         var newTime = new Date().getTime();
sawine@2:         var t = newTime - this.renderTime;
sawine@2:         var framerate = 1000/t;
sawine@2:         this.framerates.push(framerate);
sawine@2:         while (this.framerates.length > this.numFramerates)
sawine@2:             this.framerates.shift();
sawine@2:         this.renderTime = newTime;
sawine@2:     }
sawine@2: }