michael@0: /*
michael@0: Copyright (C) 2011 Apple Computer, Inc.  All rights reserved.
michael@0: 
michael@0: Redistribution and use in source and binary forms, with or without
michael@0: modification, are permitted provided that the following conditions
michael@0: are met:
michael@0: 1. Redistributions of source code must retain the above copyright
michael@0:    notice, this list of conditions and the following disclaimer.
michael@0: 2. Redistributions in binary form must reproduce the above copyright
michael@0:    notice, this list of conditions and the following disclaimer in the
michael@0:    documentation and/or other materials provided with the distribution.
michael@0: 
michael@0: THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
michael@0: EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
michael@0: IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
michael@0: PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE COMPUTER, INC. OR
michael@0: CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
michael@0: EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
michael@0: PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
michael@0: PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
michael@0: OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
michael@0: (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
michael@0: OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
michael@0: */
michael@0: 
michael@0: function webglTestLog(msg) {
michael@0:   if (window.console && window.console.log) {
michael@0:     window.console.log(msg);
michael@0:   }
michael@0:   if (document.getElementById("console")) {
michael@0:     var log = document.getElementById("console");
michael@0:     log.innerHTML += msg + "<br>";
michael@0:   }
michael@0: }
michael@0: 
michael@0: //
michael@0: // create3DContext
michael@0: //
michael@0: // Returns the WebGLRenderingContext for any known implementation.
michael@0: //
michael@0: function create3DContext(canvas, attributes)
michael@0: {
michael@0:     if (!canvas)
michael@0:         canvas = document.createElement("canvas");
michael@0:     var names = ["webgl", "experimental-webgl"];
michael@0:     var context = null;
michael@0:     for (var i = 0; i < names.length; ++i) {
michael@0:       try {
michael@0:         context = canvas.getContext(names[i], attributes);
michael@0:       } catch (e) {
michael@0:       }
michael@0:       if (context) {
michael@0:         break;
michael@0:       }
michael@0:     }
michael@0:     if (!context) {
michael@0:         throw "Unable to fetch WebGL rendering context for Canvas";
michael@0:     }
michael@0:     return context;
michael@0: }
michael@0: 
michael@0: function createGLErrorWrapper(context, fname) {
michael@0:     return function() {
michael@0:         var rv = context[fname].apply(context, arguments);
michael@0:         var err = context.getError();
michael@0:         if (err != 0)
michael@0:             throw "GL error " + err + " in " + fname;
michael@0:         return rv;
michael@0:     };
michael@0: }
michael@0: 
michael@0: function create3DContextWithWrapperThatThrowsOnGLError(canvas, attributes) {
michael@0:   var context = create3DContext(canvas, attributes);
michael@0:   // Thanks to Ilmari Heikkinen for the idea on how to implement this so elegantly.
michael@0:   var wrap = {};
michael@0:   for (var i in context) {
michael@0:     try {
michael@0:       if (typeof context[i] == 'function') {
michael@0:         wrap[i] = createGLErrorWrapper(context, i);
michael@0:       } else {
michael@0:         wrap[i] = context[i];
michael@0:       }
michael@0:     } catch (e) {
michael@0:       webglTestLog("createContextWrapperThatThrowsOnGLError: Error accessing " + i);
michael@0:     }
michael@0:   }
michael@0:   wrap.getError = function() {
michael@0:       return context.getError();
michael@0:   };
michael@0:   return wrap;
michael@0: }
michael@0: 
michael@0: function getGLErrorAsString(ctx, err) {
michael@0:   if (err === ctx.NO_ERROR) {
michael@0:     return "NO_ERROR";
michael@0:   }
michael@0:   for (var name in ctx) {
michael@0:     if (ctx[name] === err) {
michael@0:       return name;
michael@0:     }
michael@0:   }
michael@0:   return "0x" + err.toString(16);
michael@0: }
michael@0: 
michael@0: // Pass undefined for glError to test that it at least throws some error
michael@0: function shouldGenerateGLError(ctx, glErrors, evalStr) {
michael@0:   if (!glErrors.length) {
michael@0:     glErrors = [glErrors];
michael@0:   }
michael@0:   var exception;
michael@0:   try {
michael@0:     eval(evalStr);
michael@0:   } catch (e) {
michael@0:     exception = e;
michael@0:   }
michael@0:   if (exception) {
michael@0:     testFailed(evalStr + " threw exception " + exception);
michael@0:   } else {
michael@0:     var err = ctx.getError();
michael@0:     if (glErrors.indexOf(err) < 0) {
michael@0:       var errStrs = [];
michael@0:       for (var ii = 0; ii < glErrors.length; ++ii) {
michael@0:         errStrs.push(getGLErrorAsString(ctx, glErrors[ii]));
michael@0:       }
michael@0:       testFailed(evalStr + " expected: " + errStrs.join(" or ") + ". Was " + getGLErrorAsString(ctx, err) + ".");
michael@0:     } else {
michael@0:       testPassed(evalStr + " generated expected GL error: " + getGLErrorAsString(ctx, err) + ".");
michael@0:     }
michael@0:   }
michael@0: }
michael@0: 
michael@0: /**
michael@0:  * Tests that the first error GL returns is the specified error.
michael@0:  * @param {!WebGLContext} gl The WebGLContext to use.
michael@0:  * @param {number|!Array.<number>} glError The expected gl
michael@0:  *        error. Multiple errors can be passed in using an
michael@0:  *        array.
michael@0:  * @param {string} opt_msg Optional additional message.
michael@0:  */
michael@0: function glErrorShouldBe(gl, glErrors, opt_msg) {
michael@0:   if (!glErrors.length) {
michael@0:     glErrors = [glErrors];
michael@0:   }
michael@0:   opt_msg = opt_msg || "";
michael@0:   var err = gl.getError();
michael@0:   var ndx = glErrors.indexOf(err);
michael@0:   if (ndx < 0) {
michael@0:     if (glErrors.length == 1) {
michael@0:       testFailed("getError expected: " + getGLErrorAsString(gl, glErrors[0]) +
michael@0:                  ". Was " + getGLErrorAsString(gl, err) + " : " + opt_msg);
michael@0:     } else {
michael@0:       var errs = [];
michael@0:       for (var ii = 0; ii < glErrors.length; ++ii) {
michael@0:         errs.push(getGLErrorAsString(gl, glErrors[ii]));
michael@0:       }
michael@0:       testFailed("getError expected one of: [" + errs.join(", ") +
michael@0:                  "]. Was " + getGLErrorAsString(gl, err) + " : " + opt_msg);
michael@0:     }
michael@0:   } else {
michael@0:     testPassed("getError was expected value: " +
michael@0:                 getGLErrorAsString(gl, err) + " : " + opt_msg);
michael@0:   }
michael@0: };
michael@0: 
michael@0: //
michael@0: // createProgram
michael@0: //
michael@0: // Create and return a program object, attaching each of the given shaders.
michael@0: //
michael@0: // If attribs are given, bind an attrib with that name at that index.
michael@0: //
michael@0: function createProgram(gl, vshaders, fshaders, attribs)
michael@0: {
michael@0:   if (typeof(vshaders) == "string")
michael@0:     vshaders = [vshaders];
michael@0:   if (typeof(fshaders) == "string")
michael@0:     fshaders = [fshaders];
michael@0: 
michael@0:   var shaders = [];
michael@0:   var i;
michael@0: 
michael@0:   for (i = 0; i < vshaders.length; ++i) {
michael@0:     var shader = loadShader(gl, vshaders[i], gl.VERTEX_SHADER);
michael@0:     if (!shader)
michael@0:       return null;
michael@0:     shaders.push(shader);
michael@0:   }
michael@0: 
michael@0:   for (i = 0; i < fshaders.length; ++i) {
michael@0:     var shader = loadShader(gl, fshaders[i], gl.FRAGMENT_SHADER);
michael@0:     if (!shader)
michael@0:       return null;
michael@0:     shaders.push(shader);
michael@0:   }
michael@0: 
michael@0:   var prog = gl.createProgram();
michael@0:   for (i = 0; i < shaders.length; ++i) {
michael@0:     gl.attachShader(prog, shaders[i]);
michael@0:   }
michael@0: 
michael@0:   if (attribs) {
michael@0:     for (var i = 0; i < attribs.length; ++i) {
michael@0:       gl.bindAttribLocation(prog, i, attribs[i]);
michael@0:     }
michael@0:   }
michael@0: 
michael@0:   gl.linkProgram(prog);
michael@0: 
michael@0:   // Check the link status
michael@0:   var linked = gl.getProgramParameter(prog, gl.LINK_STATUS);
michael@0:   if (!linked) {
michael@0:     // something went wrong with the link
michael@0:     var error = gl.getProgramInfoLog(prog);
michael@0:     webglTestLog("Error in program linking:" + error);
michael@0: 
michael@0:     gl.deleteProgram(prog);
michael@0:     for (i = 0; i < shaders.length; ++i)
michael@0:       gl.deleteShader(shaders[i]);
michael@0:     return null;
michael@0:   }
michael@0: 
michael@0:   return prog;
michael@0: }
michael@0: 
michael@0: //
michael@0: // initWebGL
michael@0: //
michael@0: // Initialize the Canvas element with the passed name as a WebGL object and return the
michael@0: // WebGLRenderingContext.
michael@0: //
michael@0: // Load shaders with the passed names and create a program with them. Return this program
michael@0: // in the 'program' property of the returned context.
michael@0: //
michael@0: // For each string in the passed attribs array, bind an attrib with that name at that index.
michael@0: // Once the attribs are bound, link the program and then use it.
michael@0: //
michael@0: // Set the clear color to the passed array (4 values) and set the clear depth to the passed value.
michael@0: // Enable depth testing and blending with a blend func of (SRC_ALPHA, ONE_MINUS_SRC_ALPHA)
michael@0: //
michael@0: function initWebGL(canvasName, vshader, fshader, attribs, clearColor, clearDepth, contextAttribs)
michael@0: {
michael@0:     var canvas = document.getElementById(canvasName);
michael@0:     var gl = create3DContext(canvas, contextAttribs);
michael@0:     if (!gl) {
michael@0:         alert("No WebGL context found");
michael@0:         return null;
michael@0:     }
michael@0: 
michael@0:     // Create the program object
michael@0:     gl.program = createProgram(gl, vshader, fshader, attribs);
michael@0:     if (!gl.program)
michael@0:         return null;
michael@0: 
michael@0:     gl.useProgram(gl.program);
michael@0: 
michael@0:     gl.clearColor(clearColor[0], clearColor[1], clearColor[2], clearColor[3]);
michael@0:     gl.clearDepth(clearDepth);
michael@0: 
michael@0:     gl.enable(gl.DEPTH_TEST);
michael@0:     gl.enable(gl.BLEND);
michael@0:     gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
michael@0: 
michael@0:     return gl;
michael@0: }
michael@0: 
michael@0: //
michael@0: // getShaderSource
michael@0: //
michael@0: // Load the source from the passed shader file.
michael@0: //
michael@0: function getShaderSource(file)
michael@0: {
michael@0:     var xhr = new XMLHttpRequest();
michael@0:     xhr.open("GET", file, false);
michael@0:     xhr.send();
michael@0:     return xhr.responseText;
michael@0: }
michael@0: 
michael@0: 
michael@0: //
michael@0: // loadShader
michael@0: //
michael@0: // 'shader' is either the id of a <script> element containing the shader source
michael@0: // string, the shader string itself,  or the URL of a file containing the shader
michael@0: // source. Load this shader and return the WebGLShader object corresponding to
michael@0: // it.
michael@0: //
michael@0: function loadShader(ctx, shaderId, shaderType, isFile)
michael@0: {
michael@0:     var shaderSource = "";
michael@0: 
michael@0:     if (isFile)
michael@0:         shaderSource = getShaderSource(shaderId);
michael@0:     else {
michael@0:         var shaderScript = document.getElementById(shaderId);
michael@0:         if (!shaderScript) {
michael@0:             shaderSource = shaderId;
michael@0:         } else {
michael@0:             if (shaderScript.type == "x-shader/x-vertex") {
michael@0:                 shaderType = ctx.VERTEX_SHADER;
michael@0:             } else if (shaderScript.type == "x-shader/x-fragment") {
michael@0:                 shaderType = ctx.FRAGMENT_SHADER;
michael@0:             } else if (shaderType != ctx.VERTEX_SHADER && shaderType != ctx.FRAGMENT_SHADER) {
michael@0:                 webglTestLog("*** Error: unknown shader type");
michael@0:                 return null;
michael@0:             }
michael@0: 
michael@0:             shaderSource = shaderScript.text;
michael@0:         }
michael@0:     }
michael@0: 
michael@0:     // Create the shader object
michael@0:     var shader = ctx.createShader(shaderType);
michael@0:     if (shader == null) {
michael@0:         webglTestLog("*** Error: unable to create shader '"+shaderId+"'");
michael@0:         return null;
michael@0:     }
michael@0: 
michael@0:     // Load the shader source
michael@0:     ctx.shaderSource(shader, shaderSource);
michael@0: 
michael@0:     // Compile the shader
michael@0:     ctx.compileShader(shader);
michael@0: 
michael@0:     // Check the compile status
michael@0:     var compiled = ctx.getShaderParameter(shader, ctx.COMPILE_STATUS);
michael@0:     if (!compiled) {
michael@0:         // Something went wrong during compilation; get the error
michael@0:         var error = ctx.getShaderInfoLog(shader);
michael@0:         webglTestLog("*** Error compiling shader '"+shader+"':"+error);
michael@0:         ctx.deleteShader(shader);
michael@0:         return null;
michael@0:     }
michael@0: 
michael@0:     return shader;
michael@0: }
michael@0: 
michael@0: function loadShaderFromFile(ctx, file, type)
michael@0: {
michael@0:     return loadShader(ctx, file, type, true);
michael@0: }
michael@0: 
michael@0: function loadShaderFromScript(ctx, script)
michael@0: {
michael@0:     return loadShader(ctx, script, 0, false);
michael@0: }
michael@0: 
michael@0: function loadStandardProgram(context) {
michael@0:     var program = context.createProgram();
michael@0:     context.attachShader(program, loadStandardVertexShader(context));
michael@0:     context.attachShader(program, loadStandardFragmentShader(context));
michael@0:     context.linkProgram(program);
michael@0:     return program;
michael@0: }
michael@0: 
michael@0: function loadProgram(context, vertexShaderPath, fragmentShaderPath, isFile) {
michael@0:     isFile = (isFile === undefined) ? true : isFile;
michael@0:     var program = context.createProgram();
michael@0:     context.attachShader(program, loadShader(context, vertexShaderPath, context.VERTEX_SHADER, isFile));
michael@0:     context.attachShader(program, loadShader(context, fragmentShaderPath, context.FRAGMENT_SHADER, isFile));
michael@0:     context.linkProgram(program);
michael@0:     return program;
michael@0: }
michael@0: 
michael@0: var getBasePathForResources = function() {
michael@0:   var expectedBase = "webgl-test.js";
michael@0:   var scripts = document.getElementsByTagName('script');
michael@0:   for (var script, i = 0; script = scripts[i]; i++) {
michael@0:     var src = script.src;
michael@0:     var l = src.length;
michael@0:     if (src.substr(l - expectedBase.length) == expectedBase) {
michael@0:       return src.substr(0, l - expectedBase.length);
michael@0:     }
michael@0:   }
michael@0:   throw 'oops';
michael@0: };
michael@0: 
michael@0: 
michael@0: function loadStandardVertexShader(context) {
michael@0:     return loadShader(
michael@0:         context,
michael@0:         getBasePathForResources() + "vertexShader.vert",
michael@0:         context.VERTEX_SHADER,
michael@0:         true);
michael@0: }
michael@0: 
michael@0: function loadStandardFragmentShader(context) {
michael@0:     return loadShader(
michael@0:         context,
michael@0:         getBasePathForResources() + "fragmentShader.frag",
michael@0:         context.FRAGMENT_SHADER,
michael@0:         true);
michael@0: }
michael@0: 
michael@0: //
michael@0: // makeBox
michael@0: //
michael@0: // Create a box with vertices, normals and texCoords. Create VBOs for each as well as the index array.
michael@0: // Return an object with the following properties:
michael@0: //
michael@0: //  normalObject        WebGLBuffer object for normals
michael@0: //  texCoordObject      WebGLBuffer object for texCoords
michael@0: //  vertexObject        WebGLBuffer object for vertices
michael@0: //  indexObject         WebGLBuffer object for indices
michael@0: //  numIndices          The number of indices in the indexObject
michael@0: //
michael@0: function makeBox(ctx)
michael@0: {
michael@0:     // box
michael@0:     //    v6----- v5
michael@0:     //   /|      /|
michael@0:     //  v1------v0|
michael@0:     //  | |     | |
michael@0:     //  | |v7---|-|v4
michael@0:     //  |/      |/
michael@0:     //  v2------v3
michael@0:     //
michael@0:     // vertex coords array
michael@0:     var vertices = new Float32Array(
michael@0:         [  1, 1, 1,  -1, 1, 1,  -1,-1, 1,   1,-1, 1,    // v0-v1-v2-v3 front
michael@0:            1, 1, 1,   1,-1, 1,   1,-1,-1,   1, 1,-1,    // v0-v3-v4-v5 right
michael@0:            1, 1, 1,   1, 1,-1,  -1, 1,-1,  -1, 1, 1,    // v0-v5-v6-v1 top
michael@0:           -1, 1, 1,  -1, 1,-1,  -1,-1,-1,  -1,-1, 1,    // v1-v6-v7-v2 left
michael@0:           -1,-1,-1,   1,-1,-1,   1,-1, 1,  -1,-1, 1,    // v7-v4-v3-v2 bottom
michael@0:            1,-1,-1,  -1,-1,-1,  -1, 1,-1,   1, 1,-1 ]   // v4-v7-v6-v5 back
michael@0:     );
michael@0: 
michael@0:     // normal array
michael@0:     var normals = new Float32Array(
michael@0:         [  0, 0, 1,   0, 0, 1,   0, 0, 1,   0, 0, 1,     // v0-v1-v2-v3 front
michael@0:            1, 0, 0,   1, 0, 0,   1, 0, 0,   1, 0, 0,     // v0-v3-v4-v5 right
michael@0:            0, 1, 0,   0, 1, 0,   0, 1, 0,   0, 1, 0,     // v0-v5-v6-v1 top
michael@0:           -1, 0, 0,  -1, 0, 0,  -1, 0, 0,  -1, 0, 0,     // v1-v6-v7-v2 left
michael@0:            0,-1, 0,   0,-1, 0,   0,-1, 0,   0,-1, 0,     // v7-v4-v3-v2 bottom
michael@0:            0, 0,-1,   0, 0,-1,   0, 0,-1,   0, 0,-1 ]    // v4-v7-v6-v5 back
michael@0:        );
michael@0: 
michael@0: 
michael@0:     // texCoord array
michael@0:     var texCoords = new Float32Array(
michael@0:         [  1, 1,   0, 1,   0, 0,   1, 0,    // v0-v1-v2-v3 front
michael@0:            0, 1,   0, 0,   1, 0,   1, 1,    // v0-v3-v4-v5 right
michael@0:            1, 0,   1, 1,   0, 1,   0, 0,    // v0-v5-v6-v1 top
michael@0:            1, 1,   0, 1,   0, 0,   1, 0,    // v1-v6-v7-v2 left
michael@0:            0, 0,   1, 0,   1, 1,   0, 1,    // v7-v4-v3-v2 bottom
michael@0:            0, 0,   1, 0,   1, 1,   0, 1 ]   // v4-v7-v6-v5 back
michael@0:        );
michael@0: 
michael@0:     // index array
michael@0:     var indices = new Uint8Array(
michael@0:         [  0, 1, 2,   0, 2, 3,    // front
michael@0:            4, 5, 6,   4, 6, 7,    // right
michael@0:            8, 9,10,   8,10,11,    // top
michael@0:           12,13,14,  12,14,15,    // left
michael@0:           16,17,18,  16,18,19,    // bottom
michael@0:           20,21,22,  20,22,23 ]   // back
michael@0:       );
michael@0: 
michael@0:     var retval = { };
michael@0: 
michael@0:     retval.normalObject = ctx.createBuffer();
michael@0:     ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.normalObject);
michael@0:     ctx.bufferData(ctx.ARRAY_BUFFER, normals, ctx.STATIC_DRAW);
michael@0: 
michael@0:     retval.texCoordObject = ctx.createBuffer();
michael@0:     ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.texCoordObject);
michael@0:     ctx.bufferData(ctx.ARRAY_BUFFER, texCoords, ctx.STATIC_DRAW);
michael@0: 
michael@0:     retval.vertexObject = ctx.createBuffer();
michael@0:     ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.vertexObject);
michael@0:     ctx.bufferData(ctx.ARRAY_BUFFER, vertices, ctx.STATIC_DRAW);
michael@0: 
michael@0:     ctx.bindBuffer(ctx.ARRAY_BUFFER, 0);
michael@0: 
michael@0:     retval.indexObject = ctx.createBuffer();
michael@0:     ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, retval.indexObject);
michael@0:     ctx.bufferData(ctx.ELEMENT_ARRAY_BUFFER, indices, ctx.STATIC_DRAW);
michael@0:     ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, 0);
michael@0: 
michael@0:     retval.numIndices = indices.length;
michael@0: 
michael@0:     return retval;
michael@0: }
michael@0: 
michael@0: //
michael@0: // makeSphere
michael@0: //
michael@0: // Create a sphere with the passed number of latitude and longitude bands and the passed radius.
michael@0: // Sphere has vertices, normals and texCoords. Create VBOs for each as well as the index array.
michael@0: // Return an object with the following properties:
michael@0: //
michael@0: //  normalObject        WebGLBuffer object for normals
michael@0: //  texCoordObject      WebGLBuffer object for texCoords
michael@0: //  vertexObject        WebGLBuffer object for vertices
michael@0: //  indexObject         WebGLBuffer object for indices
michael@0: //  numIndices          The number of indices in the indexObject
michael@0: //
michael@0: function makeSphere(ctx, radius, lats, longs)
michael@0: {
michael@0:     var geometryData = [ ];
michael@0:     var normalData = [ ];
michael@0:     var texCoordData = [ ];
michael@0:     var indexData = [ ];
michael@0: 
michael@0:     for (var latNumber = 0; latNumber <= lats; ++latNumber) {
michael@0:         for (var longNumber = 0; longNumber <= longs; ++longNumber) {
michael@0:             var theta = latNumber * Math.PI / lats;
michael@0:             var phi = longNumber * 2 * Math.PI / longs;
michael@0:             var sinTheta = Math.sin(theta);
michael@0:             var sinPhi = Math.sin(phi);
michael@0:             var cosTheta = Math.cos(theta);
michael@0:             var cosPhi = Math.cos(phi);
michael@0: 
michael@0:             var x = cosPhi * sinTheta;
michael@0:             var y = cosTheta;
michael@0:             var z = sinPhi * sinTheta;
michael@0:             var u = 1-(longNumber/longs);
michael@0:             var v = latNumber/lats;
michael@0: 
michael@0:             normalData.push(x);
michael@0:             normalData.push(y);
michael@0:             normalData.push(z);
michael@0:             texCoordData.push(u);
michael@0:             texCoordData.push(v);
michael@0:             geometryData.push(radius * x);
michael@0:             geometryData.push(radius * y);
michael@0:             geometryData.push(radius * z);
michael@0:         }
michael@0:     }
michael@0: 
michael@0:     longs += 1;
michael@0:     for (var latNumber = 0; latNumber < lats; ++latNumber) {
michael@0:         for (var longNumber = 0; longNumber < longs; ++longNumber) {
michael@0:             var first = (latNumber * longs) + (longNumber % longs);
michael@0:             var second = first + longs;
michael@0:             indexData.push(first);
michael@0:             indexData.push(second);
michael@0:             indexData.push(first+1);
michael@0: 
michael@0:             indexData.push(second);
michael@0:             indexData.push(second+1);
michael@0:             indexData.push(first+1);
michael@0:         }
michael@0:     }
michael@0: 
michael@0:     var retval = { };
michael@0: 
michael@0:     retval.normalObject = ctx.createBuffer();
michael@0:     ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.normalObject);
michael@0:     ctx.bufferData(ctx.ARRAY_BUFFER, new Float32Array(normalData), ctx.STATIC_DRAW);
michael@0: 
michael@0:     retval.texCoordObject = ctx.createBuffer();
michael@0:     ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.texCoordObject);
michael@0:     ctx.bufferData(ctx.ARRAY_BUFFER, new Float32Array(texCoordData), ctx.STATIC_DRAW);
michael@0: 
michael@0:     retval.vertexObject = ctx.createBuffer();
michael@0:     ctx.bindBuffer(ctx.ARRAY_BUFFER, retval.vertexObject);
michael@0:     ctx.bufferData(ctx.ARRAY_BUFFER, new Float32Array(geometryData), ctx.STATIC_DRAW);
michael@0: 
michael@0:     retval.numIndices = indexData.length;
michael@0:     retval.indexObject = ctx.createBuffer();
michael@0:     ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, retval.indexObject);
michael@0:     ctx.bufferData(ctx.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexData), ctx.STREAM_DRAW);
michael@0: 
michael@0:     return retval;
michael@0: }
michael@0: 
michael@0: //
michael@0: // loadObj
michael@0: //
michael@0: // Load a .obj file from the passed URL. Return an object with a 'loaded' property set to false.
michael@0: // When the object load is complete, the 'loaded' property becomes true and the following
michael@0: // properties are set:
michael@0: //
michael@0: //  normalObject        WebGLBuffer object for normals
michael@0: //  texCoordObject      WebGLBuffer object for texCoords
michael@0: //  vertexObject        WebGLBuffer object for vertices
michael@0: //  indexObject         WebGLBuffer object for indices
michael@0: //  numIndices          The number of indices in the indexObject
michael@0: //
michael@0: function loadObj(ctx, url)
michael@0: {
michael@0:     var obj = { loaded : false };
michael@0:     obj.ctx = ctx;
michael@0:     var req = new XMLHttpRequest();
michael@0:     req.obj = obj;
michael@0:     req.onreadystatechange = function () { processLoadObj(req) };
michael@0:     req.open("GET", url, true);
michael@0:     req.send(null);
michael@0:     return obj;
michael@0: }
michael@0: 
michael@0: function processLoadObj(req)
michael@0: {
michael@0:     webglTestLog("req="+req)
michael@0:     // only if req shows "complete"
michael@0:     if (req.readyState == 4) {
michael@0:         doLoadObj(req.obj, req.responseText);
michael@0:     }
michael@0: }
michael@0: 
michael@0: function doLoadObj(obj, text)
michael@0: {
michael@0:     vertexArray = [ ];
michael@0:     normalArray = [ ];
michael@0:     textureArray = [ ];
michael@0:     indexArray = [ ];
michael@0: 
michael@0:     var vertex = [ ];
michael@0:     var normal = [ ];
michael@0:     var texture = [ ];
michael@0:     var facemap = { };
michael@0:     var index = 0;
michael@0: 
michael@0:     var lines = text.split("\n");
michael@0:     for (var lineIndex in lines) {
michael@0:         var line = lines[lineIndex].replace(/[ \t]+/g, " ").replace(/\s\s*$/, "");
michael@0: 
michael@0:         // ignore comments
michael@0:         if (line[0] == "#")
michael@0:             continue;
michael@0: 
michael@0:         var array = line.split(" ");
michael@0:         if (array[0] == "v") {
michael@0:             // vertex
michael@0:             vertex.push(parseFloat(array[1]));
michael@0:             vertex.push(parseFloat(array[2]));
michael@0:             vertex.push(parseFloat(array[3]));
michael@0:         }
michael@0:         else if (array[0] == "vt") {
michael@0:             // normal
michael@0:             texture.push(parseFloat(array[1]));
michael@0:             texture.push(parseFloat(array[2]));
michael@0:         }
michael@0:         else if (array[0] == "vn") {
michael@0:             // normal
michael@0:             normal.push(parseFloat(array[1]));
michael@0:             normal.push(parseFloat(array[2]));
michael@0:             normal.push(parseFloat(array[3]));
michael@0:         }
michael@0:         else if (array[0] == "f") {
michael@0:             // face
michael@0:             if (array.length != 4) {
michael@0:                 webglTestLog("*** Error: face '"+line+"' not handled");
michael@0:                 continue;
michael@0:             }
michael@0: 
michael@0:             for (var i = 1; i < 4; ++i) {
michael@0:                 if (!(array[i] in facemap)) {
michael@0:                     // add a new entry to the map and arrays
michael@0:                     var f = array[i].split("/");
michael@0:                     var vtx, nor, tex;
michael@0: 
michael@0:                     if (f.length == 1) {
michael@0:                         vtx = parseInt(f[0]) - 1;
michael@0:                         nor = vtx;
michael@0:                         tex = vtx;
michael@0:                     }
michael@0:                     else if (f.length = 3) {
michael@0:                         vtx = parseInt(f[0]) - 1;
michael@0:                         tex = parseInt(f[1]) - 1;
michael@0:                         nor = parseInt(f[2]) - 1;
michael@0:                     }
michael@0:                     else {
michael@0:                         webglTestLog("*** Error: did not understand face '"+array[i]+"'");
michael@0:                         return null;
michael@0:                     }
michael@0: 
michael@0:                     // do the vertices
michael@0:                     var x = 0;
michael@0:                     var y = 0;
michael@0:                     var z = 0;
michael@0:                     if (vtx * 3 + 2 < vertex.length) {
michael@0:                         x = vertex[vtx*3];
michael@0:                         y = vertex[vtx*3+1];
michael@0:                         z = vertex[vtx*3+2];
michael@0:                     }
michael@0:                     vertexArray.push(x);
michael@0:                     vertexArray.push(y);
michael@0:                     vertexArray.push(z);
michael@0: 
michael@0:                     // do the textures
michael@0:                     x = 0;
michael@0:                     y = 0;
michael@0:                     if (tex * 2 + 1 < texture.length) {
michael@0:                         x = texture[tex*2];
michael@0:                         y = texture[tex*2+1];
michael@0:                     }
michael@0:                     textureArray.push(x);
michael@0:                     textureArray.push(y);
michael@0: 
michael@0:                     // do the normals
michael@0:                     x = 0;
michael@0:                     y = 0;
michael@0:                     z = 1;
michael@0:                     if (nor * 3 + 2 < normal.length) {
michael@0:                         x = normal[nor*3];
michael@0:                         y = normal[nor*3+1];
michael@0:                         z = normal[nor*3+2];
michael@0:                     }
michael@0:                     normalArray.push(x);
michael@0:                     normalArray.push(y);
michael@0:                     normalArray.push(z);
michael@0: 
michael@0:                     facemap[array[i]] = index++;
michael@0:                 }
michael@0: 
michael@0:                 indexArray.push(facemap[array[i]]);
michael@0:             }
michael@0:         }
michael@0:     }
michael@0: 
michael@0:     // set the VBOs
michael@0:     obj.normalObject = obj.ctx.createBuffer();
michael@0:     obj.ctx.bindBuffer(obj.ctx.ARRAY_BUFFER, obj.normalObject);
michael@0:     obj.ctx.bufferData(obj.ctx.ARRAY_BUFFER, new Float32Array(normalArray), obj.ctx.STATIC_DRAW);
michael@0: 
michael@0:     obj.texCoordObject = obj.ctx.createBuffer();
michael@0:     obj.ctx.bindBuffer(obj.ctx.ARRAY_BUFFER, obj.texCoordObject);
michael@0:     obj.ctx.bufferData(obj.ctx.ARRAY_BUFFER, new Float32Array(textureArray), obj.ctx.STATIC_DRAW);
michael@0: 
michael@0:     obj.vertexObject = obj.ctx.createBuffer();
michael@0:     obj.ctx.bindBuffer(obj.ctx.ARRAY_BUFFER, obj.vertexObject);
michael@0:     obj.ctx.bufferData(obj.ctx.ARRAY_BUFFER, new Float32Array(vertexArray), obj.ctx.STATIC_DRAW);
michael@0: 
michael@0:     obj.numIndices = indexArray.length;
michael@0:     obj.indexObject = obj.ctx.createBuffer();
michael@0:     obj.ctx.bindBuffer(obj.ctx.ELEMENT_ARRAY_BUFFER, obj.indexObject);
michael@0:     obj.ctx.bufferData(obj.ctx.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexArray), obj.ctx.STREAM_DRAW);
michael@0: 
michael@0:     obj.loaded = true;
michael@0: }
michael@0: 
michael@0: //
michael@0: // loadImageTexture
michael@0: //
michael@0: // Load the image at the passed url, place it in a new WebGLTexture object and return the WebGLTexture.
michael@0: //
michael@0: function loadImageTexture(ctx, url)
michael@0: {
michael@0:     var texture = ctx.createTexture();
michael@0:     texture.image = new Image();
michael@0:     texture.image.onload = function() { doLoadImageTexture(ctx, texture.image, texture) }
michael@0:     texture.image.src = url;
michael@0:     return texture;
michael@0: }
michael@0: 
michael@0: function doLoadImageTexture(ctx, image, texture)
michael@0: {
michael@0:     ctx.enable(ctx.TEXTURE_2D);
michael@0:     ctx.bindTexture(ctx.TEXTURE_2D, texture);
michael@0:     ctx.texImage2D(ctx.TEXTURE_2D, 0, ctx.RGBA, ctx.RGBA, ctx.UNSIGNED_BYTE, image);
michael@0:     ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MAG_FILTER, ctx.LINEAR);
michael@0:     ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_MIN_FILTER, ctx.LINEAR_MIPMAP_LINEAR);
michael@0:     ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_S, ctx.CLAMP_TO_EDGE);
michael@0:     ctx.texParameteri(ctx.TEXTURE_2D, ctx.TEXTURE_WRAP_T, ctx.CLAMP_TO_EDGE);
michael@0:     ctx.generateMipmap(ctx.TEXTURE_2D)
michael@0:     ctx.bindTexture(ctx.TEXTURE_2D, 0);
michael@0: }
michael@0: 
michael@0: //
michael@0: // Framerate object
michael@0: //
michael@0: // This object keeps track of framerate and displays it as the innerHTML text of the
michael@0: // HTML element with the passed id. Once created you call snapshot at the end
michael@0: // of every rendering cycle. Every 500ms the framerate is updated in the HTML element.
michael@0: //
michael@0: Framerate = function(id)
michael@0: {
michael@0:     this.numFramerates = 10;
michael@0:     this.framerateUpdateInterval = 500;
michael@0:     this.id = id;
michael@0: 
michael@0:     this.renderTime = -1;
michael@0:     this.framerates = [ ];
michael@0:     self = this;
michael@0:     var fr = function() { self.updateFramerate() }
michael@0:     setInterval(fr, this.framerateUpdateInterval);
michael@0: }
michael@0: 
michael@0: Framerate.prototype.updateFramerate = function()
michael@0: {
michael@0:     var tot = 0;
michael@0:     for (var i = 0; i < this.framerates.length; ++i)
michael@0:         tot += this.framerates[i];
michael@0: 
michael@0:     var framerate = tot / this.framerates.length;
michael@0:     framerate = Math.round(framerate);
michael@0:     document.getElementById(this.id).innerHTML = "Framerate:"+framerate+"fps";
michael@0: }
michael@0: 
michael@0: Framerate.prototype.snapshot = function()
michael@0: {
michael@0:     if (this.renderTime < 0)
michael@0:         this.renderTime = new Date().getTime();
michael@0:     else {
michael@0:         var newTime = new Date().getTime();
michael@0:         var t = newTime - this.renderTime;
michael@0:         var framerate = 1000/t;
michael@0:         this.framerates.push(framerate);
michael@0:         while (this.framerates.length > this.numFramerates)
michael@0:             this.framerates.shift();
michael@0:         this.renderTime = newTime;
michael@0:     }
michael@0: }