scripts/renderer.js
author Eugen Sawin <sawine@me73.com>
Wed, 27 Apr 2011 14:41:04 +0200
changeset 31 744b427d1379
parent 30 95688249c40c
child 33 2af408534f28
permissions -rw-r--r--
Switched to per-fragment 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 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;
   126 
   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);
   130 
   131     var lighting = true;
   132     gl.uniform1i(shader.useLightingUniform, lighting);
   133    
   134     if (lighting)
   135     {   
   136 	var uni = 0.0;
   137 	gl.uniform3f(shader.ambientColourUniform, uni, uni, uni);
   138 
   139 	var pos = [0, 0, 0];
   140 	gl.uniform3f(shader.pointLightingLocationUniform, pos[0], pos[1], pos[2]);
   141 	uni = .3;
   142 	gl.uniform3f(shader.pointLightingColourUniform, uni, uni, uni);
   143 
   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);
   149 	
   150 	// uni = 0.9;
   151 	// var directional =  {"r": uni, "g": uni, "b": uni};
   152 	// gl.uniform3f(shader.directionalColourUniform, directional.r, directional.g, directional.b);
   153     }
   154 
   155     mat4.identity(mvMatrix);
   156     mat4.multiply(mvMatrix, camera.matrix); 
   157     
   158     this.draw(scene);
   159     if (this.next) this.next.update(scene);
   160 }
   161 Renderer.prototype.draw = function(node)
   162 {
   163     var gl = this.context.gl;
   164     var shader = this.context.shader;
   165     var mvMatrix = this.context.mvMatrix;
   166     var pMatrix = this.context.pMatrix;
   167    
   168     if (node)
   169     {
   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;
   175 	if (object)
   176 	{
   177 	    gl.bindBuffer(gl.ARRAY_BUFFER, object.positionBuffer);
   178 	    gl.vertexAttribPointer(shader.vertexPosition, object.positionBuffer.itemSize, gl.FLOAT, false, 0, 0);
   179     
   180 	    gl.bindBuffer(gl.ARRAY_BUFFER, object.normalBuffer);
   181 	    gl.vertexAttribPointer(shader.vertexNormal, object.normalBuffer.itemSize, gl.FLOAT, false, 0, 0);
   182 
   183 	    gl.bindBuffer(gl.ARRAY_BUFFER, object.colourBuffer);
   184 	    gl.vertexAttribPointer(shader.vertexColour, object.colourBuffer.itemSize, gl.FLOAT, false, 0, 0);
   185    
   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);
   190 	}
   191     
   192 	for (var id in node.children)
   193 	{
   194 	    this.mvMatrix = mvMatrix;
   195 	    this.draw(node.children[id]);
   196 	}
   197 	this.context.mvMatrix = this.popMatrix();
   198     }
   199 }
   200 Renderer.prototype.pushMatrix = function(matrix)
   201 {
   202     var copy = mat4.create();
   203     mat4.set(matrix, copy);
   204     this.matrixStack.push(copy);
   205 }
   206 Renderer.prototype.popMatrix = function()    
   207 {
   208     if (this.matrixStack.length > 0) return this.matrixStack.pop();
   209 }