Added normals to WebGLRenderer

src/renderers/WebGLRenderer.js

@@ -6,7 +6,7 @@
 THREE.WebGLRenderer = function () {
 
 	var _canvas = document.createElement( 'canvas' ), _gl, _program,
-	viewMatrix = new THREE.Matrix4();
+	viewMatrix = new THREE.Matrix4(), normalMatrix;
 
 	this.domElement = _canvas;
 	this.autoClear = true;
@@ -30,8 +30,8 @@ THREE.WebGLRenderer = function () {
 
 	this.render = function ( scene, camera ) {
 
-		var face, faceColor, object, material,
-		vertexArray, faceArray, colorArray, vertexIndex,
+		var face, faceColor, object, material, normal,
+		vertexArray, faceArray, colorArray, normalArray, vertexIndex,
 		o, ol, f, fl, m, ml, i, v1, v2, v3, v4;
 
 		if ( this.autoClear ) {
@@ -51,12 +51,14 @@ THREE.WebGLRenderer = function () {
 					vertexArray = [];
 					faceArray = [];
 					colorArray = [];
+					normalArray = [];
 					vertexIndex = 0;
 
 					for ( f = 0, fl = object.geometry.faces.length; f < fl; f++ ) {
 
 						face = object.geometry.faces[ f ];
 						faceColor = face.color;
+						normal = face.normal;
 
 						if ( face instanceof THREE.Face3 ) {
 
@@ -68,6 +70,10 @@ THREE.WebGLRenderer = function () {
 							vertexArray.push( v2.x, v2.y, v2.z );
 							vertexArray.push( v3.x, v3.y, v3.z );
 
+              normalArray.push( n.x, n.y, n.z );
+              normalArray.push( n.x, n.y, n.z );
+              normalArray.push( n.x, n.y, n.z );
+
 							colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a );
 							colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a );
 							colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a );
@@ -88,6 +94,11 @@ THREE.WebGLRenderer = function () {
 							vertexArray.push( v3.x, v3.y, v3.z );
 							vertexArray.push( v4.x, v4.y, v4.z );
 
+              normalArray.push( n.x, n.y, n.z );
+              normalArray.push( n.x, n.y, n.z );
+              normalArray.push( n.x, n.y, n.z );
+              normalArray.push( n.x, n.y, n.z );
+
 							colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a );
 							colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a );
 							colorArray.push( faceColor.r, faceColor.g, faceColor.b, faceColor.a );
@@ -110,6 +121,10 @@ THREE.WebGLRenderer = function () {
 					_gl.bindBuffer( _gl.ARRAY_BUFFER, object.__webGLVertexBuffer );
 					_gl.bufferData( _gl.ARRAY_BUFFER, new Float32Array( vertexArray ), _gl.STATIC_DRAW );
 
+          object.__webGLNormalBuffer = _gl.createBuffer();
+          _gl.bindBuffer( _gl.ARRAY_BUFFER, object.__webGLNormalBuffer );
+          _gl.bufferData( _gl.ARRAY_BUFFER, new Float32Array( normalArray ), _gl.STATIC_DRAW );
+
 					object.__webGLColorBuffer = _gl.createBuffer();
 					_gl.bindBuffer( _gl.ARRAY_BUFFER, object.__webGLColorBuffer );
 					_gl.bufferData( _gl.ARRAY_BUFFER, new Float32Array( colorArray ), _gl.STATIC_DRAW );
@@ -128,12 +143,18 @@ THREE.WebGLRenderer = function () {
 				_program.viewMatrixArray = new Float32Array( viewMatrix.flatten() );
 				_program.projectionMatrixArray = new Float32Array( camera.projectionMatrix.flatten() );
 
+		    normalMatrix = Matrix4.makeInvert(viewMatrix).transpose();
+		    _program.normalMatrixArray = new Float32Array( normalMatrix.flatten() );
+		    
 				_gl.uniformMatrix4fv( _program.viewMatrix, false, _program.viewMatrixArray );
 				_gl.uniformMatrix4fv( _program.projectionMatrix, false, _program.projectionMatrixArray );
+				_gl.uniformMatrix4fv( _program.normalMatrix, false, _program.normalMatrixArray );
 
 				_gl.bindBuffer( _gl.ARRAY_BUFFER, object.__webGLVertexBuffer );
 				_gl.vertexAttribPointer( _program.position, 3, _gl.FLOAT, false, 0, 0 );
 
+        _gl.bindBuffer( _gl.ARRAY_BUFFER, object.__webGLNormalBuffer );
+        _gl.vertexAttribPointer( _program.normal, 3, _gl.FLOAT, false, 0, 0 );
 
 				for ( m = 0, ml = object.material.length; m < ml; m++ ) {
 
@@ -225,10 +246,12 @@ THREE.WebGLRenderer = function () {
 
 		_gl.attachShader( _program, getShader( "vertex", [
 								"attribute vec3 position;",
+                "attribute vec3 normal;",
 								"attribute vec4 color;",
 
 								"uniform mat4 viewMatrix;",
 								"uniform mat4 projectionMatrix;",
+                "uniform mat4 normalMatrix;",
 								"varying vec4 vcolor;",
 
 								"void main(void) {",
@@ -250,6 +273,7 @@ THREE.WebGLRenderer = function () {
 
 		_program.viewMatrix = _gl.getUniformLocation( _program, "viewMatrix" );
 		_program.projectionMatrix = _gl.getUniformLocation( _program, "projectionMatrix" );
+		_program.normalMatrix = _gl.getUniformLocation( _program, "normalMatrix" );
 
 		_program.color = _gl.getAttribLocation( _program, "color" );
 		_gl.enableVertexAttribArray( _program.color );
@@ -257,6 +281,9 @@ THREE.WebGLRenderer = function () {
 		_program.position = _gl.getAttribLocation( _program, "position" );
 		_gl.enableVertexAttribArray( _program.position );
 
+    _program.normal = _gl.getAttribLocation( _program, "normal" );
+    _gl.enableVertexAttribArray( _program.normal );
+
 		_program.viewMatrixArray = new Float32Array(16);
 		_program.projectionMatrixArray = new Float32Array(16);