webgl finally rendering

src/core/Matrix4.js

@@ -38,7 +38,7 @@ var Matrix4 = Class.extend
 		this.y.copy(this.x);
 		this.y.cross(this.z);
 		this.y.normalize();
-		//this.y.negate(); //
+		this.y.negate(); //
 
 		this.n11 = this.x.x;
 		this.n12 = this.x.y;

src/renderers/GLRenderer.js

@@ -17,11 +17,23 @@ var GLRenderer = Renderer.extend
 			throw "cannot create webgl context";
 		}
 		
+		this.gl.clearColor(0.0, 0.0, 0.0, 1.0);
+		this.gl.clearDepth(1.0);
 		this.gl.enable(this.gl.DEPTH_TEST);
-		
+		this.gl.depthFunc(this.gl.LESS);
+		this.gl.enable(this.gl.BLEND);
+		this.gl.blendFunc(this.gl.SRC_ALPHA,this.gl.ONE_MINUS_SRC_ALPHA);
 		this.createProgram();
 	},
 	
+	setSize: function( width, height )
+	{
+		this._super( width, height );
+
+		this.viewport.width = this.width;
+		this.viewport.height = this.height;
+	},
+	
 	createProgram: function()
 	{
 		var gl=this.gl;
@@ -34,7 +46,7 @@ var GLRenderer = Renderer.extend
 		"varying vec4 vcolor;",
 		"void main(){",
 		"vcolor=color;",
-		"gl_Position = pMatrix*mvMatrix*vec4(position,1.0);",
+		"gl_Position = pMatrix*vec4((mvMatrix*vec4(position,1.0)).xyz,1.0);",
 		"}"
 		].join("");
 		
@@ -71,33 +83,33 @@ var GLRenderer = Renderer.extend
 	{
 		array[0]=matrix.n11;
 		array[1]=matrix.n12;
-		array[3]=matrix.n13;
-		array[4]=matrix.n14;
-		array[5]=matrix.n21;
-		array[6]=matrix.n22;
-		array[7]=matrix.n23;
-		array[8]=matrix.n24;
-		array[9]=matrix.n31;
-		array[10]=matrix.n32;
-		array[11]=matrix.n33;
-		array[12]=matrix.n34;
-		array[13]=matrix.n41;
-		array[14]=matrix.n42;
-		array[15]=matrix.n43;
-		array[16]=matrix.n44;
+		array[2]=matrix.n13;
+		array[3]=matrix.n14;
+		array[4]=matrix.n21;
+		array[5]=matrix.n22;
+		array[6]=matrix.n23;
+		array[7]=matrix.n24;
+		array[8]=matrix.n31;
+		array[9]=matrix.n32;
+		array[10]=matrix.n33;
+		array[11]=matrix.n34;
+		array[12]=matrix.n41;
+		array[13]=matrix.n42;
+		array[14]=matrix.n43;
+		array[15]=matrix.n44;
 	},
 	
 	render: function( scene, camera )
 	{		
 		var gl=this.gl;
-
+		var vertexArray,colorArray,faceArray;
 		gl.viewport(0,0,this.width,this.height);
+		gl.clearColor(0,0,0,0);
 		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 		
 		for (var i = 0; i < scene.objects.length; i++)
 		{
 			object = scene.objects[i];
-			
 			if (object instanceof Mesh)
 			{
 				// Very inefficient but easiest way initially
@@ -106,42 +118,51 @@ var GLRenderer = Renderer.extend
 				var colorArray = [];
 				var vertexIndex = 0;
 				var color;
-				
+				var vIndex, cIndex, findex;
+							
 				for (j = 0; j < object.geometry.faces.length; j++)
 				{
 					face = object.geometry.faces[j];
-					color = face.color;
-					
-					if (face instanceof Face3){
+					if (object.material instanceof ColorMaterial)
+					{
+						color=object.material.color;
+					}
+					else if (object.material instanceof FaceColorMaterial)
+					{
+						color = face.color;
+					}
+					if (face instanceof Face3)
+					{
+						//vertexArray[vindex++];
 						vertexArray.push( face.a.x, face.a.y, face.a.z );
 						vertexArray.push( face.b.x, face.b.y, face.b.z );
 						vertexArray.push( face.c.x, face.c.y, face.c.z );
-						colorArray.push( color.r, color.g, color.b, color.a );
-						colorArray.push( color.r, color.g, color.b, color.a );
-						colorArray.push( color.r, color.g, color.b, color.a );
+						colorArray.push( color.r/255, color.g/255, color.b/255, color.a/255 );
+						colorArray.push( color.r/255, color.g/255, color.b/255, color.a/255 );
+						colorArray.push( color.r/255, color.g/255, color.b/255, color.a/255 );
 						faceArray.push( vertexIndex, vertexIndex+1, vertexIndex+2 );
 						vertexIndex += 3;
 					}
 					else if (face instanceof Face4)
-					{
+					{					
 						vertexArray.push( face.a.x, face.a.y, face.a.z );
 						vertexArray.push( face.b.x, face.b.y, face.b.z );
 						vertexArray.push( face.c.x, face.c.y, face.c.z );
 						vertexArray.push( face.d.x, face.d.y, face.d.z );
-						colorArray.push( color.r, color.g, color.b, color.a );
-						colorArray.push( color.r, color.g, color.b, color.a );
-						colorArray.push( color.r, color.g, color.b, color.a );
-						colorArray.push( color.r, color.g, color.b, color.a );
+						colorArray.push( color.r/255, color.g/255, color.b/255, color.a/255 );
+						colorArray.push( color.r/255, color.g/255, color.b/255, color.a/255 );
+						colorArray.push( color.r/255, color.g/255, color.b/255, color.a/255 );
+						colorArray.push( color.r/255, color.g/255, color.b/255, color.a/255 );
 						faceArray.push( vertexIndex, vertexIndex+1, vertexIndex+2 );
-						faceArray.push( vertexIndex, vertexIndex+3, vertexIndex+3 );
+						faceArray.push( vertexIndex, vertexIndex+2, vertexIndex+3 );
 						vertexIndex += 4;
 					}
 				}
-				
-				
+
 				var vertexArray = new WebGLFloatArray(vertexArray);
 				var colorArray = new WebGLFloatArray(colorArray);
 				var faceArray = new WebGLUnsignedShortArray(faceArray);
+				
 					
 				if (!object.WebGLVertexBuffer) object.WebGLVertexBuffer = gl.createBuffer();
 				gl.bindBuffer( gl.ARRAY_BUFFER, object.WebGLVertexBuffer );
@@ -149,10 +170,9 @@ var GLRenderer = Renderer.extend
 					
 				if (!object.WebGLColorBuffer) object.WebGLColorBuffer = gl.createBuffer();
 				gl.bindBuffer( gl.ARRAY_BUFFER, object.WebGLColorBuffer );
-				gl.bufferData( gl.ARRAY_BUFFER, vertexArray, gl.DYNAMIC_DRAW );
+				gl.bufferData( gl.ARRAY_BUFFER, colorArray, gl.DYNAMIC_DRAW );
 					
 				if(!object.WebGLFaceBuffer) object.WebGLFaceBuffer = gl.createBuffer();
-				
 				gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, object.WebGLFaceBuffer );
 				gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, faceArray, gl.DYNAMIC_DRAW );
 				
@@ -163,11 +183,11 @@ var GLRenderer = Renderer.extend
 				
 				this.matrix2Array( this.matrix, this.program.mvMatrixArray );
 				this.matrix2Array( camera.projectionMatrix, this.program.pMatrixArray );
-				
+				//alert([this.program.mvMatrixArray[0],this.program.mvMatrixArray[1],this.program.mvMatrixArray[2],this.program.mvMatrixArray[3],this.program.mvMatrixArray[4],this.program.mvMatrixArray[5],this.program.mvMatrixArray[6],this.program.mvMatrixArray[7],this.program.mvMatrixArray[8],this.program.mvMatrixArray[9],this.program.mvMatrixArray[10],this.program.mvMatrixArray[11],this.program.mvMatrixArray[12],this.program.mvMatrixArray[13],this.program.mvMatrixArray[14],this.program.mvMatrixArray[15]]);
 				gl.uniformMatrix4fv(this.program.pMatrix, true, this.program.pMatrixArray);
 				gl.uniformMatrix4fv(this.program.mvMatrix, true, this.program.mvMatrixArray);
 				
-				for(var i=0; i<8; i++) gl.disableVertexAttribArray(i);
+				for(var n=0; n<8; n++) gl.disableVertexAttribArray(i);
 				
 				gl.bindBuffer(gl.ARRAY_BUFFER, object.WebGLVertexBuffer);
 				gl.enableVertexAttribArray(this.program.position);
@@ -178,8 +198,8 @@ var GLRenderer = Renderer.extend
 				gl.vertexAttribPointer(this.program.color, 4, gl.FLOAT, false, 0, 0);
 				
 				gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, object.WebGLFaceBuffer);
-				alert(faceArray.length);
 				gl.drawElements(gl.TRIANGLES,faceArray.length, gl.UNSIGNED_SHORT, 0);
+				
 			}
 			//TODO Particles!!
 		}

src/renderers/Renderer.js

@@ -67,7 +67,7 @@ var Renderer = Class.extend
 					
 					//convert to screen coords
 					vertex.screen.x *= this.widthHalf;
-					vertex.screen.y *= this.heightHalf; 
+					vertex.screen.y *= -this.heightHalf; // can't figure out why it's rendering upside down???
 				}
 
 				// faces