scripts/renderer.js
author Eugen Sawin <sawine@me73.com>
Wed, 27 Apr 2011 15:13:34 +0200
changeset 34 f471c01dca99
parent 33 2af408534f28
child 35 7769f6e1e2c5
permissions -rw-r--r--
Increasing viewport.
     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.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");
    79     
    80     function loadShader(gl, id)
    81     {
    82 	var script = document.getElementById(id);
    83 	if (!script) return null;
    84 	
    85 	var str = "";
    86 	var child = script.firstChild;
    87 	while (child)
    88 	{
    89 	    if (child.nodeType == 3) str += child.textContent;
    90 	    child = child.nextSibling;
    91 	}
    92 	
    93 	var shader;
    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);
    97 	else return null;
    98 
    99 	gl.shaderSource(shader, str);
   100 	gl.compileShader(shader);
   101 
   102 	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
   103         {
   104 	    alert(gl.getShaderInfoLog(shader));
   105 	    return null;
   106 	}
   107 
   108 	return shader;
   109     }
   110 }
   111 
   112 function Renderer(camera, context)
   113 {
   114     this.camera = camera;
   115     this.context = context;
   116     this.gl = context.gl;
   117     this.matrixStack = [];
   118 }
   119 Renderer.prototype.update = function(scene)
   120 { 
   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;
   127 
   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);
   131 
   132     var lighting = true;
   133     gl.uniform1i(shader.useLightingUniform, lighting);
   134     gl.uniform1f(shader.materialShininessUniform, 25.0);
   135    
   136     if (lighting)
   137     {   
   138 	var uni = 0.0;
   139 	gl.uniform3f(shader.ambientColourUniform, uni, uni, uni);
   140 
   141 	var pos = [0, 0, 0];
   142 	gl.uniform3f(shader.pointLightingLocationUniform, pos[0], pos[1], pos[2]);
   143 	uni = .5;
   144 	gl.uniform3f(shader.pointLightingSpecularColourUniform, uni, uni, uni);
   145 	uni = .1;
   146 	gl.uniform3f(shader.pointLightingDiffuseColourUniform, uni, uni, uni);
   147 
   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);
   153 	
   154 	// uni = 0.9;
   155 	// var directional =  {"r": uni, "g": uni, "b": uni};
   156 	// gl.uniform3f(shader.directionalColourUniform, directional.r, directional.g, directional.b);
   157     }
   158 
   159     mat4.identity(mvMatrix);
   160     mat4.multiply(mvMatrix, camera.matrix); 
   161     
   162     this.draw(scene);
   163     if (this.next) this.next.update(scene);
   164 }
   165 Renderer.prototype.draw = function(node)
   166 {
   167     var gl = this.context.gl;
   168     var shader = this.context.shader;
   169     var mvMatrix = this.context.mvMatrix;
   170     var pMatrix = this.context.pMatrix;
   171    
   172     if (node)
   173     {
   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;
   179 	if (object)
   180 	{
   181 	    gl.bindBuffer(gl.ARRAY_BUFFER, object.positionBuffer);
   182 	    gl.vertexAttribPointer(shader.vertexPosition, object.positionBuffer.itemSize, gl.FLOAT, false, 0, 0);
   183     
   184 	    gl.bindBuffer(gl.ARRAY_BUFFER, object.normalBuffer);
   185 	    gl.vertexAttribPointer(shader.vertexNormal, object.normalBuffer.itemSize, gl.FLOAT, false, 0, 0);
   186 
   187 	    gl.bindBuffer(gl.ARRAY_BUFFER, object.colourBuffer);
   188 	    gl.vertexAttribPointer(shader.vertexColour, object.colourBuffer.itemSize, gl.FLOAT, false, 0, 0);
   189    
   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);
   194 	}
   195     
   196 	for (var id in node.children)
   197 	{
   198 	    this.mvMatrix = mvMatrix;
   199 	    this.draw(node.children[id]);
   200 	}
   201 	this.context.mvMatrix = this.popMatrix();
   202     }
   203 }
   204 Renderer.prototype.pushMatrix = function(matrix)
   205 {
   206     var copy = mat4.create();
   207     mat4.set(matrix, copy);
   208     this.matrixStack.push(copy);
   209 }
   210 Renderer.prototype.popMatrix = function()    
   211 {
   212     if (this.matrixStack.length > 0) return this.matrixStack.pop();
   213 }