Added per-vertex positional 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 viewport = this.context.viewport;
122 var mvMatrix = this.context.mvMatrix;
123 var pMatrix = this.context.pMatrix;
124 var camera = this.camera;
126 gl.viewport(0, 0, viewport.width, viewport.height);
127 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
128 mat4.perspective(45, viewport.width / viewport.height, 0.1, 100.0, pMatrix);
130 mat4.identity(mvMatrix);
131 mat4.multiply(mvMatrix, camera.matrix);
134 if (this.next) this.next.update(scene);
136 Renderer.prototype.draw = function(node)
138 var gl = this.context.gl;
139 var shader = this.context.shader;
140 var mvMatrix = this.context.mvMatrix;
141 var pMatrix = this.context.pMatrix;
145 this.pushMatrix(mvMatrix);
146 mat4.translate(mvMatrix, node.pos);
147 //mat4.rotate(mvMatrix, node.rot);
148 //mat4.multiply(mvMatrix, node.matrix);
149 var object = node.geometry;
152 gl.bindBuffer(gl.ARRAY_BUFFER, object.positionBuffer);
153 gl.vertexAttribPointer(shader.vertexPosition, object.positionBuffer.itemSize, gl.FLOAT, false, 0, 0);
155 gl.bindBuffer(gl.ARRAY_BUFFER, object.normalBuffer);
156 gl.vertexAttribPointer(shader.vertexNormal, object.normalBuffer.itemSize, gl.FLOAT, false, 0, 0);
158 gl.bindBuffer(gl.ARRAY_BUFFER, object.colourBuffer);
159 gl.vertexAttribPointer(shader.vertexColour, object.colourBuffer.itemSize, gl.FLOAT, false, 0, 0);
162 gl.uniform1i(shader.useLightingUniform, lighting);
167 gl.uniform3f(shader.ambientColourUniform, uni, uni, uni);
170 gl.uniform3f(shader.pointLightingLocationUniform, pos[0], pos[1], pos[2]);
172 gl.uniform3f(shader.pointLightingColourUniform, uni, uni, uni);
174 // var lightingDir = vec3.create();
175 // vec3.add(lightingDir, [0.5, -0.5, 0.0]);
176 // vec3.normalize(lightingDir);
177 // vec3.scale(lightingDir, -1);
178 // gl.uniform3fv(shader.lightingDirectionUniform, lightingDir);
181 // var directional = {"r": uni, "g": uni, "b": uni};
182 // gl.uniform3f(shader.directionalColourUniform, directional.r, directional.g, directional.b);
185 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, object.indexBuffer);
186 this.context.updateMatrixUniforms();
187 gl.drawElements(gl.TRIANGLES, object.indexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
188 //gl.drawArrays(gl.TRIANGLE_STRIP, 0, scene.positionBuffer.numItems);
191 for (var id in node.children)
193 this.mvMatrix = mvMatrix;
194 this.draw(node.children[id]);
196 this.context.mvMatrix = this.popMatrix();
199 Renderer.prototype.pushMatrix = function(matrix)
201 var copy = mat4.create();
202 mat4.set(matrix, copy);
203 this.matrixStack.push(copy);
205 Renderer.prototype.popMatrix = function()
207 if (this.matrixStack.length > 0) return this.matrixStack.pop();