Increasing viewport.
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.materialShininessUniform = gl.getUniformLocation(this.program, "uMaterialShininess");
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.pointLightingSpecularColourUniform = gl.getUniformLocation(this.program, "uPointLightingSpecularColour");
78 this.pointLightingDiffuseColourUniform = gl.getUniformLocation(this.program, "uPointLightingDiffuseColour");
80 function loadShader(gl, id)
82 var script = document.getElementById(id);
83 if (!script) return null;
86 var child = script.firstChild;
89 if (child.nodeType == 3) str += child.textContent;
90 child = child.nextSibling;
94 var common = "x-shader/x-";
95 if (script.type == common + "fragment") shader = gl.createShader(gl.FRAGMENT_SHADER);
96 else if (script.type == common + "vertex") shader = gl.createShader(gl.VERTEX_SHADER);
99 gl.shaderSource(shader, str);
100 gl.compileShader(shader);
102 if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
104 alert(gl.getShaderInfoLog(shader));
112 function Renderer(camera, context)
114 this.camera = camera;
115 this.context = context;
116 this.gl = context.gl;
117 this.matrixStack = [];
119 Renderer.prototype.update = function(scene)
121 var gl = this.context.gl;
122 var shader = this.context.shader;
123 var viewport = this.context.viewport;
124 var mvMatrix = this.context.mvMatrix;
125 var pMatrix = this.context.pMatrix;
126 var camera = this.camera;
128 gl.viewport(0, 0, viewport.width, viewport.height);
129 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
130 mat4.perspective(45, viewport.width / viewport.height, 0.1, 1000.0, pMatrix);
133 gl.uniform1i(shader.useLightingUniform, lighting);
134 gl.uniform1f(shader.materialShininessUniform, 25.0);
139 gl.uniform3f(shader.ambientColourUniform, uni, uni, uni);
142 gl.uniform3f(shader.pointLightingLocationUniform, pos[0], pos[1], pos[2]);
144 gl.uniform3f(shader.pointLightingSpecularColourUniform, uni, uni, uni);
146 gl.uniform3f(shader.pointLightingDiffuseColourUniform, uni, uni, uni);
148 // var lightingDir = vec3.create();
149 // vec3.add(lightingDir, [0.5, -0.5, 0.0]);
150 // vec3.normalize(lightingDir);
151 // vec3.scale(lightingDir, -1);
152 // gl.uniform3fv(shader.lightingDirectionUniform, lightingDir);
155 // var directional = {"r": uni, "g": uni, "b": uni};
156 // gl.uniform3f(shader.directionalColourUniform, directional.r, directional.g, directional.b);
159 mat4.identity(mvMatrix);
160 mat4.multiply(mvMatrix, camera.matrix);
163 if (this.next) this.next.update(scene);
165 Renderer.prototype.draw = function(node)
167 var gl = this.context.gl;
168 var shader = this.context.shader;
169 var mvMatrix = this.context.mvMatrix;
170 var pMatrix = this.context.pMatrix;
174 this.pushMatrix(mvMatrix);
175 mat4.translate(mvMatrix, node.pos);
176 //mat4.rotate(mvMatrix, node.rot);
177 //mat4.multiply(mvMatrix, node.matrix);
178 var object = node.geometry;
181 gl.bindBuffer(gl.ARRAY_BUFFER, object.positionBuffer);
182 gl.vertexAttribPointer(shader.vertexPosition, object.positionBuffer.itemSize, gl.FLOAT, false, 0, 0);
184 gl.bindBuffer(gl.ARRAY_BUFFER, object.normalBuffer);
185 gl.vertexAttribPointer(shader.vertexNormal, object.normalBuffer.itemSize, gl.FLOAT, false, 0, 0);
187 gl.bindBuffer(gl.ARRAY_BUFFER, object.colourBuffer);
188 gl.vertexAttribPointer(shader.vertexColour, object.colourBuffer.itemSize, gl.FLOAT, false, 0, 0);
190 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, object.indexBuffer);
191 this.context.updateMatrixUniforms();
192 gl.drawElements(gl.TRIANGLES, object.indexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
193 //gl.drawArrays(gl.TRIANGLE_STRIP, 0, scene.positionBuffer.numItems);
196 for (var id in node.children)
198 this.mvMatrix = mvMatrix;
199 this.draw(node.children[id]);
201 this.context.mvMatrix = this.popMatrix();
204 Renderer.prototype.pushMatrix = function(matrix)
206 var copy = mat4.create();
207 mat4.set(matrix, copy);
208 this.matrixStack.push(copy);
210 Renderer.prototype.popMatrix = function()
212 if (this.matrixStack.length > 0) return this.matrixStack.pop();