diff -r 7f4a00fee578 -r 8c2ee41d3727 scripts/machine.js --- a/scripts/machine.js Mon Apr 25 23:30:26 2011 +0200 +++ b/scripts/machine.js Tue Apr 26 01:48:56 2011 +0200 @@ -10,6 +10,8 @@ var mouseActionMap = {"pitch": [[true, false, false], pitchCamera], "yaw": [[true, false, false], yawCamera], "wheel": zoomCamera}; +include("scripts/cube.js"); +include("scripts/renderer.js"); function main() { @@ -244,58 +246,7 @@ } } -function Renderer(camera, context) -{ - this.camera = camera; - this.context = context; - this.gl = context.gl; - this.matrixStack = []; -} -Renderer.prototype.update = function(scene) -{ - var gl = this.context.gl; - var viewport = this.context.viewport; - var shader = this.context.shader; - var mvMatrix = this.context.mvMatrix; - var pMatrix = this.context.pMatrix; - var camera = this.camera; - camera.update(); - gl.viewport(0, 0, viewport.width, viewport.height); - gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); - mat4.perspective(45, viewport.width / viewport.height, 0.1, 100.0, pMatrix); - - mat4.identity(mvMatrix); - mat4.multiply(mvMatrix, camera.matrix); - - //this.pushMatrix(mvMatrix); - - gl.bindBuffer(gl.ARRAY_BUFFER, scene.positionBuffer); - gl.vertexAttribPointer(shader.vertexPosition, scene.positionBuffer.itemSize, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ARRAY_BUFFER, scene.colourBuffer); - gl.vertexAttribPointer(shader.vertexColour, scene.colourBuffer.itemSize, gl.FLOAT, false, 0, 0); - - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, scene.indexBuffer); - - this.context.updateMatrixUniforms(); - gl.drawElements(gl.TRIANGLES, scene.indexBuffer.numItems, gl.UNSIGNED_SHORT, 0); - //gl.drawArrays(gl.TRIANGLE_STRIP, 0, scene.positionBuffer.numItems); - - //mvMatrix = this.popMatrix(); - - if (this.next) this.next.draw(scene); -} -Renderer.prototype.pushMatrix = function(matrix) -{ - var copy = mat4.create(); - mat4.set(matrix, copy); - this.matrixStack.push(copy); -} -Renderer.prototype.popMatrix = function() -{ - if (this.matrixStack.length > 0) return this.matrixStack.pop(); -} function Machine(scene) { @@ -312,184 +263,10 @@ this.lastUpdate = time; } -function Context(canvas) -{ - this.canvas = canvas; - try - { - this.gl = canvas.getContext("experimental-webgl"); - this.viewport = {'width': canvas.width, - 'height': canvas.height}; - } - catch(e) - { - alert(e); - } - if (!this.gl) alert("Failed: WebGL init."); - this.mvMatrix = mat4.create(); - this.pMatrix = mat4.create(); - this.shader = new Shader(this); -} -Context.prototype.updateMatrixUniforms = function() -{ - var gl = this.gl; - var program = this.shader; - var pMatrix = this.pMatrix; - var mvMatrix = this.mvMatrix; - gl.uniformMatrix4fv(program.pMatrixUniform, false, pMatrix); - gl.uniformMatrix4fv(program.mvMatrixUniform, false, mvMatrix); -} -Context.prototype.expand = function() -{ - var width = window.innerWidth; - var height = window.innerHeight; - this.canvas.width = width; - this.canvas.height = height; - this.viewport.width = width; - this.viewport.height = height; -} -function Shader(context) -{ - var gl = context.gl; - var fragment = loadShader(gl, "fragment-shader"); - var vertex = loadShader(gl, "vertex-shader"); - this.program = gl.createProgram(); - gl.attachShader(this.program, vertex); - gl.attachShader(this.program, fragment); - gl.linkProgram(this.program); - if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) - { - alert("Failed: Shader init."); - } - gl.useProgram(this.program); - this.vertexPosition = gl.getAttribLocation(this.program, "aVertexPosition"); - gl.enableVertexAttribArray(this.vertexPosition); - - this.vertexColour = gl.getAttribLocation(this.program, "aVertexColour"); - gl.enableVertexAttribArray(this.vertexColour); - this.pMatrixUniform = gl.getUniformLocation(this.program, "uPMatrix"); - this.mvMatrixUniform = gl.getUniformLocation(this.program, "uMVMatrix"); - - function loadShader(gl, id) - { - var script = document.getElementById(id); - if (!script) return null; - - var str = ""; - var child = script.firstChild; - while (child) - { - if (child.nodeType == 3) str += child.textContent; - child = child.nextSibling; - } - - var shader; - var common = "x-shader/x-"; - if (script.type == common + "fragment") shader = gl.createShader(gl.FRAGMENT_SHADER); - else if (script.type == common + "vertex") shader = gl.createShader(gl.VERTEX_SHADER); - else return null; - - gl.shaderSource(shader, str); - gl.compileShader(shader); - - if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) - { - alert(gl.getShaderInfoLog(shader)); - return null; - } - - return shader; - } -} - - -function Cube(size, context) -{ - var gl = context.gl; - this.size = size || 1; - this.rotation = {'x': 0.0, 'y': 0.0, 'z': 0.0}; - - this.positionBuffer = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer); - var vertices = [ - // Front face - -1.0, -1.0, 1.0, - 1.0, -1.0, 1.0, - 1.0, 1.0, 1.0, - -1.0, 1.0, 1.0, - - // Back face - -1.0, -1.0, -1.0, - -1.0, 1.0, -1.0, - 1.0, 1.0, -1.0, - 1.0, -1.0, -1.0, - - // Top face - -1.0, 1.0, -1.0, - -1.0, 1.0, 1.0, - 1.0, 1.0, 1.0, - 1.0, 1.0, -1.0, - - // Bottom face - -1.0, -1.0, -1.0, - 1.0, -1.0, -1.0, - 1.0, -1.0, 1.0, - -1.0, -1.0, 1.0, - - // Right face - 1.0, -1.0, -1.0, - 1.0, 1.0, -1.0, - 1.0, 1.0, 1.0, - 1.0, -1.0, 1.0, - - // Left face - -1.0, -1.0, -1.0, - -1.0, -1.0, 1.0, - -1.0, 1.0, 1.0, - -1.0, 1.0, -1.0]; - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); - this.positionBuffer.itemSize = 3; - this.positionBuffer.numItems = 24; - - this.colourBuffer = gl.createBuffer(); - gl.bindBuffer(gl.ARRAY_BUFFER, this.colourBuffer); - var alpha = 1.0; - var colours = [[1.0, 0.0, 0.0, alpha], - [0.0, 1.0, 0.0, alpha], - [0.0, 0.0, 1.0, alpha], - [1.0, 0.0, 1.0, alpha], - [1.0, 1.0, 0.0, alpha], - [0.0, 1.0, 1.0, alpha]]; - var unpackedColours = []; - for (var i in colours) - { - var colour = colours[i]; - for (var j = 0; j < 4; j++) - { - unpackedColours = unpackedColours.concat(colour); - } - //colours = colours.concat([0.5, 0.5, 1.0, 1.0]); - } - gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(unpackedColours), gl.STATIC_DRAW); - this.colourBuffer.itemSize = 4; - this.colourBuffer.numItems = 24; - - this.indexBuffer = gl.createBuffer(); - gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer); - var indices = [0, 1, 2, 0, 2, 3, - 4, 5, 6, 4, 6, 7, - 8, 9, 10, 8, 10, 11, - 12, 13, 14, 12, 14, 15, - 16, 17, 18, 16, 18, 19, - 20, 21, 22, 20, 22, 23]; - gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); - this.indexBuffer.itemSize = 1; - this.indexBuffer.numItems = 36; -} function read(file, handler) {