//

 // initWebGL

 //

 // Initialize the Canvas element with the passed name as a WebGL object and return the

 // WebGLRenderingContext. 

 //

 // Load shaders with the passed names and create a program with them. Return this program 

 // in the 'program' property of the returned context.

 //

 // For each string in the passed attribs array, bind an attrib with that name at that index.

 // Once the attribs are bound, link the program and then use it.

 //

 // Set the clear color to the passed array (4 values) and set the clear depth to the passed value.

 // Enable depth testing and blending with a blend func of (SRC_ALPHA, ONE_MINUS_SRC_ALPHA)

 //

 function initWebGL(canvasName, vshader, fshader, attribs, clearColor, clearDepth)

 {

     var canvas = document.getElementById(canvasName);

     var gl = canvas.getContext("webkit-3d");

     // create our shaders

     var vertexShader = loadShader(gl, vshader);

     var fragmentShader = loadShader(gl, fshader);

     if (!vertexShader || !fragmentShader)

         return null;

     // Create the program object

     gl.program = gl.createProgram();

     if (!gl.program)

         return null;

     // Attach our two shaders to the program

     gl.attachShader (gl.program, vertexShader);

     gl.attachShader (gl.program, fragmentShader);

     // Bind attributes

     for (var i in attribs)

         gl.bindAttribLocation (gl.program, i, attribs[i]);

     // Link the program

     gl.linkProgram(gl.program);

     // Check the link status

     var linked = gl.getProgrami(gl.program, gl.LINK_STATUS);

     if (!linked) {

         // something went wrong with the link

         var error = gl.getProgramInfoLog (gl.program);

         console.log("Error in program linking:"+error);

         gl.deleteProgram(gl.program);

         gl.deleteProgram(fragmentShader);

         gl.deleteProgram(vertexShader);

         return null;

     }

     gl.useProgram(gl.program);

     gl.clearColor (clearColor[0], clearColor[1], clearColor[2], clearColor[3]);

     gl.clearDepth (clearDepth);

     gl.enable(gl.DEPTH_TEST);

     gl.enable(gl.BLEND);

     gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

     return gl;

 }

 //

 // loadShader

 //

 // 'shaderId' is the id of a <script> element containing the shader source string.

 // Load this shader and return the WebGLShader object corresponding to it.

 //

 function loadShader(ctx, shaderId)

 {

     var shaderScript = document.getElementById(shaderId);

     if (!shaderScript) {

         console.log("*** Error: shader script '"+shaderId+"' not found");

         return null;

     }

     if (shaderScript.type == "x-shader/x-vertex")

         var shaderType = ctx.VERTEX_SHADER;

     else if (shaderScript.type == "x-shader/x-fragment")

         var shaderType = ctx.FRAGMENT_SHADER;

     else {

         console.log("*** Error: shader script '"+shaderId+"' of undefined type '"+shaderScript.type+"'");       

         return null;

     }

     // Create the shader object

     var shader = ctx.createShader(shaderType);

     if (shader == null) {

         console.log("*** Error: unable to create shader '"+shaderId+"'");       

         return null;

     }

     // Load the shader source

     ctx.shaderSource(shader, shaderScript.text);

     // Compile the shader

     ctx.compileShader(shader);

     // Check the compile status

     var compiled = ctx.getShaderi(shader, ctx.COMPILE_STATUS);

     if (!compiled) {

         // Something went wrong during compilation; get the error

         var error = ctx.getShaderInfoLog(shader);

         console.log("*** Error compiling shader '"+shaderId+"':"+error);

         ctx.deleteShader(shader);

         return null;

     }

     return shader;

 }

 // 

 // makeBox

 //

 // Create a box with vertices, normals and texCoords. Create VBOs for each as well as the index array.

 // Return an object with the following properties:

 //

 //  normalObject        WebGLBuffer object for normals

 //  texCoordObject      WebGLBuffer object for texCoords

 //  vertexObject        WebGLBuffer object for vertices

 //  indexObject         WebGLBuffer object for indices

 //  numIndices          The number of indices in the indexObject

 // 

 function makeBox(ctx)

 {

     // box

     //    v6----- v5

     //   /|      /|

     //  v1------v0|

     //  | |     | |

     //  | |v7---|-|v4

     //  |/      |/

     //  v2------v3

     //

     // vertex coords array

     var vertices = new WebGLFloatArray(

         [  1, 1, 1,  -1, 1, 1,  -1,-1, 1,   1,-1, 1,    // v0-v1-v2-v3 front

            1, 1, 1,   1,-1, 1,   1,-1,-1,   1, 1,-1,    // v0-v3-v4-v5 right

            1, 1, 1,   1, 1,-1,  -1, 1,-1,  -1, 1, 1,    // v0-v5-v6-v1 top

           -1, 1, 1,  -1, 1,-1,  -1,-1,-1,  -1,-1, 1,    // v1-v6-v7-v2 left

           -1,-1,-1,   1,-1,-1,   1,-1, 1,  -1,-1, 1,    // v7-v4-v3-v2 bottom

            1,-1,-1,  -1,-1,-1,  -1, 1,-1,   1, 1,-1 ]   // v4-v7-v6-v5 back

     );

     // normal array

     var normals = new WebGLFloatArray(

         [  0, 0, 1,   0, 0, 1,   0, 0, 1,   0, 0, 1,     // v0-v1-v2-v3 front

            1, 0, 0,   1, 0, 0,   1, 0, 0,   1, 0, 0,     // v0-v3-v4-v5 right

            0, 1, 0,   0, 1, 0,   0, 1, 0,   0, 1, 0,     // v0-v5-v6-v1 top

           -1, 0, 0,  -1, 0, 0,  -1, 0, 0,  -1, 0, 0,     // v1-v6-v7-v2 left

            0,-1, 0,   0,-1, 0,   0,-1, 0,   0,-1, 0,     // v7-v4-v3-v2 bottom

            0, 0,-1,   0, 0,-1,   0, 0,-1,   0, 0,-1 ]    // v4-v7-v6-v5 back

        );

     // texCoord array

     var texCoords = new WebGLFloatArray(

         [  1, 1,   0, 1,   0, 0,   1, 0,    // v0-v1-v2-v3 front

            0, 1,   0, 0,   1, 0,   1, 1,    // v0-v3-v4-v5 right

            1, 0,   1, 1,   0, 1,   0, 0,    // v0-v5-v6-v1 top

            1, 1,   0, 1,   0, 0,   1, 0,    // v1-v6-v7-v2 left

            0, 0,   1, 0,   1, 1,   0, 1,    // v7-v4-v3-v2 bottom

            0, 0,   1, 0,   1, 1,   0, 1 ]   // v4-v7-v6-v5 back

        );

     // index array

     var indices = new WebGLUnsignedByteArray(

         [  0, 1, 2,   0, 2, 3,    // front

            4, 5, 6,   4, 6, 7,    // right

            8, 9,10,   8,10,11,    // top

           12,13,14,  12,14,15,    // left

           16,17,18,  16,18,19,    // bottom

           20,21,22,  20,22,23 ]   // back

       );

     var retval = { };

     retval.normalObject = ctx.createBuffer();

     ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.normalObject);

     ctx.bufferData(ctx.ARRAY_BUFFER, normals, ctx.STATIC_DRAW);

     retval.texCoordObject = ctx.createBuffer();

     ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.texCoordObject);

     ctx.bufferData(ctx.ARRAY_BUFFER, texCoords, ctx.STATIC_DRAW);

     retval.vertexObject = ctx.createBuffer();

     ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.vertexObject);

     ctx.bufferData(ctx.ARRAY_BUFFER, vertices, ctx.STATIC_DRAW);

     ctx.bindBuffer(ctx.ARRAY_BUFFER, 0);

     retval.indexObject = ctx.createBuffer();

     ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, retval.indexObject);

     ctx.bufferData(ctx.ELEMENT_ARRAY_BUFFER, indices, ctx.STATIC_DRAW);

     ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, 0);

     retval.numIndices = indices.length;

     return retval;

 }

 // 

 // makeSphere

 //

 // Create a sphere with the passed number of latitude and longitude bands and the passed radius. 

 // Sphere has vertices, normals and texCoords. Create VBOs for each as well as the index array.

 // Return an object with the following properties:

 //

 //  normalObject        WebGLBuffer object for normals

 //  texCoordObject      WebGLBuffer object for texCoords

 //  vertexObject        WebGLBuffer object for vertices

 //  indexObject         WebGLBuffer object for indices

 //  numIndices          The number of indices in the indexObject

 // 

 function makeSphere(ctx, radius, lats, longs)

 {

     var geometryData = [ ];

     var normalData = [ ];

     var texCoordData = [ ];

     var indexData = [ ];

     for (var latNumber = 0; latNumber <= lats; ++latNumber) {

         for (var longNumber = 0; longNumber <= longs; ++longNumber) {

             var theta = latNumber * Math.PI / lats;

             var phi = longNumber * 2 * Math.PI / longs;

             var sinTheta = Math.sin(theta);

             var sinPhi = Math.sin(phi);

             var cosTheta = Math.cos(theta);

             var cosPhi = Math.cos(phi);

             var x = cosPhi * sinTheta;

             var y = cosTheta;

             var z = sinPhi * sinTheta;

             var u = 1-(longNumber/longs);

             var v = latNumber/lats;

             normalData.push(x);

             normalData.push(y);

             normalData.push(z);

             texCoordData.push(u);

             texCoordData.push(v);

             geometryData.push(radius * x);

             geometryData.push(radius * y);

             geometryData.push(radius * z);

         }

     }

     longs += 1;

     for (var latNumber = 0; latNumber < lats; ++latNumber) {

         for (var longNumber = 0; longNumber < longs; ++longNumber) {

             var first = (latNumber * longs) + (longNumber % longs);

             var second = first + longs;

             indexData.push(first);

             indexData.push(second);

             indexData.push(first+1);

             indexData.push(second);

             indexData.push(second+1);

             indexData.push(first+1);

         }

     }

     var retval = { };

     retval.normalObject = ctx.createBuffer();

     ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.normalObject);

     ctx.bufferData(ctx.ARRAY_BUFFER, new WebGLFloatArray(normalData), ctx.STATIC_DRAW);

     retval.texCoordObject = ctx.createBuffer();

     ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.texCoordObject);

     ctx.bufferData(ctx.ARRAY_BUFFER, new WebGLFloatArray(texCoordData), ctx.STATIC_DRAW);

     retval.vertexObject = ctx.createBuffer();

     ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.vertexObject);

     ctx.bufferData(ctx.ARRAY_BUFFER, new WebGLFloatArray(geometryData), ctx.STATIC_DRAW);

     retval.numIndices = indexData.length;

     retval.indexObject = ctx.createBuffer();

     ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, retval.indexObject);

     ctx.bufferData(ctx.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(indexData), ctx.STREAM_DRAW);

     return retval;

 }

 //

 // loadObj

 //

 // Load a .obj file from the passed URL. Return an object with a 'loaded' property set to false.

 // When the object load is complete, the 'loaded' property becomes true and the following 

 // properties are set:

 //

 //  normalObject        WebGLBuffer object for normals

 //  texCoordObject      WebGLBuffer object for texCoords

 //  vertexObject        WebGLBuffer object for vertices

 //  indexObject         WebGLBuffer object for indices

 //  numIndices          The number of indices in the indexObject

 //  

 function loadObj(ctx, url)

 {

     var obj = { loaded : false };

     obj.ctx = ctx;

     var req = new XMLHttpRequest();

     req.obj = obj;

     req.onreadystatechange = function () { processLoadObj(req) };

     req.open("GET", url, true);

     req.send(null);

     return obj;

 }

 function processLoadObj(req) 

 {

     console.log("req="+req)

     // only if req shows "complete"

     if (req.readyState == 4) {

         doLoadObj(req.obj, req.responseText);

     }

 }

 function doLoadObj(obj, text)

 {

     vertexArray = [ ];

     normalArray = [ ];

     textureArray = [ ];

     indexArray = [ ];

     var vertex = [ ];

     var normal = [ ];

     var texture = [ ];

     var facemap = { };

     var index = 0;

     var lines = text.split("\n");

     for (var lineIndex in lines) {

         var line = lines[lineIndex].replace(/[ \t]+/g, " ").replace(/\s\s*$/, "");

         // ignore comments

         if (line[0] == "#")

             continue;

         var array = line.split(" ");

         if (array[0] == "v") {

             // vertex

             vertex.push(parseFloat(array[1]));

             vertex.push(parseFloat(array[2]));

             vertex.push(parseFloat(array[3]));

         }

         else if (array[0] == "vt") {

             // normal

             texture.push(parseFloat(array[1]));

             texture.push(parseFloat(array[2]));

         }

         else if (array[0] == "vn") {

             // normal

             normal.push(parseFloat(array[1]));

             normal.push(parseFloat(array[2]));

             normal.push(parseFloat(array[3]));

         }

         else if (array[0] == "f") {

             // face

             if (array.length != 4) {

                 console.log("*** Error: face '"+line+"' not handled");

                 continue;

             }

             for (var i = 1; i < 4; ++i) {

                 if (!(array[i] in facemap)) {

                     // add a new entry to the map and arrays

                     var f = array[i].split("/");

                     var vtx, nor, tex;

                     if (f.length == 1) {

                         vtx = parseInt(f[0]) - 1;

                         nor = vtx;

                         tex = vtx;

                     }

                     else if (f.length = 3) {

                         vtx = parseInt(f[0]) - 1;

                         tex = parseInt(f[1]) - 1;

                         nor = parseInt(f[2]) - 1;

                     }

                     else {

                         console.log("*** Error: did not understand face '"+array[i]+"'");

                         return null;

                     }

                     // do the vertices

                     var x = 0;

                     var y = 0;

                     var z = 0;

                     if (vtx * 3 + 2 < vertex.length) {

                         x = vertex[vtx*3];

                         y = vertex[vtx*3+1];

                         z = vertex[vtx*3+2];

                     }

                     vertexArray.push(x);

                     vertexArray.push(y);

                     vertexArray.push(z);

                     // do the textures

                     x = 0;

                     y = 0;

                     if (tex * 2 + 1 < texture.length) {

                         x = texture[tex*2];

                         y = texture[tex*2+1];

                     }

                     textureArray.push(x);

                     textureArray.push(y);

                     // do the normals

                     x = 0;

                     y = 0;

                     z = 1;

                     if (nor * 3 + 2 < normal.length) {

                         x = normal[nor*3];

                         y = normal[nor*3+1];

                         z = normal[nor*3+2];

                     }

                     normalArray.push(x);

                     normalArray.push(y);

                     normalArray.push(z);

                     facemap[array[i]] = index++;

                 }

                 indexArray.push(facemap[array[i]]);

             }

         }

     }

     // set the VBOs

     obj.normalObject = obj.ctx.createBuffer();

     obj.ctx.bindBuffer(obj.ctx.ARRAY_BUFFER, obj.normalObject);

     obj.ctx.bufferData(obj.ctx.ARRAY_BUFFER, new WebGLFloatArray(normalArray), obj.ctx.STATIC_DRAW);

     obj.texCoordObject = obj.ctx.createBuffer();

     obj.ctx.bindBuffer(obj.ctx.ARRAY_BUFFER, obj.texCoordObject);

     obj.ctx.bufferData(obj.ctx.ARRAY_BUFFER, new WebGLFloatArray(textureArray), obj.ctx.STATIC_DRAW);

     obj.vertexObject = obj.ctx.createBuffer();

     obj.ctx.bindBuffer(obj.ctx.ARRAY_BUFFER, obj.vertexObject);

     obj.ctx.bufferData(obj.ctx.ARRAY_BUFFER, new WebGLFloatArray(vertexArray), obj.ctx.STATIC_DRAW);

     obj.numIndices = indexArray.length;

     obj.indexObject = obj.ctx.createBuffer();

     obj.ctx.bindBuffer(obj.ctx.ELEMENT_ARRAY_BUFFER, obj.indexObject);

     obj.ctx.bufferData(obj.ctx.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(indexArray), obj.ctx.STREAM_DRAW);

     obj.loaded = true;

 }

 //

 // loadImageTexture

 //

 // Load the image at the passed url, place it in a new WebGLTexture object and return the WebGLTexture.

 //

 function loadImageTexture(ctx, url)

 {

     var texture = ctx.createTexture();

     texture.image = new Image();

     texture.image.onload = function() { doLoadImageTexture(ctx, texture.image, texture) }

     texture.image.src = url;

     return texture;

 }

 function doLoadImageTexture(ctx, image, texture)

 {

     ctx.enable(ctx.TEXTURE_2D);

     ctx.bindTexture(ctx.TEXTURE_2D, texture);

     ctx.texImage2D(ctx.TEXTURE_2D, 0, image);

     ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MAG_FILTER, ctx.LINEAR);

     ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.LINEAR_MIPMAP_LINEAR);

     ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.CLAMP_TO_EDGE);

     ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE);

     ctx.generateMipmap(ctx.TEXTURE_2D)

     ctx.bindTexture(ctx.TEXTURE_2D, 0);

 }

 //

 // Framerate object

 //

 // This object keeps track of framerate and displays it as the innerHTML text of the 

 // HTML element with the passed id. Once created you call snapshot at the end

 // of every rendering cycle. Every 500ms the framerate is updated in the HTML element.

 //

 Framerate = function(id)

 {

     this.numFramerates = 10;

     this.framerateUpdateInterval = 500;

     this.id = id;

     this.renderTime = -1;

     this.framerates = [ ];

     self = this;

     var fr = function() { self.updateFramerate() }

     setInterval(fr, this.framerateUpdateInterval);

 }

 Framerate.prototype.updateFramerate = function()

 {

     var tot = 0;

     for (var i = 0; i < this.framerates.length; ++i)

         tot += this.framerates[i];

     var framerate = tot / this.framerates.length;

     framerate = Math.round(framerate);

     document.getElementById(this.id).innerHTML = "Framerate:"+framerate+"fps";

 }

 Framerate.prototype.snapshot = function()

 {

     if (this.renderTime < 0)

         this.renderTime = new Date().getTime();

     else {

         var newTime = new Date().getTime();

         var t = newTime - this.renderTime;

         var framerate = 1000/t;

         this.framerates.push(framerate);

         while (this.framerates.length > this.numFramerates)

             this.framerates.shift();

         this.renderTime = newTime;

     }

 }