Reverting

README.md

@@ -40,7 +40,6 @@ This code creates a camera, then creates a scene object, adds a bunch of random
 		function init()
 		{
 			camera = new Camera(0, 0, 1000);
-			camera.setProjectionMatrix(Matrix4.makePerspective(45, SCREEN_WIDTH/SCREEN_HEIGHT, 0.001, 1000));
 
 			scene = new Scene();
 	
@@ -73,7 +72,6 @@ If you are interested on messing with the actual library, instead of importing t
 	<script type="text/javascript" src="src/Class.js"></script>
 	<script type="text/javascript" src="src/core/Color.js"></script>
 	<script type="text/javascript" src="src/core/Vector3.js"></script>
-	<script type="text/javascript" src="src/core/Vector4.js"></script>
 	<script type="text/javascript" src="src/core/Matrix4.js"></script>
 	<script type="text/javascript" src="src/core/Vertex.js"></script>
 	<script type="text/javascript" src="src/core/Face3.js"></script>
@@ -91,18 +89,10 @@ If you are interested on messing with the actual library, instead of importing t
 	<script type="text/javascript" src="src/renderers/Renderer.js"></script>
 	<script type="text/javascript" src="src/renderers/CanvasRenderer.js"></script>
 	<script type="text/javascript" src="src/renderers/SVGRenderer.js"></script>
-	<script type="text/javascript" src="src/renderers/GLRenderer.js"></script>
 
 	
 ### Change Log ###
 
-2010 05 01 - **r5** (23.104 kb)
-
-* Projection matrix ([supereggbert](http://github.com/supereggbert)) 
-* Particles culling ([supereggbert](http://github.com/supereggbert))
-* WIP GLRenderer ([supereggbert](http://github.com/supereggbert))
-
-
 2010 04 26 - **r4** (16.274 kb)
 
 * SVGRenderer Particle rendering

examples/geometry/cube.html

@@ -58,8 +58,8 @@
 				info.innerHTML = 'Drag to spin the cube';
 				container.appendChild(info);
 			
-				camera = new Camera(0, 150, 600);
-				camera.setProjectionMatrix(Matrix4.makePerspective(45, SCREEN_WIDTH/SCREEN_HEIGHT, 0.001, 1000));
+				camera = new Camera(0, 150, 400);
+				camera.focus = 300;
 				camera.target.y = 150;
 				camera.updateMatrix();
 

examples/particles/floor.html

@@ -55,7 +55,7 @@
 				document.body.appendChild(container);
 			
 				camera = new Camera(0, 0, 1000);
-				camera.setProjectionMatrix(Matrix4.makePerspective(45, SCREEN_WIDTH/SCREEN_HEIGHT, 10, 10000));
+				camera.focus = 200;
 
 				scene = new Scene();
 				

examples/particles/random.html

@@ -49,8 +49,8 @@
 				container = document.createElement('div');
 				document.body.appendChild(container);				
 			
-				camera = new Camera(0, 0, -1000);
-				camera.setProjectionMatrix(Matrix4.makePerspective(60, SCREEN_WIDTH/SCREEN_HEIGHT, 10, 10000));
+				camera = new Camera(0, 0, 1000);
+				camera.focus = 200;
 
 				scene = new Scene();
 				

examples/particles/waves.html

@@ -55,7 +55,7 @@
 				document.body.appendChild(container);				
 			
 				camera = new Camera(0, 0, 1000);
-				camera.setProjectionMatrix(Matrix4.makePerspective(45, SCREEN_WIDTH/SCREEN_HEIGHT, 10, 6000));
+				camera.focus = 200;
 
 				scene = new Scene();
 				

src/cameras/Camera.js

@@ -1,38 +1,33 @@
-var Camera = Vector3.extend
-({
-	up: null,
-	target: null,
-	zoom: null,
-	focus: null,
-	roll: null,
-
-	matrix: null,
-	projectionMatrix: null,
-
-	init: function(x, y, z)
-	{
-		this._super(x, y, z);
-		this.up = new Vector3( 0, 1, 0 );
-		this.target = new Vector3( 0, 0, 0 );
-		
-		this.projectionMatrix = Matrix4.makePerspective(45, 1, 0.001, 1000);
-
-		this.matrix = new Matrix4();
-		this.updateMatrix();
-	},
-
-	updateMatrix: function()
-	{
-		this.matrix.lookAt( this, this.target, this.up );
-	},
-	
-	setProjectionMatrix: function(matrix)
-	{
-		this.projectionMatrix=matrix;
-	},
-
-	toString: function()
-	{
-		return 'Camera ( ' + this.x + ', ' + this.y + ', ' + this.z + ' )';
-	}
-});
+var Camera = Vector3.extend
+({
+	up: null,
+	target: null,
+	zoom: null,
+	focus: null,
+	roll: null,
+	
+	matrix: null,
+	
+	init: function(x, y, z)
+	{
+		this._super(x, y, z);
+		this.up = new Vector3( 0, 1, 0 );
+		this.target = new Vector3( 0, 0, 0 );
+		this.zoom = 3;
+		this.focus = 500;
+		this.roll = 0;
+		
+		this.matrix = new Matrix4();
+		this.updateMatrix();
+	},
+	
+	updateMatrix: function()
+	{
+		this.matrix.lookAt( this, this.target, this.up );
+	},
+
+	toString: function()
+	{
+		return 'Camera ( ' + this.x + ', ' + this.y + ', ' + this.z + ' )';
+	}
+});

src/core/Matrix4.js

@@ -1,255 +1,173 @@
-var Matrix4 = Class.extend
-({
-	n11: null, n12: null, n13: null, n14: null,
-	n21: null, n22: null, n23: null, n24: null,
-	n31: null, n32: null, n33: null, n34: null,
-	n41: null, n42: null, n43: null, n44: null,
-
-	x: null, y: null, z: null,
-
-	init: function()
-	{
-		this.identity();
-	},
-
-	identity: function()
-	{
-		this.n11 = 1; this.n12 = 0; this.n13 = 0; this.n14 = 0;
-		this.n21 = 0; this.n22 = 1; this.n23 = 0; this.n24 = 0;
-		this.n31 = 0; this.n32 = 0; this.n33 = 1; this.n34 = 0;
-		this.n41 = 0; this.n42 = 0; this.n43 = 0; this.n44 = 1;
-
-		this.x = new Vector3(0,0,0);
-		this.y = new Vector3(0,0,0);
-		this.z = new Vector3(0,0,0);
-	},
-    
-	lookAt: function(eye, center, up)
-	{
-		this.z.sub(center, eye);
-		this.z.normalize();
-		this.z.negate();
-
-		this.x.copy(this.z);
-		this.x.cross(up);
-		this.x.normalize();
-		this.x.negate();
-
-		this.y.copy(this.x);
-		this.y.cross(this.z);
-		this.y.normalize();
-		this.y.negate(); //
-
-		this.n11 = this.x.x;
-		this.n12 = this.x.y;
-		this.n13 = this.x.z;
-		this.n14 = -this.x.dot(eye);
-		this.n21 = this.y.x;
-		this.n22 = this.y.y;
-		this.n23 = this.y.z;
-		this.n24 = -this.y.dot(eye);
-		this.n31 = this.z.x;
-		this.n32 = this.z.y;
-		this.n33 = this.z.z;
-		this.n34 = -this.z.dot(eye);
-	},
-
-	transform: function(v)
-	{
-        	var vx = v.x, vy = v.y, vz = v.z, vw = (v.w ? v.w : 1.0);
-		v.x = this.n11 * vx + this.n12 * vy + this.n13 * vz + this.n14 * vw;
-		v.y = this.n21 * vx + this.n22 * vy + this.n23 * vz + this.n24 * vw;
-		v.z = this.n31 * vx + this.n32 * vy + this.n33 * vz + this.n34 * vw;
-		
-		vw = this.n41 * vx + this.n42 * vy + this.n43 * vz + this.n44 * vw;
-
-		if(v.w)
-		{
-			v.w = vw;
-		}
-		else
-		{
-			v.x = v.x/vw;
-			v.y = v.y/vw;
-			v.z = v.z/vw;
-		}
-	},
-    
-	crossVector: function(a)
-	{
-		v = new Vector4();
-		v.x = this.n11*a.x+n12*a.y+n13*a.z+n14*a.w;
-		v.y = this.n21*a.x+n22*a.y+n23*a.z+n24*a.w;
-		v.z = this.n31*a.x+n32*a.y+n33*a.z+n34*a.w;
-		if (a.w)
-		{
-			v.w = this.n41*a.x+n42*a.y+n43*a.z+n44*a.w;
-		}
-		else
-		{
-			v.w = 1.0;
-		}
-		return v;
-	},
-	
-	multiply: function(a, b)
-	{
-		this.n11 = a.n11 * b.n11 + a.n12 * b.n21 + a.n13 * b.n31 + a.n14 * b.n41;
-		this.n12 = a.n11 * b.n12 + a.n12 * b.n22 + a.n13 * b.n32 + a.n14 * b.n42;
-		this.n13 = a.n11 * b.n13 + a.n12 * b.n23 + a.n13 * b.n33 + a.n14 * b.n43;
-		this.n14 = a.n11 * b.n14 + a.n12 * b.n24 + a.n13 * b.n34 + a.n14 * b.n44;
-
-		this.n21 = a.n21 * b.n11 + a.n22 * b.n21 + a.n23 * b.n31 + a.n24 * b.n41;
-		this.n22 = a.n21 * b.n12 + a.n22 * b.n22 + a.n23 * b.n32 + a.n24 * b.n42;
-		this.n23 = a.n21 * b.n13 + a.n22 * b.n23 + a.n23 * b.n33 + a.n24 * b.n34;
-		this.n24 = a.n21 * b.n14 + a.n22 * b.n24 + a.n23 * b.n34 + a.n24 * b.n44;
-
-		this.n31 = a.n31 * b.n11 + a.n32 * b.n21 + a.n33 * b.n31 + a.n34 * b.n41;
-		this.n32 = a.n31 * b.n12 + a.n32 * b.n22 + a.n33 * b.n32 + a.n34 * b.n42;
-		this.n33 = a.n31 * b.n13 + a.n32 * b.n23 + a.n33 * b.n33 + a.n34 * b.n43;
-		this.n34 = a.n31 * b.n14 + a.n32 * b.n24 + a.n33 * b.n34 + a.n34 * b.n44;
-
-		this.n41 = a.n41 * b.n11 + a.n42 * b.n21 + a.n43 * b.n31 + a.n44 * b.n41;
-		this.n42 = a.n41 * b.n12 + a.n42 * b.n22 + a.n43 * b.n32 + a.n44 * b.n42;
-		this.n43 = a.n41 * b.n13 + a.n42 * b.n23 + a.n43 * b.n33 + a.n44 * b.n43;
-		this.n44 = a.n41 * b.n14 + a.n42 * b.n24 + a.n43 * b.n34 + a.n44 * b.n44;
-	},
-
-	multiplySelf: function(m)
-	{
-		var n11 = this.n11, n12 = this.n12, n13 = this.n13, n14 = this.n14;
-		var n21 = this.n21, n22 = this.n22, n23 = this.n23, n24 = this.n24;
-		var n31 = this.n31, n32 = this.n32, n33 = this.n33, n34 = this.n34;
-		var n41 = this.n41, n42 = this.n42, n43 = this.n43, n44 = this.n44;
-
-		this.n11 = n11 * m.n11 + n12 * m.n21 + n13 * m.n31 + n14 * m.n41;
-		this.n12 = n11 * m.n12 + n12 * m.n22 + n13 * m.n32 + n14 * m.n42;
-		this.n13 = n11 * m.n13 + n12 * m.n23 + n13 * m.n33 + n14 * m.n43;
-		this.n14 = n11 * m.n14 + n12 * m.n24 + n13 * m.n34 + n14 * m.n44;
-
-		this.n21 = n21 * m.n11 + n22 * m.n21 + n23 * m.n31 + n24 * m.n41;
-		this.n22 = n21 * m.n12 + n22 * m.n22 + n23 * m.n32 + n24 * m.n42;
-		this.n23 = n21 * m.n13 + n22 * m.n23 + n23 * m.n33 + n24 * m.n43;
-		this.n24 = n21 * m.n14 + n22 * m.n24 + n23 * m.n34 + n24 * m.n44;
-
-		this.n31 = n31 * m.n11 + n32 * m.n21 + n33 * m.n31 + n34 * m.n41;
-		this.n32 = n31 * m.n12 + n32 * m.n22 + n33 * m.n32 + n34 * m.n42;
-		this.n33 = n31 * m.n13 + n32 * m.n23 + n33 * m.n33 + n34 * m.n43;
-		this.n34 = n31 * m.n14 + n32 * m.n24 + n33 * m.n34 + n34 * m.n44;
-
-		this.n41 = n41 * m.n11 + n42 * m.n21 + n43 * m.n31 + n44 * m.n41;
-		this.n42 = n41 * m.n12 + n42 * m.n22 + n43 * m.n32 + n44 * m.n42;
-		this.n43 = n41 * m.n13 + n42 * m.n23 + n43 * m.n33 + n44 * m.n43;
-		this.n44 = n41 * m.n14 + n42 * m.n24 + n43 * m.n34 + n44 * m.n44;
-	},
-
-	clone: function()
-	{
-		var m = new Matrix4();
-		m.n11 = this.n11; m.n12 = this.n12; m.n13 = this.n13; m.n14 = this.n14;
-		m.n21 = this.n21; m.n22 = this.n22; m.n23 = this.n23; m.n24 = this.n24;
-		m.n31 = this.n31; m.n32 = this.n32; m.n33 = this.n33; m.n34 = this.n34;
-		m.n41 = this.n41; m.n42 = this.n42; m.n43 = this.n43; m.n44 = this.n44;
-		return m;
-	},
-    
-	toString: function()
-	{
-        	return "| " + this.n11 + " " + this.n12 + " " + this.n13 + " " + this.n14 + " |\n" +
-                        "| " + this.n21 + " " + this.n22 + " " + this.n23 + " " + this.n24 + " |\n" +
-                        "| " + this.n31 + " " + this.n32 + " " + this.n33 + " " + this.n34 + " |\n" +
-                        "| " + this.n41 + " " + this.n42 + " " + this.n43 + " " + this.n44 + " |";
-	}
-});
-
-Matrix4.translationMatrix = function(x, y, z)
-{
-	var m = new Matrix4();
-
-	m.n14 = x;
-	m.n24 = y;
-	m.n34 = z;
-
-	return m;
-}
-
-Matrix4.scaleMatrix = function(x, y, z)
-{
-	var m = new Matrix4();
-
-	m.n11 = x;
-	m.n22 = y;
-	m.n33 = z;
-
-	return m;
-}
-
-Matrix4.rotationXMatrix = function(theta)
-{
-	var rot = new Matrix4();
-
-	rot.n22 = rot.n33 = Math.cos(theta);
-	rot.n32 = Math.sin(theta);
-	rot.n23 = -rot.n32;
-
-	return rot;
-}
-
-Matrix4.rotationYMatrix = function(theta)
-{
-	var rot = new Matrix4();
-
-	rot.n11 = rot.n33 = Math.cos(theta);
-	rot.n13 = Math.sin(theta);
-	rot.n31 = -rot.n13;
-
-	return rot;
-}
-
-Matrix4.rotationZMatrix = function(theta)
-{
-	var rot = new Matrix4();
-
-	rot.n11 = rot.n22 = Math.cos(theta);
-	rot.n21 = Math.sin(theta);
-	rot.n12 = -rot.n21;
-
-	return rot;
-}
-
-Matrix4.makeFrustum = function(left,right,bottom,top,near,far)
-{
-	var m = new Matrix4();
-	
-	var x = 2*near/(right-left);
-	var y = 2*near/(top-bottom);
-	var a = (right+left)/(right-left);
-	var b = (top+bottom)/(top-bottom);
-	var c = -(far+near)/(far-near);
-	var d = -2*far*near/(far-near);
-	
-	m.n11=x;
-	m.n13=a;
-	m.n22=y;
-	m.n23=b;
-	m.n33=c;
-	m.n34=d;
-	m.n43=-1;
-	m.n44=0;
-	
-	return m;
-}
-
-Matrix4.makePerspective = function(fovy, aspect, near, far)
-{
-	var ymax = near * Math.tan(fovy * 0.00872664625972);
-	var ymin = -ymax;
-	var xmin = ymin * aspect;
-	var xmax = ymax * aspect;
-	return Matrix4.makeFrustum(xmin, xmax, ymin, ymax, near, far);
-}
-
-
-
-
-
+var Matrix4 = Class.extend
+({
+	n11: null, n12: null, n13: null, n14: null,
+	n21: null, n22: null, n23: null, n24: null,
+	n31: null, n32: null, n33: null, n34: null,
+
+	x: null, y: null, z: null,
+
+	init: function()
+	{
+		this.identity();
+	},
+
+	identity: function()
+	{
+		this.n11 = 1; this.n12 = 0; this.n13 = 0; this.n14 = 0;
+		this.n21 = 0; this.n22 = 1; this.n23 = 0; this.n24 = 0;
+		this.n31 = 0; this.n32 = 0; this.n33 = 1; this.n34 = 0;
+		
+		this.x = new Vector3(0,0,0);
+		this.y = new Vector3(0,0,0);
+		this.z = new Vector3(0,0,0);
+	},
+    
+	lookAt: function(eye, center, up)
+	{
+		this.z.sub(center, eye);
+		this.z.normalize();
+
+		this.x.copy(this.z);
+		this.x.cross(up);
+		this.x.normalize();
+
+		this.y.copy(this.x);
+		this.y.cross(this.z);
+		this.y.normalize();
+		this.y.negate(); //
+
+		this.n11 = this.x.x;
+		this.n12 = this.x.y;
+		this.n13 = this.x.z;
+		this.n14 = -this.x.dot(eye);
+		this.n21 = this.y.x;
+		this.n22 = this.y.y;
+		this.n23 = this.y.z;
+		this.n24 = -this.y.dot(eye);
+		this.n31 = this.z.x;
+		this.n32 = this.z.y;
+		this.n33 = this.z.z;
+		this.n34 = -this.z.dot(eye);
+	},
+
+	transform: function(v)
+	{
+        	var vx = v.x, vy = v.y, vz = v.z;
+        
+		v.x = this.n11 * vx + this.n12 * vy + this.n13 * vz + this.n14;
+		v.y = this.n21 * vx + this.n22 * vy + this.n23 * vz + this.n24;
+		v.z = this.n31 * vx + this.n32 * vy + this.n33 * vz + this.n34;
+	},
+    
+
+	multiply: function(a, b)
+	{
+		this.n11 = a.n11 * b.n11 + a.n12 * b.n21 + a.n13 * b.n31;
+		this.n12 = a.n11 * b.n12 + a.n12 * b.n22 + a.n13 * b.n32;
+		this.n13 = a.n11 * b.n13 + a.n12 * b.n23 + a.n13 * b.n33;
+		this.n14 = a.n11 * b.n14 + a.n12 * b.n24 + a.n13 * b.n34 + a.n14;
+
+		this.n21 = a.n21 * b.n11 + a.n22 * b.n21 + a.n23 * b.n31;
+		this.n22 = a.n21 * b.n12 + a.n22 * b.n22 + a.n23 * b.n32;
+		this.n23 = a.n21 * b.n13 + a.n22 * b.n23 + a.n23 * b.n33;
+		this.n24 = a.n21 * b.n14 + a.n22 * b.n24 + a.n23 * b.n34 + a.n24;
+
+		this.n31 = a.n31 * b.n11 + a.n32 * b.n21 + a.n33 * b.n31;
+		this.n32 = a.n31 * b.n12 + a.n32 * b.n22 + a.n33 * b.n32;
+		this.n33 = a.n31 * b.n13 + a.n32 * b.n23 + a.n33 * b.n33;
+		this.n34 = a.n31 * b.n14 + a.n32 * b.n24 + a.n33 * b.n34 + a.n34;
+	},
+
+	multiplySelf: function(m)
+	{
+		var n11 = this.n11, n12 = this.n12, n13 = this.n13, n14 = this.n14;
+		var n21 = this.n21, n22 = this.n22, n23 = this.n23, n24 = this.n24;
+		var n31 = this.n31, n32 = this.n32, n33 = this.n33, n34 = this.n34;
+
+		this.n11 = n11 * m.n11 + n12 * m.n21 + n13 * m.n31;
+		this.n12 = n11 * m.n12 + n12 * m.n22 + n13 * m.n32;
+		this.n13 = n11 * m.n13 + n12 * m.n23 + n13 * m.n33;
+		this.n14 = n11 * m.n14 + n12 * m.n24 + n13 * m.n34 + n14;
+
+		this.n21 = n21 * m.n11 + n22 * m.n21 + n23 * m.n31;
+		this.n22 = n21 * m.n12 + n22 * m.n22 + n23 * m.n32;
+		this.n23 = n21 * m.n13 + n22 * m.n23 + n23 * m.n33;
+		this.n24 = n21 * m.n14 + n22 * m.n24 + n23 * m.n34 + n24;
+
+		this.n31 = n31 * m.n11 + n32 * m.n21 + n33 * m.n31;
+		this.n32 = n31 * m.n12 + n32 * m.n22 + n33 * m.n32;
+		this.n33 = n31 * m.n13 + n32 * m.n23 + n33 * m.n33;
+		this.n34 = n31 * m.n14 + n32 * m.n24 + n33 * m.n34 + n34;
+	},
+
+	clone: function()
+	{
+		var m = new Matrix4();
+		m.n11 = this.n11; m.n12 = this.n12; m.n13 = this.n13; m.n14 = this.n14;
+		m.n21 = this.n21; m.n22 = this.n22; m.n23 = this.n23; m.n24 = this.n24;
+		m.n31 = this.n31; m.n32 = this.n32; m.n33 = this.n33; m.n34 = this.n34;
+		return m;
+	},
+    
+	toString: function()
+	{
+        	return "| " + this.n11 + " " + this.n12 + " " + this.n13 + " " + this.n14 + " |\n" +
+                        "| " + this.n21 + " " + this.n22 + " " + this.n23 + " " + this.n24 + " |\n" +
+                        "| " + this.n31 + " " + this.n32 + " " + this.n33 + " " + this.n34 + " |";
+	}
+});
+
+Matrix4.translationMatrix = function(x, y, z)
+{
+	var m = new Matrix4();
+
+	m.n14 = x;
+	m.n24 = y;
+	m.n34 = z;
+
+	return m;
+}
+
+Matrix4.scaleMatrix = function(x, y, z)
+{
+	var m = new Matrix4();
+
+	m.n11 = x;
+	m.n22 = y;
+	m.n33 = z;
+
+	return m;
+}
+
+Matrix4.rotationXMatrix = function(theta)
+{
+	var rot = new Matrix4();
+
+	rot.n22 = rot.n33 = Math.cos(theta);
+	rot.n32 = Math.sin(theta);
+	rot.n23 = -rot.n32;
+
+	return rot;
+}
+
+Matrix4.rotationYMatrix = function(theta)
+{
+	var rot = new Matrix4();
+
+	rot.n11 = rot.n33 = Math.cos(theta);
+	rot.n13 = Math.sin(theta);
+	rot.n31 = -rot.n13;
+
+	return rot;
+}
+
+Matrix4.rotationZMatrix = function(theta)
+{
+	var rot = new Matrix4();
+
+	rot.n11 = rot.n22 = Math.cos(theta);
+	rot.n21 = Math.sin(theta);
+	rot.n12 = -rot.n21;
+
+	return rot;
+}

src/core/Vector3.js

@@ -126,11 +126,6 @@ var Vector3 = Class.extend
 		return new Vector3(this.x, this.y, this.z);
 	},	
 	
-	toVector4: function()
-	{
-		return new Vector4(this.x,this.y,this.z, 1.0);
-	},
-	
 	toString: function()
 	{
 		return 'Vector3 (' + this.x + ', ' + this.y + ', ' + this.z + ')';

src/renderers/CanvasRenderer.js

@@ -65,7 +65,7 @@ var CanvasRenderer = Renderer.extend
 			else if (element instanceof Particle)
 			{
 				this.context.beginPath();
-				this.context.arc(element.screen.x, element.screen.y, element.zsize, 0, pi2, true);
+				this.context.arc(element.screen.x, element.screen.y, element.size * element.screen.z, 0, pi2, true);
 				this.context.fill();
 				this.context.closePath();				
 			}

src/renderers/GLRenderer.js

@@ -23,7 +23,9 @@ var GLRenderer = Renderer.extend
 		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.gl.clearColor(0,0,0,0);
 		this.createProgram();
+		this.initParticles(32);
 	},
 	
 	setSize: function( width, height )
@@ -32,6 +34,82 @@ var GLRenderer = Renderer.extend
 
 		this.viewport.width = this.width;
 		this.viewport.height = this.height;
+		this.gl.viewport(0,0,this.width,this.height);
+	},
+	
+	initParticles: function (segments)
+	{
+		var gl=this.gl;
+		var x,y;
+		var vertexArray=[0,0,0];
+		var faceArray=[];
+		piStep=6.282/segments;
+		for(var i=0;i<segments;i++){
+			x=Math.sin(piStep*i);
+			y=Math.cos(piStep*i);
+			vertexArray.push(x,y,0);
+			if(i>0)
+			{
+				faceArray.push(0,i,i+1);
+			}
+		}
+		faceArray.push(0,i,1);
+		
+		var vtxShader=[
+		"attribute vec3 position;",
+		"uniform vec3 location;",
+		"uniform mat4 cameraMatrix;",
+		"uniform mat4 pMatrix;",
+		"uniform float size;",
+		"void main(){",
+		"vec4 pos=cameraMatrix*vec4(location,1.0);",
+		"pos=vec4(position*vec3(size),0.0)+pos;",
+		"gl_Position = pMatrix*pos;",
+		"}"
+		].join("");
+		
+		frgShader=[
+		"uniform vec4 color;",
+		"void main(){",
+		"gl_FragColor=color;",
+		"}"
+		].join("");
+		
+		var vertexShader=gl.createShader(gl.VERTEX_SHADER);
+		var fragmentShader=gl.createShader(gl.FRAGMENT_SHADER);
+
+		gl.shaderSource(vertexShader, vtxShader);
+		gl.compileShader(vertexShader);
+				
+		gl.shaderSource(fragmentShader,frgShader);
+		gl.compileShader(fragmentShader);
+		
+		this.particleProgram = gl.createProgram();
+		gl.attachShader(this.particleProgram, vertexShader);
+		gl.attachShader(this.particleProgram, fragmentShader);
+		gl.linkProgram(this.particleProgram);
+		
+		this.particleProgram.cameraMatrix=gl.getUniformLocation(this.particleProgram, "cameraMatrix");
+		this.particleProgram.pMatrix=gl.getUniformLocation(this.particleProgram, "pMatrix");
+		this.particleProgram.color=gl.getUniformLocation(this.particleProgram, "color");
+		this.particleProgram.size=gl.getUniformLocation(this.particleProgram, "size");
+		this.particleProgram.location=gl.getUniformLocation(this.particleProgram, "location");
+		this.particleProgram.position=gl.getAttribLocation(this.particleProgram, "position");
+		
+		this.particleProgram.mvMatrixArray=new WebGLFloatArray(16);
+		this.particleProgram.pMatrixArray=new WebGLFloatArray(16);
+		
+		this.particleProgram.webGLVertexBuffer = gl.createBuffer();
+		gl.bindBuffer( gl.ARRAY_BUFFER, this.particleProgram.webGLVertexBuffer );
+		gl.bufferData( gl.ARRAY_BUFFER, new WebGLFloatArray(vertexArray), gl.STATIC_DRAW );
+					
+		this.particleProgram.webGLFaceBuffer = gl.createBuffer();
+		gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, this.particleProgram.webGLFaceBuffer );
+		gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, new WebGLUnsignedShortArray(faceArray), gl.STATIC_DRAW );	
+		this.particleProgram.faceNum=faceArray.length;
+		
+		this.particleProgram.cameraMatrixArray=new WebGLFloatArray(16);
+		this.particleProgram.pMatrixArray=new WebGLFloatArray(16);
 	},
 	
 	createProgram: function()
@@ -46,7 +124,7 @@ var GLRenderer = Renderer.extend
 		"varying vec4 vcolor;",
 		"void main(){",
 		"vcolor=color;",
-		"gl_Position = pMatrix*vec4((mvMatrix*vec4(position,1.0)).xyz,1.0);",
+		"gl_Position = pMatrix*mvMatrix*vec4(position,1.0);",
 		"}"
 		].join("");
 		
@@ -61,10 +139,12 @@ var GLRenderer = Renderer.extend
 		var fragmentShader=gl.createShader(gl.FRAGMENT_SHADER);
 
 		gl.shaderSource(vertexShader, vtxShader);
-		
+		gl.compileShader(vertexShader);
+	
 		gl.shaderSource(fragmentShader,frgShader);
 		gl.compileShader(fragmentShader);
 		
+		
 		this.program = gl.createProgram();
 		gl.attachShader(this.program, vertexShader);
 		gl.attachShader(this.program, fragmentShader);
@@ -103,8 +183,7 @@ var GLRenderer = Renderer.extend
 	{		
 		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++)
@@ -113,12 +192,12 @@ var GLRenderer = Renderer.extend
 			if (object instanceof Mesh)
 			{
 				// Very inefficient but easiest way initially
+				
 				var vertexArray = [];
 				var faceArray = [];
 				var colorArray = [];
 				var vertexIndex = 0;
 				var color;
-				var vIndex, cIndex, findex;
 							
 				for (j = 0; j < object.geometry.faces.length; j++)
 				{
@@ -133,7 +212,6 @@ var GLRenderer = Renderer.extend
 					}
 					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 );
@@ -159,11 +237,11 @@ var GLRenderer = Renderer.extend
 					}
 				}
 
-				var vertexArray = new WebGLFloatArray(vertexArray);
-				var colorArray = new WebGLFloatArray(colorArray);
-				var faceArray = new WebGLUnsignedShortArray(faceArray);
+				vertexArray = new WebGLFloatArray(vertexArray);
+				colorArray = new WebGLFloatArray(colorArray);
+				faceArray = new WebGLUnsignedShortArray(faceArray);
+				
 				
-					
 				if (!object.WebGLVertexBuffer) object.WebGLVertexBuffer = gl.createBuffer();
 				gl.bindBuffer( gl.ARRAY_BUFFER, object.WebGLVertexBuffer );
 				gl.bufferData( gl.ARRAY_BUFFER, vertexArray, gl.DYNAMIC_DRAW );
@@ -175,15 +253,14 @@ var GLRenderer = Renderer.extend
 				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 );
-				
-				
+					
 				gl.useProgram(this.program);
 			
 				this.matrix.multiply( camera.matrix, object.matrix );
 				
 				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);
 				
@@ -201,7 +278,39 @@ var GLRenderer = Renderer.extend
 				gl.drawElements(gl.TRIANGLES,faceArray.length, gl.UNSIGNED_SHORT, 0);
 				
 			}
-			//TODO Particles!!
+			else if (object instanceof Particle)
+			{	
+				var color
+				if (object.material instanceof ColorMaterial)
+				{
+					color=object.material.color;
+				}
+				else if (object.material instanceof FaceColorMaterial)
+				{
+					color = face.color;
+				}
+					
+				gl.useProgram(this.particleProgram);
+				
+				gl.bindBuffer(gl.ARRAY_BUFFER, this.particleProgram.webGLVertexBuffer);
+				gl.enableVertexAttribArray(this.particleProgram.position);
+				gl.vertexAttribPointer(this.particleProgram.position, 3, gl.FLOAT, false, 0, 0);
+				
+				gl.uniform3f( this.particleProgram.location, object.position.x, object.position.y, object.position.z );
+				gl.uniform4f( this.particleProgram.color, color.r/255, color.g/255, color.b/255, color.a/255 );
+				gl.uniform1f( this.particleProgram.size, object.size);
+				
+				this.matrix2Array( camera.matrix, this.particleProgram.cameraMatrixArray );
+				this.matrix2Array( camera.projectionMatrix, this.particleProgram.pMatrixArray );
+				
+				gl.uniformMatrix4fv(this.particleProgram.pMatrix, true, this.particleProgram.pMatrixArray);
+				gl.uniformMatrix4fv(this.particleProgram.cameraMatrix, true, this.particleProgram.cameraMatrixArray);
+				
+				gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.particleProgram.webGLFaceBuffer);
+				gl.drawElements(gl.TRIANGLES,this.particleProgram.faceNum, gl.UNSIGNED_SHORT, 0);
+				
+			}
+			
 		}
 	}
 });

src/renderers/Renderer.js

@@ -32,7 +32,7 @@ var Renderer = Class.extend
 
 	sort: function(a, b)
 	{
-		return b.screen.z - a.screen.z;
+		return a.screen.z - b.screen.z;
 	},
 
 	render: function( scene, camera )
@@ -40,18 +40,18 @@ var Renderer = Class.extend
 		var vertex, face, object;
 		var face3count = 0, face4count = 0;
 
+		var focuszoom = camera.focus * camera.zoom;
+
 		this.renderList = new Array();
 
 		for (var i = 0; i < scene.objects.length; i++)
 		{
 			object = scene.objects[i];
 
-			
 			if (object instanceof Mesh)
 			{
-	
 				this.matrix.multiply( camera.matrix, object.matrix );
-				
+
 				// vertices
 
 				for (var j = 0; j < object.geometry.vertices.length; j++)
@@ -61,13 +61,13 @@ var Renderer = Class.extend
 					vertex.screen.copy( vertex );
 
 					this.matrix.transform( vertex.screen );
-					camera.projectionMatrix.transform( vertex.screen );
 
-					vertex.visible = vertex.screen.z > 0 && object.screen.z < 1;		
-					
-					//convert to screen coords
-					vertex.screen.x *= this.widthHalf;
-					vertex.screen.y *= -this.heightHalf; // can't figure out why it's rendering upside down???
+					vertex.screen.z = focuszoom / (camera.focus + vertex.screen.z);
+
+					vertex.visible = vertex.screen.z > 0;					
+
+					vertex.screen.x *= vertex.screen.z;
+					vertex.screen.y *= vertex.screen.z; 
 				}
 
 				// faces
@@ -75,7 +75,7 @@ var Renderer = Class.extend
 				for (j = 0; j < object.geometry.faces.length; j++)
 				{
 					face = object.geometry.faces[j];
-
+					
 					// TODO: Use normals for culling
 
 					if (face instanceof Face3)
@@ -85,7 +85,7 @@ var Renderer = Class.extend
 						   (face.c.screen.y - face.a.screen.y) * (face.b.screen.x - face.a.screen.x) > 0) )
 						{
 							face.screen.z = (face.a.screen.z + face.b.screen.z + face.c.screen.z) * 0.3;
-
+							
 							if (this.face3Pool[face3count] == null)
 								this.face3Pool[face3count] = new Face3(new Vertex(), new Vertex(), new Vertex());
 
@@ -131,26 +131,22 @@ var Renderer = Class.extend
 			}
 			else if (object instanceof Particle)
 			{
-				object.screen=object.position.toVector4();
+				object.screen.copy(object.position);
+
 				camera.matrix.transform( object.screen );
-				camera.projectionMatrix.transform( object.screen );
-				
-				var size=object.screen.x/object.screen.w-(object.screen.x+camera.projectionMatrix.n11)/(object.screen.w+camera.projectionMatrix.n14);
-				object.zsize=Math.abs(size)*object.size;
-				
-				object.screen=object.screen.toVector3();
-				
-				if (object.screen.z > 0 && object.screen.z < 1 
-				&& object.screen.x+object.zsize > -1 && object.screen.x-object.zsize < 1
-				&& object.screen.y+object.zsize > -1 && object.screen.y-object.zsize < 1){
-					object.zsize *= this.widthHalf;
-					object.screen.x *= this.widthHalf;
-					object.screen.y *= this.heightHalf; 
-					this.renderList.push( object );
-				}
+
+				object.screen.z = focuszoom / (camera.focus + object.screen.z);
+
+				if (object.screen.z < 0)
+					continue;					
+
+				object.screen.x *= object.screen.z;
+				object.screen.y *= object.screen.z;
+
+				this.renderList.push( object );
 			}
 		}
 
 		this.renderList.sort(this.sort);
 	}
-});
+});

src/renderers/SVGRenderer.js

@@ -51,7 +51,7 @@ var SVGRenderer = Renderer.extend
 				svgNode = this.getCircleNode(circleCount++);
 				svgNode.setAttribute('cx', element.screen.x);
 				svgNode.setAttribute('cy', element.screen.y);
-				svgNode.setAttribute('r', element.zsize);
+				svgNode.setAttribute('r', element.size * element.screen.z);
 			}
 
 			if (element.material instanceof ColorMaterial)

utils/deployer.py

@@ -1,15 +1,14 @@
 import sys
 import os
 
-# MERGER
-
-rev = 5;
-
+# MERGER
+
+rev = 4;
+
 files = [];
 files.append('Class.js');
 files.append('core/Color.js');
 files.append('core/Vector3.js');
-files.append('core/Vector4.js');
 files.append('core/Matrix4.js');
 files.append('core/Vertex.js');
 files.append('core/Face3.js');
@@ -27,15 +26,14 @@ files.append('scenes/Scene.js');
 files.append('renderers/Renderer.js');
 files.append('renderers/CanvasRenderer.js');
 files.append('renderers/SVGRenderer.js');
-files.append('renderers/GLRenderer.js');
-
-string = '';
-
-for item in files:
-	src_file = open('../src/' + item,'r');
-	string += src_file.read() + "\n";
-
-dep_file = open('temp.js','w');
+
+string = '';
+
+for item in files:
+	src_file = open('../src/' + item,'r');
+	string += src_file.read() + "\n";
+
+dep_file = open('temp.js','w');
 dep_file.write(string);
 dep_file.close();
 
@@ -50,9 +48,9 @@ os.system("java -jar yuicompressor-2.4.2.jar temp.js -o ../build/three.js --char
 output = '../build/three.js';
 string = "// three.js r" + str(rev) + " - http://github.com/mrdoob/three.js\n";
 
-src_file = open(output,'r');
-string += src_file.read();
+src_file = open(output,'r');
+string += src_file.read();
 
-dep_file = open(output,'w');
+dep_file = open(output,'w');
 dep_file.write(string);
 dep_file.close();