Now using projection matrix and particles are culled

examples/geometry/cube.html

@@ -58,8 +58,8 @@
 				info.innerHTML = 'Drag to spin the cube';
 				container.appendChild(info);
 			
-				camera = new Camera(0, 150, 400);
-				camera.focus = 300;
+				camera = new Camera(0, 150, 600);
+				camera.setProjectionMatrix(Matrix4.makePerspective(45, SCREEN_WIDTH/SCREEN_HEIGHT, 0.001, 1000));
 				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.focus = 200;
+				camera.setProjectionMatrix(Matrix4.makePerspective(45, SCREEN_WIDTH/SCREEN_HEIGHT, 10, 10000));
 
 				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.focus = 200;
+				camera = new Camera(0, 0, -1000);
+				camera.setProjectionMatrix(Matrix4.makePerspective(60, SCREEN_WIDTH/SCREEN_HEIGHT, 10, 10000));
 
 				scene = new Scene();
 				

examples/particles/waves.html

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

src/cameras/Camera.js

@@ -1,33 +1,38 @@
-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 + ' )';
-	}
-});
+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 + ' )';
+	}
+});

src/core/Matrix4.js

@@ -1,173 +1,255 @@
-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;
-}
+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);
+}
+
+
+
+
+

src/core/Vector3.js

@@ -126,6 +126,11 @@ 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/core/Vector4.js

@@ -0,0 +1,85 @@
+var Vector4 = Class.extend
+({
+	x: null, y: null, z: null, w: null,
+	// sx: null, sy: null, sz: null,
+	// userData: null,
+
+	dx: null, dy: null, dz: null,
+	tx: null, ty: null, tz: null,
+	// oll: null,
+
+	init: function(x, y, z, w)
+	{
+		this.x = x ? x : 0;
+		this.y = y ? y : 0;
+		this.z = z ? z : 0;
+		this.w = w ? w : 1;
+	},
+
+	copy: function(v)
+	{
+		this.x = v.x;
+		this.y = v.y;
+		this.z = v.z;
+		this.w = v.w;
+	},
+
+	addSelf: function(v)
+	{
+		this.x += v.x;
+		this.y += v.y;
+		this.z += v.z;
+		this.w += v.w;
+	},
+
+	add: function(v1, v2)
+	{
+		this.x = v1.x + v2.x;
+		this.y = v1.y + v2.y;
+		this.z = v1.z + v2.z;
+		this.w = v1.w + v2.w;
+	},
+
+	subSelf: function(v)
+	{
+		this.x -= v.x;
+		this.y -= v.y;
+		this.z -= v.z;
+		this.w -= v.w;
+	},
+
+	sub: function(v1, v2)
+	{
+		this.x = v1.x - v2.x;
+		this.y = v1.y - v2.y;
+		this.z = v1.z - v2.z;
+		this.w = v1.w - v2.w;
+	},
+
+
+	clone: function()
+	{
+		return new Vector4(this.x, this.y, this.z, this.w);
+	},	
+
+	toString: function()
+	{
+		return 'Vector4 (' + this.x + ', ' + this.y + ', ' + this.z + ', ' + this.w + ')';
+	},
+	
+	toVector3: function()
+	{
+		return new Vector3(this.x/this.w,this.y/this.w,this.z/this.w);
+	}
+
+});
+
+Vector4.add = function(a, b)
+{
+	return new Vector3( a.x + b.x, a.y + b.y, a.z + b.z , a.w + b.w );
+}
+
+Vector4.sub = function(a, b)
+{
+	return new Vector3( a.x - b.x, a.y - b.y, a.z - b.z , a.w - b.w );
+}		

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.size * element.screen.z, 0, pi2, true);
+				this.context.arc(element.screen.x, element.screen.y, element.zsize, 0, pi2, true);
 				this.context.fill();
 				this.context.closePath();				
 			}

src/renderers/Renderer.js

@@ -32,7 +32,7 @@ var Renderer = Class.extend
 
 	sort: function(a, b)
 	{
-		return a.screen.z - b.screen.z;
+		return b.screen.z - a.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.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; 
+					vertex.visible = vertex.screen.z > 0 && object.screen.z < 1;		
+					
+					//convert to screen coords
+					vertex.screen.x *= this.widthHalf;
+					vertex.screen.y *= this.heightHalf; 
 				}
 
 				// 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,22 +131,26 @@ var Renderer = Class.extend
 			}
 			else if (object instanceof Particle)
 			{
-				object.screen.copy(object.position);
-
+				object.screen=object.position.toVector4();
 				camera.matrix.transform( object.screen );
-
-				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 );
+				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 );
+				}
 			}
 		}
 
 		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.size * element.screen.z);
+				svgNode.setAttribute('r', element.zsize);
 			}
 
 			if (element.material instanceof ColorMaterial)

utils/deployer.py

@@ -9,6 +9,7 @@ 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');