Some more tweaking.
3 var canvas = document.getElementById("machine");
4 var context = new Context(canvas);
6 context.object = new Box(1, context);
7 gl.clearColor(0.0, 0.0, 0.0, 1.0);
8 gl.enable(gl.DEPTH_TEST);
12 function Context(canvas)
16 this.gl = canvas.getContext("experimental-webgl");
17 this.viewport = {'width': canvas.width,
18 'height': canvas.height};
24 if (!this.gl) alert("Failed: WebGL init.");
25 this.mvMatrix = mat4.create();
26 this.pMatrix = mat4.create();
27 this.shader = new Shader(this);
29 Context.prototype.updateMatrixUniforms = function()
32 var program = this.shader.program;
33 var pMatrix = this.pMatrix;
34 var mvMatrix = this.mvMatrix;
35 gl.uniformMatrix4fv(program.pMatrixUniform, false, pMatrix);
36 gl.uniformMatrix4fv(program.mvMatrixUniform, false, mvMatrix);
39 function Shader(context)
42 var fragment = loadShader(gl, "shader-fs");
43 var vertex = loadShader(gl, "shader-vs");
44 this.program = gl.createProgram();
45 gl.attachShader(this.program, vertex);
46 gl.attachShader(this.program, fragment);
47 gl.linkProgram(this.program);
49 if (!gl.getProgramParameter(this.program, gl.LINK_STATUS))
51 alert("Failed: Shader init.");
54 gl.useProgram(this.program);
55 this.vertexPosition = gl.getAttribLocation(this.program, "aVertexPosition");
56 gl.enableVertexAttribArray(this.vertexPosition);
57 this.pMatrixUniform = gl.getUniformLocation(this.program, "uPMatrix");
58 this.mvMatrixUniform = gl.getUniformLocation(this.program, "uMVMatrix");
60 function loadShader(gl, id)
62 var script = document.getElementById(id);
63 if (!script) return null;
66 var child = script.firstChild;
69 if (child.nodeType == 3) str += child.textContent;
70 child = child.nextSibling;
74 var common = "x-shader/x-";
75 if (script.type == common + "fragment") shader = gl.createShader(gl.FRAGMENT_SHADER);
76 else if (script.type == common + "vertex") shader = gl.createShader(gl.VERTEX_SHADER);
79 gl.shaderSource(shader, str);
80 gl.compileShader(shader);
82 if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
84 alert(gl.getShaderInfoLog(shader));
93 function Box(size, context)
96 this.size = size || 1;
97 this.buffer = gl.createBuffer();
98 gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer);
99 var vertices = [1.0, 1.0, 0.0,
103 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
108 function draw(context)
111 var viewport = context.viewport;
112 var shader = context.shader;
113 var mvMatrix = context.mvMatrix;
114 var pMatrix = context.pMatrix;
115 var object = context.object;
116 gl.viewport(0, 0, viewport.width, viewport.height);
117 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
118 mat4.perspective(45, viewport.width / viewport.height, 0.1, 100.0, pMatrix);
119 mat4.identity(mvMatrix);
120 mat4.translate(mvMatrix, [0.0, 0.0, -7.0]);
121 gl.bindBuffer(gl.ARRAY_BUFFER, object.buffer);
122 gl.vertexAttribPointer(shader.vertexPosition, object.itemSize, gl.FLOAT, false, 0, 0);
123 gl.uniformMatrix4fv(shader.pMatrixUniform, false, pMatrix);
124 gl.uniformMatrix4fv(shader.mvMatrixUniform, false, mvMatrix);
125 //context.updateMatrixUniforms();
126 gl.drawArrays(gl.TRIANGLE_STRIP, 0, object.numItems);
130 function drawScene(context) {
131 gl.viewport(0, 0, viewport.width, viewport.height);
132 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
134 mat4.perspective(45, viewport.width / viewport.height, 0.1, 100.0, pMatrix);
136 mat4.identity(mvMatrix);
137 mat4.translate(mvMatrix, [0.0, 0.0, -7.0]);
139 gl.bindBuffer(gl.ARRAY_BUFFER, object.buffer);
140 gl.vertexAttribPointer(shader.vertexPosition, object.itemSize, gl.FLOAT, false, 0, 0);
141 gl.uniformMatrix4fv(shader.pMatrixUniform, false, pMatrix);
142 gl.uniformMatrix4fv(shader.mvMatrixUniform, false, mvMatrix);
143 gl.drawArrays(gl.TRIANGLE_STRIP, 0, object.numItems);