diff options
Diffstat (limited to 'WebCore/manual-tests/webgl/resources/utils3d.js')
| -rw-r--r-- | WebCore/manual-tests/webgl/resources/utils3d.js | 530 |
1 files changed, 0 insertions, 530 deletions
diff --git a/WebCore/manual-tests/webgl/resources/utils3d.js b/WebCore/manual-tests/webgl/resources/utils3d.js deleted file mode 100644 index 58f520f..0000000 --- a/WebCore/manual-tests/webgl/resources/utils3d.js +++ /dev/null @@ -1,530 +0,0 @@ -// -// 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.getProgramParameter(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.getShaderParameter(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; - } -} |