Switched to per-fragment lighting.
1 function Context(canvas)
6 this.gl = canvas.getContext("experimental-webgl");
7 this.viewport = {'width': canvas.width,
8 'height': canvas.height};
14 if (!this.gl) alert("Failed: WebGL init.");
15 this.mvMatrix = mat4.create();
16 this.pMatrix = mat4.create();
17 this.shader = new Shader(this);
19 Context.prototype.updateMatrixUniforms = function()
22 var program = this.shader;
23 var pMatrix = this.pMatrix;
24 var mvMatrix = this.mvMatrix;
26 gl.uniformMatrix4fv(program.pMatrixUniform, false, pMatrix);
27 gl.uniformMatrix4fv(program.mvMatrixUniform, false, mvMatrix);
28 var normalMatrix = mat3.create();
29 mat4.toInverseMat3(mvMatrix, normalMatrix);
30 mat3.transpose(normalMatrix);
31 gl.uniformMatrix3fv(program.nMatrixUniform, false, normalMatrix);
33 Context.prototype.expand = function()
35 var width = window.innerWidth;
36 var height = window.innerHeight;
37 this.canvas.width = width;
38 this.canvas.height = height;
39 this.viewport.width = width;
40 this.viewport.height = height;
43 function Shader(context)
46 var fragment = loadShader(gl, "fragment-shader");
47 var vertex = loadShader(gl, "vertex-shader");
48 this.program = gl.createProgram();
49 gl.attachShader(this.program, vertex);
50 gl.attachShader(this.program, fragment);
51 gl.linkProgram(this.program);
53 if (!gl.getProgramParameter(this.program, gl.LINK_STATUS))
55 alert("Failed: Shader init.");
58 gl.useProgram(this.program);
59 this.vertexPosition = gl.getAttribLocation(this.program, "aVertexPosition");
60 gl.enableVertexAttribArray(this.vertexPosition);
62 this.vertexNormal = gl.getAttribLocation(this.program, "aVertexNormal");
63 gl.enableVertexAttribArray(this.vertexNormal);
65 this.vertexColour = gl.getAttribLocation(this.program, "aVertexColour");
66 gl.enableVertexAttribArray(this.vertexColour);
68 this.pMatrixUniform = gl.getUniformLocation(this.program, "uPMatrix");
69 this.mvMatrixUniform = gl.getUniformLocation(this.program, "uMVMatrix");
70 this.nMatrixUniform = gl.getUniformLocation(this.program, "uNMatrix");
71 //this.samplerUniform = gl.getUniformLocation(this.program, "uSampler");
72 this.useLightingUniform = gl.getUniformLocation(this.program, "uUseLighting");
73 this.ambientColourUniform = gl.getUniformLocation(this.program, "uAmbientColour");
74 this.lightingDirectionUniform = gl.getUniformLocation(this.program, "uLightingDirection");
75 this.directionalColourUniform = gl.getUniformLocation(this.program, "uDirectionalColour");
76 this.pointLightingLocationUniform = gl.getUniformLocation(this.program, "uPointLightingLocation");
77 this.pointLightingColourUniform = gl.getUniformLocation(this.program, "uPointLightingColour");
79 function loadShader(gl, id)
81 var script = document.getElementById(id);
82 if (!script) return null;
85 var child = script.firstChild;
88 if (child.nodeType == 3) str += child.textContent;
89 child = child.nextSibling;
93 var common = "x-shader/x-";
94 if (script.type == common + "fragment") shader = gl.createShader(gl.FRAGMENT_SHADER);
95 else if (script.type == common + "vertex") shader = gl.createShader(gl.VERTEX_SHADER);
98 gl.shaderSource(shader, str);
99 gl.compileShader(shader);
101 if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
103 alert(gl.getShaderInfoLog(shader));
111 function Renderer(camera, context)
113 this.camera = camera;
114 this.context = context;
115 this.gl = context.gl;
116 this.matrixStack = [];
118 Renderer.prototype.update = function(scene)
120 var gl = this.context.gl;
121 var shader = this.context.shader;
122 var viewport = this.context.viewport;
123 var mvMatrix = this.context.mvMatrix;
124 var pMatrix = this.context.pMatrix;
125 var camera = this.camera;
127 gl.viewport(0, 0, viewport.width, viewport.height);
128 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
129 mat4.perspective(45, viewport.width / viewport.height, 0.1, 100.0, pMatrix);
132 gl.uniform1i(shader.useLightingUniform, lighting);
137 gl.uniform3f(shader.ambientColourUniform, uni, uni, uni);
140 gl.uniform3f(shader.pointLightingLocationUniform, pos[0], pos[1], pos[2]);
142 gl.uniform3f(shader.pointLightingColourUniform, uni, uni, uni);
144 // var lightingDir = vec3.create();
145 // vec3.add(lightingDir, [0.5, -0.5, 0.0]);
146 // vec3.normalize(lightingDir);
147 // vec3.scale(lightingDir, -1);
148 // gl.uniform3fv(shader.lightingDirectionUniform, lightingDir);
151 // var directional = {"r": uni, "g": uni, "b": uni};
152 // gl.uniform3f(shader.directionalColourUniform, directional.r, directional.g, directional.b);
155 mat4.identity(mvMatrix);
156 mat4.multiply(mvMatrix, camera.matrix);
159 if (this.next) this.next.update(scene);
161 Renderer.prototype.draw = function(node)
163 var gl = this.context.gl;
164 var shader = this.context.shader;
165 var mvMatrix = this.context.mvMatrix;
166 var pMatrix = this.context.pMatrix;
170 this.pushMatrix(mvMatrix);
171 mat4.translate(mvMatrix, node.pos);
172 //mat4.rotate(mvMatrix, node.rot);
173 //mat4.multiply(mvMatrix, node.matrix);
174 var object = node.geometry;
177 gl.bindBuffer(gl.ARRAY_BUFFER, object.positionBuffer);
178 gl.vertexAttribPointer(shader.vertexPosition, object.positionBuffer.itemSize, gl.FLOAT, false, 0, 0);
180 gl.bindBuffer(gl.ARRAY_BUFFER, object.normalBuffer);
181 gl.vertexAttribPointer(shader.vertexNormal, object.normalBuffer.itemSize, gl.FLOAT, false, 0, 0);
183 gl.bindBuffer(gl.ARRAY_BUFFER, object.colourBuffer);
184 gl.vertexAttribPointer(shader.vertexColour, object.colourBuffer.itemSize, gl.FLOAT, false, 0, 0);
186 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, object.indexBuffer);
187 this.context.updateMatrixUniforms();
188 gl.drawElements(gl.TRIANGLES, object.indexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
189 //gl.drawArrays(gl.TRIANGLE_STRIP, 0, scene.positionBuffer.numItems);
192 for (var id in node.children)
194 this.mvMatrix = mvMatrix;
195 this.draw(node.children[id]);
197 this.context.mvMatrix = this.popMatrix();
200 Renderer.prototype.pushMatrix = function(matrix)
202 var copy = mat4.create();
203 mat4.set(matrix, copy);
204 this.matrixStack.push(copy);
206 Renderer.prototype.popMatrix = function()
208 if (this.matrixStack.length > 0) return this.matrixStack.pop();