scripts/renderer.js
author Eugen Sawin <sawine@me73.com>
Wed, 27 Apr 2011 14:14:07 +0200
changeset 30 95688249c40c
parent 29 99652d00489f
child 31 744b427d1379
permissions -rw-r--r--
Added per-vertex positional lighting.
     1 function Context(canvas)
     2 {
     3     this.canvas = canvas;
     4     try 
     5     {
     6 	this.gl = canvas.getContext("experimental-webgl");
     7 	this.viewport = {'width': canvas.width,
     8 			 'height': canvas.height};
     9     } 
    10     catch(e) 
    11     {
    12 	alert(e);
    13     }
    14     if (!this.gl) alert("Failed: WebGL init.");
    15     this.mvMatrix = mat4.create();
    16     this.pMatrix = mat4.create();
    17     this.shader = new Shader(this);  
    18 }
    19 Context.prototype.updateMatrixUniforms = function()
    20 {
    21     var gl = this.gl;
    22     var program = this.shader;
    23     var pMatrix = this.pMatrix;
    24     var mvMatrix = this.mvMatrix;
    25 
    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);
    32 }
    33 Context.prototype.expand = function()
    34 { 
    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;
    41 }
    42 
    43 function Shader(context)
    44 {
    45     var gl = context.gl;
    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);
    52 
    53     if (!gl.getProgramParameter(this.program, gl.LINK_STATUS))
    54     {
    55 	alert("Failed: Shader init.");
    56     }
    57 
    58     gl.useProgram(this.program);
    59     this.vertexPosition = gl.getAttribLocation(this.program, "aVertexPosition");
    60     gl.enableVertexAttribArray(this.vertexPosition);
    61 
    62     this.vertexNormal = gl.getAttribLocation(this.program, "aVertexNormal");
    63     gl.enableVertexAttribArray(this.vertexNormal);
    64     
    65     this.vertexColour = gl.getAttribLocation(this.program, "aVertexColour");
    66     gl.enableVertexAttribArray(this.vertexColour);    
    67 
    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");
    78     
    79     function loadShader(gl, id)
    80     {
    81 	var script = document.getElementById(id);
    82 	if (!script) return null;
    83 	
    84 	var str = "";
    85 	var child = script.firstChild;
    86 	while (child)
    87 	{
    88 	    if (child.nodeType == 3) str += child.textContent;
    89 	    child = child.nextSibling;
    90 	}
    91 	
    92 	var shader;
    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);
    96 	else return null;
    97 
    98 	gl.shaderSource(shader, str);
    99 	gl.compileShader(shader);
   100 
   101 	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
   102         {
   103 	    alert(gl.getShaderInfoLog(shader));
   104 	    return null;
   105 	}
   106 
   107 	return shader;
   108     }
   109 }
   110 
   111 function Renderer(camera, context)
   112 {
   113     this.camera = camera;
   114     this.context = context;
   115     this.gl = context.gl;
   116     this.matrixStack = [];
   117 }
   118 Renderer.prototype.update = function(scene)
   119 { 
   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;
   125 
   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);
   129 
   130     mat4.identity(mvMatrix);
   131     mat4.multiply(mvMatrix, camera.matrix); 
   132     
   133     this.draw(scene);
   134     if (this.next) this.next.update(scene);
   135 }
   136 Renderer.prototype.draw = function(node)
   137 {
   138     var gl = this.context.gl;
   139     var shader = this.context.shader;
   140     var mvMatrix = this.context.mvMatrix;
   141     var pMatrix = this.context.pMatrix;
   142    
   143     if (node)
   144     {
   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;
   150 	if (object)
   151 	{
   152 	    gl.bindBuffer(gl.ARRAY_BUFFER, object.positionBuffer);
   153 	    gl.vertexAttribPointer(shader.vertexPosition, object.positionBuffer.itemSize, gl.FLOAT, false, 0, 0);
   154     
   155 	    gl.bindBuffer(gl.ARRAY_BUFFER, object.normalBuffer);
   156 	    gl.vertexAttribPointer(shader.vertexNormal, object.normalBuffer.itemSize, gl.FLOAT, false, 0, 0);
   157 
   158 	    gl.bindBuffer(gl.ARRAY_BUFFER, object.colourBuffer);
   159 	    gl.vertexAttribPointer(shader.vertexColour, object.colourBuffer.itemSize, gl.FLOAT, false, 0, 0);
   160 
   161 	    var lighting = true;
   162 	    gl.uniform1i(shader.useLightingUniform, lighting);
   163    
   164 	    if (lighting)
   165 	    {   
   166 		var uni = 0.00;
   167 		gl.uniform3f(shader.ambientColourUniform, uni, uni, uni);
   168 
   169 		var pos = node.pos;
   170 		gl.uniform3f(shader.pointLightingLocationUniform, pos[0], pos[1], pos[2]);
   171 		uni = .1;
   172 		gl.uniform3f(shader.pointLightingColourUniform, uni, uni, uni);
   173 
   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);
   179 	
   180 		// uni = 0.9;
   181 		// var directional =  {"r": uni, "g": uni, "b": uni};
   182 		// gl.uniform3f(shader.directionalColourUniform, directional.r, directional.g, directional.b);
   183 	    }
   184    
   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);
   189 	}
   190     
   191 	for (var id in node.children)
   192 	{
   193 	    this.mvMatrix = mvMatrix;
   194 	    this.draw(node.children[id]);
   195 	}
   196 	this.context.mvMatrix = this.popMatrix();
   197     }
   198 }
   199 Renderer.prototype.pushMatrix = function(matrix)
   200 {
   201     var copy = mat4.create();
   202     mat4.set(matrix, copy);
   203     this.matrixStack.push(copy);
   204 }
   205 Renderer.prototype.popMatrix = function()    
   206 {
   207     if (this.matrixStack.length > 0) return this.matrixStack.pop();
   208 }