sawine@73: function main() sawine@73: { sawine@73: var canvas = document.getElementById("machine"); sawine@73: var context = new Context(canvas); sawine@73: var gl = context.gl; sawine@73: context.object = new Box(1, context); sawine@73: gl.clearColor(0.0, 0.0, 0.0, 1.0); sawine@73: gl.enable(gl.DEPTH_TEST); sawine@73: draw(context); sawine@73: } sawine@73: sawine@73: function Context(canvas) sawine@73: { sawine@73: try sawine@73: { sawine@73: this.gl = canvas.getContext("experimental-webgl"); sawine@73: this.viewport = {'width': canvas.width, sawine@73: 'height': canvas.height}; sawine@73: } sawine@73: catch(e) sawine@73: { sawine@73: alert(e); sawine@73: } sawine@73: if (!this.gl) alert("Failed: WebGL init."); sawine@73: this.mvMatrix = mat4.create(); sawine@73: this.pMatrix = mat4.create(); sawine@73: this.shader = new Shader(this); sawine@73: } sawine@73: Context.prototype.updateMatrixUniforms = function() sawine@73: { sawine@73: var gl = this.gl; sawine@73: var program = this.shader.program; sawine@73: var pMatrix = this.pMatrix; sawine@73: var mvMatrix = this.mvMatrix; sawine@73: gl.uniformMatrix4fv(program.pMatrixUniform, false, pMatrix); sawine@73: gl.uniformMatrix4fv(program.mvMatrixUniform, false, mvMatrix); sawine@73: } sawine@73: sawine@73: function Shader(context) sawine@73: { sawine@73: var gl = context.gl; sawine@73: var fragment = loadShader(gl, "shader-fs"); sawine@73: var vertex = loadShader(gl, "shader-vs"); sawine@73: this.program = gl.createProgram(); sawine@73: gl.attachShader(this.program, vertex); sawine@73: gl.attachShader(this.program, fragment); sawine@73: gl.linkProgram(this.program); sawine@73: sawine@73: if (!gl.getProgramParameter(this.program, gl.LINK_STATUS)) sawine@73: { sawine@73: alert("Failed: Shader init."); sawine@73: } sawine@73: sawine@73: gl.useProgram(this.program); sawine@73: this.vertexPosition = gl.getAttribLocation(this.program, "aVertexPosition"); sawine@73: gl.enableVertexAttribArray(this.vertexPosition); sawine@73: this.pMatrixUniform = gl.getUniformLocation(this.program, "uPMatrix"); sawine@73: this.mvMatrixUniform = gl.getUniformLocation(this.program, "uMVMatrix"); sawine@73: sawine@73: function loadShader(gl, id) sawine@73: { sawine@73: var script = document.getElementById(id); sawine@73: if (!script) return null; sawine@73: sawine@73: var str = ""; sawine@73: var child = script.firstChild; sawine@73: while (child) sawine@73: { sawine@73: if (child.nodeType == 3) str += child.textContent; sawine@73: child = child.nextSibling; sawine@73: } sawine@73: sawine@73: var shader; sawine@73: var common = "x-shader/x-"; sawine@73: if (script.type == common + "fragment") shader = gl.createShader(gl.FRAGMENT_SHADER); sawine@73: else if (script.type == common + "vertex") shader = gl.createShader(gl.VERTEX_SHADER); sawine@73: else return null; sawine@73: sawine@73: gl.shaderSource(shader, str); sawine@73: gl.compileShader(shader); sawine@73: sawine@73: if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) sawine@73: { sawine@73: alert(gl.getShaderInfoLog(shader)); sawine@73: return null; sawine@73: } sawine@73: sawine@73: return shader; sawine@73: } sawine@73: } sawine@73: sawine@73: sawine@73: function Box(size, context) sawine@73: { sawine@73: var gl = context.gl; sawine@73: this.size = size || 1; sawine@73: this.buffer = gl.createBuffer(); sawine@73: gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); sawine@73: var vertices = [1.0, 1.0, 0.0, sawine@73: -1.0, 1.0, 0.0, sawine@73: 1.0, -1.0, 0.0, sawine@73: -1.0, -1.0, 0.0]; sawine@73: gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); sawine@73: this.itemSize = 3; sawine@73: this.numItems = 4; sawine@73: } sawine@73: sawine@73: function draw(context) sawine@73: { sawine@73: var gl = context.gl; sawine@73: var viewport = context.viewport; sawine@73: var shader = context.shader; sawine@73: var mvMatrix = context.mvMatrix; sawine@73: var pMatrix = context.pMatrix; sawine@73: var object = context.object; sawine@73: gl.viewport(0, 0, viewport.width, viewport.height); sawine@73: gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); sawine@73: mat4.perspective(45, viewport.width / viewport.height, 0.1, 100.0, pMatrix); sawine@73: mat4.identity(mvMatrix); sawine@73: mat4.translate(mvMatrix, [0.0, 0.0, -7.0]); sawine@73: gl.bindBuffer(gl.ARRAY_BUFFER, object.buffer); sawine@73: gl.vertexAttribPointer(shader.vertexPosition, object.itemSize, gl.FLOAT, false, 0, 0); sawine@73: gl.uniformMatrix4fv(shader.pMatrixUniform, false, pMatrix); sawine@73: gl.uniformMatrix4fv(shader.mvMatrixUniform, false, mvMatrix); sawine@73: //context.updateMatrixUniforms(); sawine@73: gl.drawArrays(gl.TRIANGLE_STRIP, 0, object.numItems); sawine@73: return context; sawine@73: } sawine@73: sawine@73: function drawScene(context) { sawine@73: gl.viewport(0, 0, viewport.width, viewport.height); sawine@73: gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); sawine@73: sawine@73: mat4.perspective(45, viewport.width / viewport.height, 0.1, 100.0, pMatrix); sawine@73: sawine@73: mat4.identity(mvMatrix); sawine@73: mat4.translate(mvMatrix, [0.0, 0.0, -7.0]); sawine@73: sawine@73: gl.bindBuffer(gl.ARRAY_BUFFER, object.buffer); sawine@73: gl.vertexAttribPointer(shader.vertexPosition, object.itemSize, gl.FLOAT, false, 0, 0); sawine@73: gl.uniformMatrix4fv(shader.pMatrixUniform, false, pMatrix); sawine@73: gl.uniformMatrix4fv(shader.mvMatrixUniform, false, mvMatrix); sawine@73: gl.drawArrays(gl.TRIANGLE_STRIP, 0, object.numItems); sawine@73: } sawine@73: