- Changed Camera system. (Thx [Paul Brunt](http://github.com/supereggbert))

- Object3D.overdraw = true to enable CanvasRenderer screen space point expansion hack.

README.md

@@ -5,15 +5,11 @@ three.js
 
 [![Flattr this](http://api.flattr.com/button/button-compact-static-100x17.png)](http://flattr.com/thing/287/three-js)
 
-Currently the engine only supports particles and triangles/quads with flat colors. The aim is to keep the code as simple and modular as possible.
-
-At the moment the engine can render using <canvas> and <svg>. WebGL rendering would come at a later stage but feel free to fork the project and have a go.
-
-Although this allows 3D for iPhoneOS and Android platforms the performance on these devices is not too good.
+This project is work in progress. Before using it in a project be aware that the syntax may change from revision to revision without being backwards compatible. Currently there is no documentation, feel free to use the demos as a reference and/or read the source code. The engine can render using <canvas> and <svg> so far. WebGL renderer coming soon.
 
 [More info...](http://mrdoob.com/blog/post/693)
 
-Similar projects: [pre3d](http://deanm.github.com/pre3d/), [pvjs](http://code.google.com/p/pvjswebgl/), [jsjl](http://tulrich.com/geekstuff/canvas/perspective.html), [k3d](http://www.kevs3d.co.uk/dev/canvask3d/k3d_test.html), ...
+Other similar projects: [pre3d](http://deanm.github.com/pre3d/), [pvjs](http://code.google.com/p/pvjswebgl/), [jsgl](http://tulrich.com/geekstuff/canvas/perspective.html), [k3d](http://www.kevs3d.co.uk/dev/canvask3d/k3d_test.html), ...
 
 ### Examples ###
 
@@ -37,9 +33,7 @@ The library needs to be included first thing.
 
 	<script type="text/javascript" src="js/three.js"></script>
 
-Now we have access to the engine classes and methods.
-
-This code creates a camera, then creates a scene object, adds a bunch of random particles to the scene, creates a &lt;canvas&gt; renderer and adds its viewport the document.body element.
+This code creates a camera, then creates a scene object, adds a bunch of random particles to the scene, creates a &lt;canvas&gt; renderer and adds its viewport in the document.body element.
 
 	<script type="text/javascript">
 
@@ -50,7 +44,8 @@ This code creates a camera, then creates a scene object, adds a bunch of random
 
 		function init() {
 
-			camera = new THREE.Camera( 0, 0, 1000 );
+			camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
+			camera.position.z = 1000;
 
 			scene = new THREE.Scene();
 
@@ -115,13 +110,18 @@ If you are interested on messing with the actual library, instead of importing t
 
 ### Change Log ###
 
+2010 06 22 - **r10** (23.908 kb)
+
+* Changed Camera system. (Thx [Paul Brunt](http://github.com/supereggbert))
+* Object3D.overdraw = true to enable CanvasRenderer screen space point expansion hack.
+
+
 2010 06 20 - **r9** (23.753 kb)
 
-* JSLinted
+* JSLinted.
 * autoClear property for renderers.
 * Removed SVG rgba() workaround for WebKit. (WebKit now supports it)
-* Fixed matrix bug (transformed objects outside the x axis would get infinitely tall :S)
-* Fixed overdraw when using stroke materials
+* Fixed matrix bug. (transformed objects outside the x axis would get infinitely tall :S)
 
 
 2010 06 06 - **r8** (23.496 kb)
@@ -135,7 +135,7 @@ If you are interested on messing with the actual library, instead of importing t
 
 * Added Line Object.
 * Workaround for WebKit not supporting rgba() in SVG yet.
-* No need to call updateMatrix(). Use .autoUpdateMatrix = false if needed. (thx [Gregory Athons](http://github.com/gregmax17)).
+* No need to call updateMatrix(). Use .autoUpdateMatrix = false if needed. (Thx [Gregory Athons](http://github.com/gregmax17)).
 
 
 2010 05 17 - **r6** (21.003 kb)

examples/geometry_cube.html

@@ -61,8 +61,9 @@
 				info.innerHTML = 'Drag to spin the cube';
 				container.appendChild(info);
 
-				camera = new THREE.Camera(0, 150, 400);
-				camera.focus = 300;
+				camera = new THREE.Camera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
+				camera.position.y = 150;
+				camera.position.z = 1000;
 				camera.target.position.y = 150;
 
 				scene = new THREE.Scene();

examples/geometry_terrain.html

@@ -137,8 +137,8 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.Camera(0, 0, 500);
-				camera.focus = 300;
+				camera = new THREE.Camera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
+				camera.position.z = 1000;
 
 				scene = new THREE.Scene();
 
@@ -166,6 +166,7 @@
 
 				mesh = new THREE.Mesh( plane, material );
 				mesh.rotation.x = -90 * Math.PI / 180;
+				mesh.overdraw = true;
 				scene.add(mesh);
 
 				renderer = new THREE.CanvasRenderer();

examples/geometry_vr.html

@@ -30,7 +30,38 @@
 		<div id="container"></div> 
 		<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - vr demo. skybox by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a></div>
 
-		<script type="text/javascript" src="../build/three.js"></script>
+		<!-- <script type="text/javascript" src="../build/three.js"></script> -->
+
+		<script type="text/javascript" src="../src/Three.js"></script>
+		<script type="text/javascript" src="../src/core/Color.js"></script>
+		<script type="text/javascript" src="../src/core/Vector2.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/Rectangle.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>
+		<script type="text/javascript" src="../src/core/Face4.js"></script>
+		<script type="text/javascript" src="../src/core/Geometry.js"></script>
+		<script type="text/javascript" src="../src/cameras/Camera.js"></script>
+		<script type="text/javascript" src="../src/objects/Object3D.js"></script>
+		<script type="text/javascript" src="../src/objects/Mesh.js"></script>
+		<script type="text/javascript" src="../src/objects/Particle.js"></script>
+		<script type="text/javascript" src="../src/objects/Line.js"></script>
+		<script type="text/javascript" src="../src/materials/BitmapUVMappingMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ColorFillMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/ColorStrokeMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/FaceColorFillMaterial.js"></script>
+		<script type="text/javascript" src="../src/materials/FaceColorStrokeMaterial.js"></script>
+		<script type="text/javascript" src="../src/scenes/Scene.js"></script>
+		<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/renderables/RenderableFace3.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
+
 		<script type="text/javascript" src="primitives/Plane.js"></script>
 
 		<script type="text/javascript">
@@ -54,8 +85,7 @@
 
 				container = document.getElementById( 'container' );
 
-				camera = new THREE.Camera();
-				camera.focus = 300;
+				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
 
 				scene = new THREE.Scene();
 
@@ -63,7 +93,7 @@
 				texture_placeholder.width = 128;
 				texture_placeholder.height = 128;
 
-				wireframe = new THREE.ColorStrokeMaterial(1, 0xffffff, 0);
+				wireframe = new THREE.ColorStrokeMaterial( 1, 0xffffff, 0 );
 
 				var context = texture_placeholder.getContext( '2d' );
 				context.fillStyle = 'rgba( 200, 200, 200, 1 )';
@@ -71,31 +101,37 @@
 
 				mesh = new THREE.Mesh( new Plane( 1000, 1000, 5, 5 ), loadTexture( 'textures/skymap_front1024.jpg' ) );
 				mesh.position.z = -500;
+				mesh.overdraw = true;
 				scene.add( mesh );
 
 				mesh = new THREE.Mesh( new Plane( 1000, 1000, 5, 5 ), loadTexture( 'textures/skymap_back1024.jpg' ) );
 				mesh.position.z = 500;
 				mesh.rotation.y = 180 * Math.PI / 180;
+				mesh.overdraw = true;
 				scene.add( mesh );
 
 				mesh = new THREE.Mesh( new Plane( 1000, 1000, 5, 5 ), loadTexture( 'textures/skymap_left1024.jpg' ) );
 				mesh.position.x = -500;
 				mesh.rotation.y = 90 * Math.PI / 180;
+				mesh.overdraw = true;
 				scene.add( mesh );
 
 				mesh = new THREE.Mesh( new Plane( 1000, 1000, 5, 5 ), loadTexture( 'textures/skymap_right1024.jpg' ) );
 				mesh.position.x = 500;
 				mesh.rotation.y = -90 * Math.PI / 180;
+				mesh.overdraw = true;
 				scene.add( mesh );
 
 				mesh = new THREE.Mesh( new Plane( 1000, 1000, 5, 5 ), loadTexture( 'textures/skymap_top1024.jpg' ) );
 				mesh.position.y = 500;
 				mesh.rotation.x = 90 * Math.PI / 180;
+				mesh.overdraw = true;
 				scene.add( mesh );
 
 				mesh = new THREE.Mesh( new Plane( 1000, 1000, 5, 5 ), loadTexture( 'textures/skymap_bottom1024.jpg' ) );
 				mesh.position.y = -500;
 				mesh.rotation.x = -90 * Math.PI / 180;
+				mesh.overdraw = true;
 				scene.add( mesh );
 
 
@@ -108,8 +144,8 @@
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'mouseup', onDocumentMouseUp, false );
 
-				document.addEventListener('touchstart', onDocumentTouchStart, false);
-				document.addEventListener('touchmove', onDocumentTouchMove, false);
+				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
+				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
 			}
 
@@ -149,7 +185,7 @@
 
 			function onDocumentMouseMove( event ) {
 
-				if (isUserInteracting) {
+				if ( isUserInteracting ) {
 
 					lon = ( onPointerDownPointerX - event.clientX ) * 0.1 + onPointerDownLon;
 					lat = ( event.clientY - onPointerDownPointerY ) * 0.1 + onPointerDownLat;
@@ -164,13 +200,14 @@
 				isUserInteracting = false;
 
 				wireframe.color.setRGBA(255, 255, 255, 0);
+
 				render();
 			}
 
 
 			function onDocumentTouchStart( event ) {
 
-				if(event.touches.length == 1) {
+				if( event.touches.length == 1 ) {
 
 					event.preventDefault();
 
@@ -184,7 +221,7 @@
 
 			function onDocumentTouchMove( event ) {
 
-				if(event.touches.length == 1) {
+				if( event.touches.length == 1 ) {
 
 					event.preventDefault();
 
@@ -202,11 +239,11 @@
 				phi = ( 90 - lat ) * Math.PI / 180;
 				theta = ( lon + 180 ) * Math.PI / 180;
 
-				camera.target.position.x = 500 * Math.sin(phi) * Math.cos(theta);
-				camera.target.position.y = 500 * Math.cos(phi);
-				camera.target.position.z = 500 * Math.sin(phi) * Math.sin(theta);
+				camera.target.position.x = 500 * Math.sin( phi ) * Math.cos( theta );
+				camera.target.position.y = 500 * Math.cos( phi );
+				camera.target.position.z = 500 * Math.sin( phi ) * Math.sin( theta );
 
-				renderer.render(scene, camera);
+				renderer.render( scene, camera );
 
 			}
 

examples/materials_video.html

@@ -66,8 +66,8 @@
 				info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - video demo. playing <a href="http://durian.blender.org/" target="_blank">sintel</a> trailer';
 				container.appendChild(info);
 
-				camera = new THREE.Camera(0, 0, 500);
-				camera.focus = 300;
+				camera = new THREE.Camera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
+				camera.position.z = 1000;
 
 				scene = new THREE.Scene();
 
@@ -105,6 +105,7 @@
 
 				mesh = new THREE.Mesh( plane, material );
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 1.5;
+				mesh.overdraw = true;
 				scene.add(mesh);
 
 				mesh = new THREE.Mesh( plane, materialReflection );
@@ -112,6 +113,7 @@
 				mesh.scale.x = mesh.scale.y = mesh.scale.z = 1.5;
 				mesh.rotation.x = 180 * Math.PI / 180;
 				mesh.doubleSided = true;
+				mesh.overdraw = true;
 				scene.add(mesh);
 
 				//

examples/particles_floor.html

@@ -53,8 +53,8 @@
 				container = document.createElement('div');
 				document.body.appendChild(container);
 
-				camera = new THREE.Camera(0, 0, 1000);
-				camera.focus = 200;
+				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
+				camera.position.z = 1000;
 
 				scene = new THREE.Scene();
 

examples/particles_random.html

@@ -51,8 +51,8 @@
 				container = document.createElement('div');
 				document.body.appendChild(container);
 
-				camera = new THREE.Camera(0, 0, 1000);
-				camera.focus = 200;
+				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
+				camera.position.z = 1000;
 
 				scene = new THREE.Scene();
 
@@ -61,7 +61,7 @@
 
 				for (var i = 0; i < 1000; i++) {
 
-					particle = new THREE.Particle(new THREE.ColorFillMaterial(Math.random() * 0x808008 + 0x808080, 1));
+					particle = new THREE.Particle( new THREE.ColorFillMaterial( Math.random() * 0x808008 + 0x808080, 1 ) );
 					particle.size = Math.random() * 10 + 5;
 					particle.position.x = Math.random() * 2000 - 1000;
 					particle.position.y = Math.random() * 2000 - 1000;

examples/particles_waves.html

@@ -53,8 +53,8 @@
 				container = document.createElement('div');
 				document.body.appendChild(container);
 
-				camera = new THREE.Camera(0, 0, 1000);
-				camera.focus = 200;
+				camera = new THREE.Camera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
+				camera.position.z = 1000;
 
 				scene = new THREE.Scene();
 

examples/primitives/Plane.js

@@ -25,7 +25,7 @@ var Plane = function ( width, height, segments_width, segments_height ) {
 			var x = ix * segment_width - width_half;
 			var y = iy * segment_height - height_half;
 
-			this.vertices.push( new THREE.Vertex( new THREE.Vector3( x, -y, 0 ) ) );
+			this.vertices.push( new THREE.Vertex( new THREE.Vector3( x, - y, 0 ) ) );
 
 		}
 

src/cameras/Camera.js

@@ -2,19 +2,14 @@
  * @author mr.doob / http://mrdoob.com/
  */
 
-THREE.Camera = function ( x, y, z ) {
+THREE.Camera = function ( fov, aspect, near, far ) {
 
-	this.position = new THREE.Vector3( x, y, z );
+	this.position = new THREE.Vector3( 0, 0, 0 );
 	this.target = { position: new THREE.Vector3( 0, 0, 0 ) };
 
-	this.matrix = new THREE.Matrix4();
-	this.projectionMatrix = THREE.Matrix4.makePerspective( 45, 1 /*SCREEN_WIDTH/SCREEN_HEIGHT*/, 0.001, 1000 );
-
+	this.projectionMatrix = THREE.Matrix4.makePerspective( fov, aspect, near, far );
 	this.up = new THREE.Vector3( 0, 1, 0 );
-
-	// TODO: Need to remove this
-	this.zoom = 3;
-	this.focus = 500;
+	this.matrix = new THREE.Matrix4();
 
 	this.autoUpdateMatrix = true;
 
@@ -24,10 +19,12 @@ THREE.Camera = function ( x, y, z ) {
 
 	};
 
+	this.updateMatrix();
+
 	this.toString = function () {
 
 		return 'THREE.Camera ( ' + this.position + ', ' + this.target.position + ' )';
+
 	};
 
-	this.updateMatrix();
 };

src/core/Color.js

@@ -6,7 +6,7 @@ THREE.Color = function ( hex ) {
 
 	var _r, _g, _b, _a, _hex;
 
-	this.__styleString = "rgba(0,0,0,1)";
+	this.__styleString = "rgba(0, 0, 0, 1)";
 
 	this.setHex = function ( hex ) {
 
@@ -30,7 +30,7 @@ THREE.Color = function ( hex ) {
 
 	this.updateHex = function () {
 
-		_hex = _a * 255 << 24 | _r << 16 | _g << 8 | _b;
+		_hex = Math.floor( _a * 255 ) << 24 | _r << 16 | _g << 8 | _b;
 
 	};
 

src/core/Face3.js

@@ -11,7 +11,7 @@ THREE.Face3 = function ( a, b, c, normal, color ) {
 	this.normal = normal || new THREE.Vector3();
 	this.screen = new THREE.Vector3();
 
-	this.color = color || new THREE.Color();
+	this.color = color || new THREE.Color( 0x000000 );
 
 	this.toString = function () {
 

src/core/Face4.js

@@ -12,7 +12,7 @@ THREE.Face4 = function ( a, b, c, d, normal, color ) {
 	this.normal = normal || new THREE.Vector3();
 	this.screen = new THREE.Vector3();
 
-	this.color = color || new THREE.Color();
+	this.color = color || new THREE.Color( 0x000000 );
 
 	this.toString = function () {
 

src/core/Matrix4.js

@@ -26,15 +26,15 @@ THREE.Matrix4 = function () {
 
 	this.lookAt = function ( eye, center, up ) {
 
-		z.sub( center, eye );
+		z.sub( eye, center );
 		z.normalize();
 
-		x.copy( z );
-		x.crossSelf( up );
+		x.copy( up );
+		x.crossSelf( z );
 		x.normalize();
 
-		y.copy( x );
-		y.crossSelf( z );
+		y.copy( z );
+		y.crossSelf( x );
 		y.normalize();
 		y.negate();
 
@@ -217,13 +217,14 @@ THREE.Matrix4.rotationZMatrix = function( theta ) {
 
 THREE.Matrix4.makeFrustum = function( left, right, bottom, top, near, far ) {
 
-	var m = new THREE.Matrix4(),
+	var m, x, y, a, b, c, d;
 
-	x = 2 * near / ( right - left ),
-	y = 2 * near / ( top - bottom ),
-	a = ( right + left ) / ( right - left ),
-	b = ( top + bottom ) / ( top - bottom ),
-	c = - ( far + near ) / ( far - near ),
+	m = new THREE.Matrix4();
+	x = 2 * near / ( right - left );
+	y = 2 * near / ( top - bottom );
+	a = ( right + left ) / ( right - left );
+	b = ( top + bottom ) / ( top - bottom );
+	c = - ( far + near ) / ( far - near );
 	d = - 2 * far * near / ( far - near );
 
 	m.n11 = x; m.n13 = a;
@@ -235,11 +236,13 @@ THREE.Matrix4.makeFrustum = function( left, right, bottom, top, near, far ) {
 
 };
 
-THREE.Matrix4.makePerspective = function( fovy, aspect, near, far ) {
+THREE.Matrix4.makePerspective = function( fov, aspect, near, far ) {
 
-	var ymax = near * Math.tan( fovy * 0.00872664625972 ),
-	ymin = - ymax,
-	xmin = ymin * aspect,
+	var ymax, ymin, xmin, xmax;
+
+	ymax = near * Math.tan( fov * Math.PI / 360 );
+	ymin = - ymax;
+	xmin = ymin * aspect;
 	xmax = ymax * aspect;
 
 	return THREE.Matrix4.makeFrustum( xmin, xmax, ymin, ymax, near, far );

src/core/Vector3.js

@@ -1,6 +1,6 @@
 /**
- * @author kile / http://kile.stravaganza.org/
  * @author mr.doob / http://mrdoob.com/
+ * @author kile / http://kile.stravaganza.org/
  */
 
 THREE.Vector3 = function ( x, y, z ) {
@@ -133,11 +133,11 @@ THREE.Vector3 = function ( x, y, z ) {
 
 		if (this.length() > 0) {
 
-			this.multiplyScalar(1 / this.length());
+			this.multiplyScalar( 1 / this.length() );
 
 		} else {
 
-			this.multiplyScalar(0);
+			this.multiplyScalar( 0 );
 
 		}
 
@@ -145,13 +145,13 @@ THREE.Vector3 = function ( x, y, z ) {
 
 	this.clone = function () {
 
-		return new THREE.Vector3(this.x, this.y, this.z);
+		return new THREE.Vector3( this.x, this.y, this.z );
 
 	};
 
 	this.toString = function () {
 
-		return 'THREE.Vector3 (' + this.x + ', ' + this.y + ', ' + this.z + ')';
+		return 'THREE.Vector3 ( ' + this.x + ', ' + this.y + ', ' + this.z + ' )';
 
 	};
 

src/core/Vector4.js

@@ -69,12 +69,6 @@ THREE.Vector4 = function ( x, y, z, w ) {
 
 	};
 
-	this.toVector3 = function () {
-
-		return new THREE.Vector3( this.x / this.w, this.y / this.w, this.z / this.w );
-
-	};
-
 	this.toString = function () {
 
 		return 'THREE.Vector4 (' + this.x + ', ' + this.y + ', ' + this.z + ', ' + this.w + ')';

src/objects/Object3D.js

@@ -12,6 +12,7 @@ THREE.Object3D = function ( material ) {
 	this.screen = new THREE.Vector3();
 
 	this.material = material instanceof Array ? material : [ material ];
+	this.overdraw = false;
 
 	this.autoUpdateMatrix = true;
 

src/renderers/CanvasRenderer.js

@@ -8,6 +8,7 @@ THREE.CanvasRenderer = function () {
 
 	var _viewport = document.createElement( "canvas" ),
 	_context = _viewport.getContext( "2d" ),
+	_width, _height, _widthHalf, _heightHalf,
 	_clipRect = new THREE.Rectangle(),
 	_clearRect = new THREE.Rectangle( 0, 0, 0, 0 ),
 	_bboxRect = new THREE.Rectangle(),
@@ -18,12 +19,15 @@ THREE.CanvasRenderer = function () {
 
 	this.setSize = function ( width, height ) {
 
-		_viewport.width = width;
-		_viewport.height = height;
+		_width = width; _height = height;
+		_widthHalf = _width / 2; _heightHalf = _height / 2;
 
-		_context.setTransform( 1, 0, 0, 1, width / 2, height / 2 );
+		_viewport.width = _width;
+		_viewport.height = _height;
 
-		_clipRect.set( -width / 2, -height / 2, width / 2, height / 2 );
+		_context.setTransform( 1, 0, 0, 1, _widthHalf, _heightHalf );
+
+		_clipRect.set( - _widthHalf, - _heightHalf, _widthHalf, _heightHalf );
 
 	};
 
@@ -45,8 +49,7 @@ THREE.CanvasRenderer = function () {
 		uv1 = new THREE.Vector2(), uv2 = new THREE.Vector2(), uv3 = new THREE.Vector2(),
 		suv1 = new THREE.Vector2(), suv2 = new THREE.Vector2(), suv3 = new THREE.Vector2(),
 		suv1x, suv1y, suv2x, suv2y, suv3x, suv3y, denom, m11, m12, m21, m22, dx, dy,
-		bitmap, bitmap_width, bitmap_height,
-		size, overdraw;
+		bitmap, bitmapWidth, bitmapHeight, size;
 
 		if ( this.autoClear ) {
 
@@ -69,112 +72,120 @@ THREE.CanvasRenderer = function () {
 
 			materialLength = element.material.length;
 
-			for ( j = 0; j < materialLength; j++ ) {
+			_bboxRect.empty();
 
-				material = element.material[ j ];
+			_context.beginPath();
 
-				overdraw = material instanceof THREE.ColorFillMaterial || material instanceof THREE.FaceColorFillMaterial || material instanceof THREE.BitmapUVMappingMaterial;
+			if ( element instanceof THREE.RenderableParticle ) {
 
-				_bboxRect.empty();
+				v1x = element.x * _widthHalf; v1y = element.y * _heightHalf;
+				size = element.size * _widthHalf;
 
-				_context.beginPath();
+				_bboxRect.set( v1x - size, v1y - size, v1x + size, v1y + size );
 
-				if ( element instanceof THREE.RenderableParticle ) {
+				if ( !_clipRect.instersects( _bboxRect ) ) {
 
-					size = element.size * element.screenZ;
+					continue;
 
-					_bboxRect.set( element.x - size, element.y - size, element.x + size, element.y + size );
+				}
 
-					if ( !_clipRect.instersects( _bboxRect ) ) {
+				_context.arc( v1x, v1y, size, 0, pi2, true );
 
-						continue;
+			} else if ( element instanceof THREE.RenderableLine ) {
 
-					}
+				v1x = element.v1.x * _widthHalf; v1y = element.v1.y * _heightHalf;
+				v2x = element.v2.x * _widthHalf; v2y = element.v2.y * _heightHalf;
+
+				_bboxRect.addPoint( v1x, v1y );
+				_bboxRect.addPoint( v2x, v2y );
 
-					_context.arc( element.x, element.y, size, 0, pi2, true );
+				if ( !_clipRect.instersects( _bboxRect ) ) {
 
-				} else if ( element instanceof THREE.RenderableLine ) {
+					continue;
 
-					v1x = element.v1.x; v1y = element.v1.y;
-					v2x = element.v2.x; v2y = element.v2.y;
+				}
 
-					_bboxRect.addPoint( v1x, v1y );
-					_bboxRect.addPoint( v2x, v2y );
+				_context.moveTo( v1x, v1y );
+				_context.lineTo( v2x, v2y );
 
-					if ( !_clipRect.instersects( _bboxRect ) ) {
+			} else if ( element instanceof THREE.RenderableFace3 ) {
 
-						continue;
+				element.v1.x *= _widthHalf; element.v1.y *= _heightHalf;
+				element.v2.x *= _widthHalf; element.v2.y *= _heightHalf;
+				element.v3.x *= _widthHalf; element.v3.y *= _heightHalf;
 
-					}
+				if ( element.overdraw ) {
 
-					_context.moveTo( v1x, v1y );
-					_context.lineTo( v2x, v2y );
+					expand( element.v1, element.v2 );
+					expand( element.v2, element.v3 );
+					expand( element.v3, element.v1 );
 
-				} else if ( element instanceof THREE.RenderableFace3 ) {
+				}
 
-					if ( overdraw ) {
+				v1x = element.v1.x; v1y = element.v1.y;
+				v2x = element.v2.x; v2y = element.v2.y;
+				v3x = element.v3.x; v3y = element.v3.y;
 
-						expand( element.v1, element.v2 );
-						expand( element.v2, element.v3 );
-						expand( element.v3, element.v1 );
+				_bboxRect.addPoint( v1x, v1y );
+				_bboxRect.addPoint( v2x, v2y );
+				_bboxRect.addPoint( v3x, v3y );
 
-					}
+				if ( !_clipRect.instersects( _bboxRect ) ) {
 
-					v1x = element.v1.x; v1y = element.v1.y;
-					v2x = element.v2.x; v2y = element.v2.y;
-					v3x = element.v3.x; v3y = element.v3.y;
+					continue;
 
-					_bboxRect.addPoint( v1x, v1y );
-					_bboxRect.addPoint( v2x, v2y );
-					_bboxRect.addPoint( v3x, v3y );
+				}
 
-					if ( !_clipRect.instersects( _bboxRect ) ) {
+				_context.moveTo( v1x, v1y );
+				_context.lineTo( v2x, v2y );
+				_context.lineTo( v3x, v3y );
+				_context.lineTo( v1x, v1y );
 
-						continue;
+			} else if ( element instanceof THREE.RenderableFace4 ) {
 
-					}
+				element.v1.x *= _widthHalf; element.v1.y *= _heightHalf;
+				element.v2.x *= _widthHalf; element.v2.y *= _heightHalf;
+				element.v3.x *= _widthHalf; element.v3.y *= _heightHalf;
+				element.v4.x *= _widthHalf; element.v4.y *= _heightHalf;
 
-					_context.moveTo( v1x, v1y );
-					_context.lineTo( v2x, v2y );
-					_context.lineTo( v3x, v3y );
-					_context.lineTo( v1x, v1y );
+				if ( element.overdraw ) {
 
-				} else if ( element instanceof THREE.RenderableFace4 ) {
+					expand( element.v1, element.v2 );
+					expand( element.v2, element.v3 );
+					expand( element.v3, element.v4 );
+					expand( element.v4, element.v1 );
 
-					if ( overdraw ) {
+				}
 
-						expand( element.v1, element.v2 );
-						expand( element.v2, element.v3 );
-						expand( element.v3, element.v4 );
-						expand( element.v4, element.v1 );
+				v1x = element.v1.x; v1y = element.v1.y;
+				v2x = element.v2.x; v2y = element.v2.y;
+				v3x = element.v3.x; v3y = element.v3.y;
+				v4x = element.v4.x; v4y = element.v4.y;
 
-					}
+				_bboxRect.addPoint( v1x, v1y );
+				_bboxRect.addPoint( v2x, v2y );
+				_bboxRect.addPoint( v3x, v3y );
+				_bboxRect.addPoint( v4x, v4y );
 
-					v1x = element.v1.x; v1y = element.v1.y;
-					v2x = element.v2.x; v2y = element.v2.y;
-					v3x = element.v3.x; v3y = element.v3.y;
-					v4x = element.v4.x; v4y = element.v4.y;
+				if ( !_clipRect.instersects( _bboxRect ) ) {
 
-					_bboxRect.addPoint( v1x, v1y );
-					_bboxRect.addPoint( v2x, v2y );
-					_bboxRect.addPoint( v3x, v3y );
-					_bboxRect.addPoint( v4x, v4y );
+					continue;
 
-					if ( !_clipRect.instersects( _bboxRect ) ) {
+				}
 
-						continue;
+				_context.moveTo( v1x, v1y );
+				_context.lineTo( v2x, v2y );
+				_context.lineTo( v3x, v3y );
+				_context.lineTo( v4x, v4y );
+				_context.lineTo( v1x, v1y );
 
-					}
+			}
 
-					_context.moveTo( v1x, v1y );
-					_context.lineTo( v2x, v2y );
-					_context.lineTo( v3x, v3y );
-					_context.lineTo( v4x, v4y );
-					_context.lineTo( v1x, v1y );
+			_context.closePath();
 
-				}
+			for ( j = 0; j < materialLength; j++ ) {
 
-				_context.closePath();
+				material = element.material[ j ];
 
 				if ( material instanceof THREE.ColorFillMaterial ) {
 
@@ -211,28 +222,36 @@ THREE.CanvasRenderer = function () {
 				} else if ( material instanceof THREE.BitmapUVMappingMaterial ) {
 
 					bitmap = material.bitmap;
-					bitmap_width = bitmap.width;
-					bitmap_height = bitmap.height;
+					bitmapWidth = bitmap.width;
+					bitmapHeight = bitmap.height;
 
 					uv1.copy( element.uvs[ 0 ] ); uv2.copy( element.uvs[ 1 ] ); uv3.copy( element.uvs[ 2 ] );
 					suv1.copy( uv1 ); suv2.copy( uv2 ); suv3.copy( uv3 );
 
-					suv1.x *= bitmap_width; suv1.y *= bitmap_height;
-					suv2.x *= bitmap_width; suv2.y *= bitmap_height;
-					suv3.x *= bitmap_width; suv3.y *= bitmap_height;
+					suv1.x *= bitmapWidth; suv1.y *= bitmapHeight;
+					suv2.x *= bitmapWidth; suv2.y *= bitmapHeight;
+					suv3.x *= bitmapWidth; suv3.y *= bitmapHeight;
+
+					if ( element.overdraw ) {
 
-					expand( suv1, suv2 );
-					expand( suv2, suv3 );
-					expand( suv3, suv1 );
+						expand( suv1, suv2 );
+						expand( suv2, suv3 );
+						expand( suv3, suv1 );
 
-					suv1x = ( uv1.x === 0 ) ? 1 : ( uv1.x === 1 ) ? suv1.x - 1 : suv1.x;
-					suv1y = ( uv1.y === 0 ) ? 1 : ( uv1.y === 1 ) ? suv1.y - 1 : suv1.y;
+						suv1.x = ( uv1.x === 0 ) ? 1 : ( uv1.x === 1 ) ? suv1.x - 1 : suv1.x;
+						suv1.y = ( uv1.y === 0 ) ? 1 : ( uv1.y === 1 ) ? suv1.y - 1 : suv1.y;
 
-					suv2x = ( uv2.x === 0 ) ? 1 : ( uv2.x === 1 ) ? suv2.x - 1 : suv2.x;
-					suv2y = ( uv2.y === 0 ) ? 1 : ( uv2.y === 1 ) ? suv2.y - 1 : suv2.y;
+						suv2.x = ( uv2.x === 0 ) ? 1 : ( uv2.x === 1 ) ? suv2.x - 1 : suv2.x;
+						suv2.y = ( uv2.y === 0 ) ? 1 : ( uv2.y === 1 ) ? suv2.y - 1 : suv2.y;
+
+						suv3.x = ( uv3.x === 0 ) ? 1 : ( uv3.x === 1 ) ? suv3.x - 1 : suv3.x;
+						suv3.y = ( uv3.y === 0 ) ? 1 : ( uv3.y === 1 ) ? suv3.y - 1 : suv3.y;
+
+					}
 
-					suv3x = ( uv3.x === 0 ) ? 1 : ( uv3.x === 1 ) ? suv3.x - 1 : suv3.x;
-					suv3y = ( uv3.y === 0 ) ? 1 : ( uv3.y === 1 ) ? suv3.y - 1 : suv3.y;
+					suv1x = suv1.x; suv1y = suv1.y;
+					suv2x = suv2.x; suv2y = suv2.y;
+					suv3x = suv3.x; suv3y = suv3.y;
 
 					// Textured triangle drawing by Thatcher Ulrich.
 					// http://tulrich.com/geekstuff/canvas/jsgl.js

src/renderers/Renderer.js

@@ -1,5 +1,6 @@
 /**
  * @author mr.doob / http://mrdoob.com/
+ * @author supereggbert / http://www.paulbrunt.co.uk/
  */
 
 THREE.Renderer = function() {
@@ -9,11 +10,12 @@ THREE.Renderer = function() {
 	linePool = [],
 	particlePool = [],
 
+	vector4 = new THREE.Vector4(),
 	matrix = new THREE.Matrix4();
 
-	function painterSort(a, b) {
+	function painterSort( a, b ) {
 
-		return a.screenZ - b.screenZ;
+		return b.z - a.z;
 
 	}
 
@@ -23,49 +25,43 @@ THREE.Renderer = function() {
 
 		var i, j, vertex, vertex2, face, object, v1, v2, v3, v4,
 		face3count = 0, face4count = 0, lineCount = 0, particleCount = 0,
-		camerafocus = camera.focus, focuszoom = camera.focus * camera.zoom,
 		verticesLength = 0, facesLength = 0;
 
 		this.renderList = [];
 
-		if(camera.autoUpdateMatrix) {
+		if( camera.autoUpdateMatrix ) {
 
 			camera.updateMatrix();
 
 		}
 
-		for (i = 0; i < scene.objects.length; i++) {
+		for ( i = 0; i < scene.objects.length; i++ ) {
 
 			object = scene.objects[i];
 
-			if(object.autoUpdateMatrix) {
+			if( object.autoUpdateMatrix ) {
 
 				object.updateMatrix();
 
 			}
 
-			if (object instanceof THREE.Mesh) {
+			if ( object instanceof THREE.Mesh ) {
 
-				matrix.multiply(camera.matrix, object.matrix);
+				matrix.multiply( camera.matrix, object.matrix );
 
 				// vertices
 
 				verticesLength = object.geometry.vertices.length;
 
-				for (j = 0; j < verticesLength; j++) {
+				for ( j = 0; j < verticesLength; j++ ) {
 
-					vertex = object.geometry.vertices[j];
+					vertex = object.geometry.vertices[ j ];
+					vertex.screen.copy( vertex.position );
 
-					vertex.screen.copy(vertex.position);
+					matrix.transform( vertex.screen );
+					camera.projectionMatrix.transform( vertex.screen );
 
-					matrix.transform(vertex.screen);
-
-					vertex.screen.z = focuszoom / (camerafocus + 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 && vertex.screen.z < 1;
 
 				}
 
@@ -73,175 +69,170 @@ THREE.Renderer = function() {
 
 				facesLength = object.geometry.faces.length;
 
-				for (j = 0; j < facesLength; j++) {
+				for ( j = 0; j < facesLength; j++ ) {
 
-					face = object.geometry.faces[j];
+					face = object.geometry.faces[ j ];
 
-					// TODO: Use normals for culling
+					// TODO: Use normals for culling... maybe not?
 
 					if (face instanceof THREE.Face3) {
 
-						v1 = object.geometry.vertices[face.a];
-						v2 = object.geometry.vertices[face.b];
-						v3 = object.geometry.vertices[face.c];
+						v1 = object.geometry.vertices[ face.a ];
+						v2 = object.geometry.vertices[ face.b ];
+						v3 = object.geometry.vertices[ face.c ];
 
-						if (v1.__visible && v2.__visible && v3.__visible && (object.doubleSided ||
-						   (v3.screen.x - v1.screen.x) * (v2.screen.y - v1.screen.y) -
-						   (v3.screen.y - v1.screen.y) * (v2.screen.x - v1.screen.x) > 0) ) {
+						if ( v1.__visible && v2.__visible && v3.__visible && ( object.doubleSided ||
+						   ( v3.screen.x - v1.screen.x ) * ( v2.screen.y - v1.screen.y ) -
+						   ( v3.screen.y - v1.screen.y ) * ( v2.screen.x - v1.screen.x ) > 0 ) ) {
 
-							face.screen.z = (v1.screen.z + v2.screen.z + v3.screen.z) * 0.3;
+							face.screen.z = Math.max( v1.screen.z, Math.max( v2.screen.z, v3.screen.z ) );
 
-							if (!face3Pool[face3count]) {
+							if ( !face3Pool[ face3count ] ) {
 
-								face3Pool[face3count] = new THREE.RenderableFace3();
+								face3Pool[ face3count ] = new THREE.RenderableFace3();
 
 							}
 
-							face3Pool[face3count].v1.x = v1.screen.x;
-							face3Pool[face3count].v1.y = v1.screen.y;
-							face3Pool[face3count].v2.x = v2.screen.x;
-							face3Pool[face3count].v2.y = v2.screen.y;
-							face3Pool[face3count].v3.x = v3.screen.x;
-							face3Pool[face3count].v3.y = v3.screen.y;
-							face3Pool[face3count].screenZ = face.screen.z;
+							face3Pool[ face3count ].v1.x = v1.screen.x;
+							face3Pool[ face3count ].v1.y = v1.screen.y;
+							face3Pool[ face3count ].v2.x = v2.screen.x;
+							face3Pool[ face3count ].v2.y = v2.screen.y;
+							face3Pool[ face3count ].v3.x = v3.screen.x;
+							face3Pool[ face3count ].v3.y = v3.screen.y;
+							face3Pool[ face3count ].z = face.screen.z;
 
-							face3Pool[face3count].material = object.material;
-							face3Pool[face3count].uvs = object.geometry.uvs[j];
-							face3Pool[face3count].color = face.color;
+							face3Pool[ face3count ].material = object.material;
+							face3Pool[ face3count ].overdraw = object.overdraw;
+							face3Pool[ face3count ].uvs = object.geometry.uvs[j];
+							face3Pool[ face3count ].color = face.color;
 
 							this.renderList.push(face3Pool[face3count]);
 
 							face3count++;
 						}
 
-					} else if (face instanceof THREE.Face4) {
+					} else if ( face instanceof THREE.Face4 ) {
 
-						v1 = object.geometry.vertices[face.a];
-						v2 = object.geometry.vertices[face.b];
-						v3 = object.geometry.vertices[face.c];
-						v4 = object.geometry.vertices[face.d];
+						v1 = object.geometry.vertices[ face.a ];
+						v2 = object.geometry.vertices[ face.b ];
+						v3 = object.geometry.vertices[ face.c ];
+						v4 = object.geometry.vertices[ face.d ];
 
-						if (v1.__visible && v2.__visible && v3.__visible && v4.__visible && (object.doubleSided ||
-						   ((v4.screen.x - v1.screen.x) * (v2.screen.y - v1.screen.y) -
-						   (v4.screen.y - v1.screen.y) * (v2.screen.x - v1.screen.x) > 0 ||
-						   (v2.screen.x - v3.screen.x) * (v4.screen.y - v3.screen.y) -
-						   (v2.screen.y - v3.screen.y) * (v4.screen.x - v3.screen.x) > 0)) ) {
+						if ( v1.__visible && v2.__visible && v3.__visible && v4.__visible && (object.doubleSided ||
+						   ( ( v4.screen.x - v1.screen.x ) * ( v2.screen.y - v1.screen.y ) -
+						   ( v4.screen.y - v1.screen.y ) * ( v2.screen.x - v1.screen.x ) > 0 ||
+						   ( v2.screen.x - v3.screen.x ) * ( v4.screen.y - v3.screen.y ) -
+						   ( v2.screen.y - v3.screen.y ) * ( v4.screen.x - v3.screen.x ) > 0 ) ) ) {
 
-							face.screen.z = (v1.screen.z + v2.screen.z + v3.screen.z + v4.screen.z) * 0.25;
+							face.screen.z = Math.max( v1.screen.z, Math.max( v2.screen.z, Math.max( v3.screen.z, v4.screen.z ) ) );
 
-							if (!face4Pool[face4count]) {
+							if ( !face4Pool[ face4count ] ) {
 
-								face4Pool[face4count] = new THREE.RenderableFace4();
+								face4Pool[ face4count ] = new THREE.RenderableFace4();
 
 							}
 
-							face4Pool[face4count].v1.x = v1.screen.x;
-							face4Pool[face4count].v1.y = v1.screen.y;
-							face4Pool[face4count].v2.x = v2.screen.x;
-							face4Pool[face4count].v2.y = v2.screen.y;
-							face4Pool[face4count].v3.x = v3.screen.x;
-							face4Pool[face4count].v3.y = v3.screen.y;
-							face4Pool[face4count].v4.x = v4.screen.x;
-							face4Pool[face4count].v4.y = v4.screen.y;
-							face4Pool[face4count].screenZ = face.screen.z;
+							face4Pool[ face4count ].v1.x = v1.screen.x;
+							face4Pool[ face4count ].v1.y = v1.screen.y;
+							face4Pool[ face4count ].v2.x = v2.screen.x;
+							face4Pool[ face4count ].v2.y = v2.screen.y;
+							face4Pool[ face4count ].v3.x = v3.screen.x;
+							face4Pool[ face4count ].v3.y = v3.screen.y;
+							face4Pool[ face4count ].v4.x = v4.screen.x;
+							face4Pool[ face4count ].v4.y = v4.screen.y;
+							face4Pool[ face4count ].z = face.screen.z;
 
-							face4Pool[face4count].material = object.material;
-							face4Pool[face4count].uvs = object.geometry.uvs[j];
-							face4Pool[face4count].color = face.color;
+							face4Pool[ face4count ].material = object.material;
+							face4Pool[ face4count ].overdraw = object.overdraw;
+							face4Pool[ face4count ].uvs = object.geometry.uvs[j];
+							face4Pool[ face4count ].color = face.color;
 
-							this.renderList.push(face4Pool[face4count]);
+							this.renderList.push( face4Pool[ face4count ] );
 
 							face4count++;
 						}
 					}
 				}
 
-			} else if (object instanceof THREE.Line) {
+			} else if ( object instanceof THREE.Line ) {
 
-				matrix.multiply(camera.matrix, object.matrix);
+				matrix.multiply( camera.matrix, object.matrix );
 
 				verticesLength = object.geometry.vertices.length;
 
-				for (j = 0; j < verticesLength; j++) {
+				for ( j = 0; j < verticesLength; j++ ) {
 
-					vertex = object.geometry.vertices[j];
+					vertex = object.geometry.vertices[ j ];
+					vertex.screen.copy( vertex.position );
 
-					vertex.screen.copy(vertex.position);
+					matrix.transform( vertex.screen );
+					camera.projectionMatrix.transform( vertex.screen );
 
-					matrix.transform(vertex.screen);
+					vertex.__visible = vertex.screen.z > 0 && vertex.screen.z < 1;
 
-					vertex.screen.z = focuszoom / (camerafocus + vertex.screen.z);
+					if ( j > 0 ) {
 
-					vertex.visible = vertex.screen.z > 0;
+						vertex2 = object.geometry.vertices[ j - 1 ];
 
-					vertex.screen.x *= vertex.screen.z;
-					vertex.screen.y *= vertex.screen.z;
+						if ( vertex.__visible && vertex2.__visible ) {
 
-					if (j > 0) {
+							if ( !linePool[ lineCount ] ) {
 
-						vertex2 = object.geometry.vertices[j-1];
+								linePool[ lineCount ] = new THREE.RenderableLine();
 
-						if (!vertex.visible || !vertex2.visible) {
+							}
 
-							continue;
-						}
+							linePool[ lineCount ].v1.x = vertex.screen.x;
+							linePool[ lineCount ].v1.y = vertex.screen.y;
+							linePool[ lineCount ].v2.x = vertex2.screen.x;
+							linePool[ lineCount ].v2.y = vertex2.screen.y;
+							linePool[ lineCount ].z = Math.max( vertex.screen.z, vertex2.screen.z );
+							linePool[ lineCount ].material = object.material;
 
-						if (!linePool[lineCount]) {
+							this.renderList.push( linePool[lineCount] );
 
-							linePool[lineCount] = new THREE.RenderableLine();
+							lineCount++;
 
 						}
-
-						linePool[lineCount].v1.x = vertex.screen.x;
-						linePool[lineCount].v1.y = vertex.screen.y;
-						linePool[lineCount].v2.x = vertex2.screen.x;
-						linePool[lineCount].v2.y = vertex2.screen.y;
-						linePool[lineCount].screenZ = (vertex.screen.z + vertex2.screen.z) * 0.5;
-						linePool[lineCount].material = object.material;
-
-						this.renderList.push( linePool[lineCount] );
-
-						lineCount++;
 					}
 				}
 
-			} else if (object instanceof THREE.Particle) {
+			} else if ( object instanceof THREE.Particle ) {
 
-				object.screen.copy(object.position);
+				vector4.set( object.position.x, object.position.y, object.position.z, 1 );
 
-				camera.matrix.transform(object.screen);
+				camera.matrix.transform( vector4 );
+				camera.projectionMatrix.transform( vector4 );
 
-				object.screen.z = focuszoom / (camerafocus + object.screen.z);
+				object.screen.set( vector4.x / vector4.w, vector4.y / vector4.w, vector4.z / vector4.w );
 
-				if (object.screen.z < 0) {
+				if ( object.screen.z > 0 && object.screen.z < 1 ) {
 
-					continue;
-				}
+					if ( !particlePool[ particleCount ] ) {
 
-				object.screen.x *= object.screen.z;
-				object.screen.y *= object.screen.z;
+						particlePool[ particleCount ] = new THREE.RenderableParticle();
 
-				if (!particlePool[particleCount]) {
+					}
 
-					particlePool[particleCount] = new THREE.RenderableParticle();
+					particlePool[ particleCount ].x = object.screen.x;
+					particlePool[ particleCount ].y = object.screen.y;
+					particlePool[ particleCount ].z = object.screen.z;
 
-				}
+					particlePool[ particleCount ].size = object.size * Math.abs( vector4.x / vector4.w - ( vector4.x + camera.projectionMatrix.n11 ) / ( vector4.w + camera.projectionMatrix.n14 ) );
+					particlePool[ particleCount ].material = object.material;
+					particlePool[ particleCount ].color = object.color;
 
-				particlePool[particleCount].x = object.screen.x;
-				particlePool[particleCount].y = object.screen.y;
-				particlePool[particleCount].screenZ = object.screen.z;
+					this.renderList.push( particlePool[particleCount] );
 
-				particlePool[particleCount].size = object.size;
-				particlePool[particleCount].material = object.material;
-				particlePool[particleCount].color = object.color;
+					particleCount++;
 
-				this.renderList.push( particlePool[particleCount] );
+				}
 
-				particleCount++;
 			}
+
 		}
 
-		this.renderList.sort(painterSort);
+		this.renderList.sort( painterSort );
 
 	};
 

src/renderers/SVGRenderer.js

@@ -7,6 +7,7 @@ THREE.SVGRenderer = function () {
 	THREE.Renderer.call( this );
 
 	var _viewport = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
+	_width, _height, _widthHalf, _heightHalf,
 	_clipRect = new THREE.Rectangle(),
 	_bboxRect = new THREE.Rectangle(),
 	_svgPathPool = [], _svgCirclePool = [],
@@ -28,11 +29,14 @@ THREE.SVGRenderer = function () {
 
 	this.setSize = function ( width, height ) {
 
-		_viewport.setAttribute( 'viewBox', ( - width / 2 ) + ' ' + ( - height / 2 ) + ' ' + width + ' ' + height );
-		_viewport.setAttribute( 'width', width );
-		_viewport.setAttribute( 'height', height );
+		_width = width; _height = height;
+		_widthHalf = _width / 2; _heightHalf = _height / 2;
 
-		_clipRect.set( - width / 2, - height / 2, width / 2, height / 2 );
+		_viewport.setAttribute( 'viewBox', ( - _widthHalf ) + ' ' + ( - _heightHalf ) + ' ' + _width + ' ' + _height );
+		_viewport.setAttribute( 'width', _width );
+		_viewport.setAttribute( 'height', _height );
+
+		_clipRect.set( - _widthHalf, - _heightHalf, _widthHalf, _heightHalf );
 
 	};
 
@@ -53,7 +57,11 @@ THREE.SVGRenderer = function () {
 		v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y,
 		size;
 
-		this.autoClear && this.clear();
+		if ( this.autoClear ) {
+
+			this.clear();
+
+		}
 
 		this.project( scene, camera );
 
@@ -70,11 +78,29 @@ THREE.SVGRenderer = function () {
 
 				_bboxRect.empty();
 
-				if ( element instanceof THREE.RenderableFace3 ) {
+				if ( element instanceof THREE.RenderableParticle ) {
 
-					v1x = element.v1.x; v1y = element.v1.y;
-					v2x = element.v2.x; v2y = element.v2.y;
-					v3x = element.v3.x; v3y = element.v3.y;
+					v1x = element.x * _widthHalf; v1y = element.y * _heightHalf;
+					size = element.size  * _widthHalf;
+
+					_bboxRect.set( v1x - size, v1y - size, v1x + size, v1y + size );
+
+					if ( !_clipRect.instersects( _bboxRect ) ) {
+
+						continue;
+
+					}
+
+					svgNode = getCircleNode( circleCount++ );
+					svgNode.setAttribute( 'cx', v1x );
+					svgNode.setAttribute( 'cy', v1y );
+					svgNode.setAttribute( 'r', size );
+
+				} else if ( element instanceof THREE.RenderableFace3 ) {
+
+					v1x = element.v1.x * _widthHalf; v1y = element.v1.y * _heightHalf;
+					v2x = element.v2.x * _widthHalf; v2y = element.v2.y * _heightHalf;
+					v3x = element.v3.x * _widthHalf; v3y = element.v3.y * _heightHalf;
 
 					_bboxRect.addPoint( v1x, v1y );
 					_bboxRect.addPoint( v2x, v2y );
@@ -91,10 +117,10 @@ THREE.SVGRenderer = function () {
 
 				} else if ( element instanceof THREE.RenderableFace4 ) {
 
-					v1x = element.v1.x; v1y = element.v1.y;
-					v2x = element.v2.x; v2y = element.v2.y;
-					v3x = element.v3.x; v3y = element.v3.y;
-					v4x = element.v4.x; v4y = element.v4.y;
+					v1x = element.v1.x * _widthHalf; v1y = element.v1.y * _heightHalf;
+					v2x = element.v2.x * _widthHalf; v2y = element.v2.y * _heightHalf;
+					v3x = element.v3.x * _widthHalf; v3y = element.v3.y * _heightHalf;
+					v4x = element.v4.x * _widthHalf; v4y = element.v4.y * _heightHalf;
 
 					_bboxRect.addPoint( v1x, v1y );
 					_bboxRect.addPoint( v2x, v2y );
@@ -110,22 +136,6 @@ THREE.SVGRenderer = function () {
 					svgNode = getPathNode( pathCount++ );
 					svgNode.setAttribute( 'd', 'M ' + v1x + ' ' + v1y + ' L ' + v2x + ' ' + v2y + ' L ' + v3x + ',' + v3y + ' L ' + v4x + ',' + v4y + 'z' );
 
-				} else if ( element instanceof THREE.RenderableParticle ) {
-
-					size = element.size * element.screenZ;
-
-					_bboxRect.set( element.x - size, element.y - size, element.x + size, element.y + size );
-
-					if ( !_clipRect.instersects( _bboxRect ) ) {
-
-						continue;
-
-					}
-
-					svgNode = getCircleNode(circleCount++);
-					svgNode.setAttribute( 'cx', element.x );
-					svgNode.setAttribute( 'cy', element.y );
-					svgNode.setAttribute( 'r', size );
 				}
 
 				// TODO: Move out of materials loop
@@ -158,11 +168,11 @@ THREE.SVGRenderer = function () {
 
 	function getPathNode( id ) {
 
-		if ( _svgPathPool[ id ] === null ) {
+		if ( _svgPathPool[ id ] == null ) {
 
 			_svgPathPool[ id ] = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );
 
-			if ( _quality === 0 ) {
+			if ( _quality == 0 ) {
 
 				_svgPathPool[ id ].setAttribute( 'shape-rendering', 'crispEdges' ); //optimizeSpeed
 
@@ -178,11 +188,11 @@ THREE.SVGRenderer = function () {
 
 	function getCircleNode( id ) {
 
-		if ( _svgCirclePool[id] === null ) {
+		if ( _svgCirclePool[id] == null ) {
 
 			_svgCirclePool[ id ] = document.createElementNS( 'http://www.w3.org/2000/svg', 'circle' );
 
-			if ( _quality === 0 ) {
+			if ( _quality == 0 ) {
 
 				_svgCirclePool[id].setAttribute( 'shape-rendering', 'crispEdges' ); //optimizeSpeed
 

src/renderers/renderables/RenderableFace3.js

@@ -8,7 +8,7 @@ THREE.RenderableFace3 = function () {
 	this.v2 = new THREE.Vector2();
 	this.v3 = new THREE.Vector2();
 
-	this.screenZ = null;
+	this.z = null;
 
 	this.color = null;
 	this.material = null;

src/renderers/renderables/RenderableFace4.js

@@ -9,7 +9,7 @@ THREE.RenderableFace4 = function () {
 	this.v3 = new THREE.Vector2();
 	this.v4 = new THREE.Vector2();
 
-	this.screenZ = null;
+	this.z = null;
 
 	this.color = null;
 	this.material = null;

src/renderers/renderables/RenderableLine.js

@@ -7,7 +7,7 @@ THREE.RenderableLine = function () {
 	this.v1 = new THREE.Vector2();
 	this.v2 = new THREE.Vector2();
 
-	this.screenZ = null;
+	this.z = null;
 
 	this.color = null;
 	this.material = null;

src/renderers/renderables/RenderableParticle.js

@@ -6,7 +6,8 @@ THREE.RenderableParticle = function () {
 
 	this.x = null;
 	this.y = null;
-	this.screenZ = null;
+
+	this.z = null;
 
 	this.color = null;
 	this.material = null;

utils/deployer.py

@@ -3,7 +3,7 @@ import os
 
 # MERGER
 
-rev = 9;
+rev = 10;
 
 files = [];
 files.append('Three.js');