CanvasRenderer now renders MeshDepthMaterial properly (per vertex). Gouraud is one step closer :)

Cleaned up CanvasRenderer and SVGRenderer code a bit.

examples/materials_depth.html

@@ -23,15 +23,9 @@
 
 		<script type="text/javascript">
 
-			var SCREEN_WIDTH = window.innerWidth;
-			var SCREEN_HEIGHT = window.innerHeight;
+			var container, stats;
 
-			var container;
-			var stats;
-
-			var camera;
-			var scene;
-			var renderer;
+			var camera, scene, renderer;
 
 			var cube, plane;
 
@@ -69,7 +63,7 @@
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );
 
-				camera = new THREE.Camera( 45, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 2000 );
+				camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.x = 1000;
 				camera.position.y = 1000;
 				camera.position.z = 1000;
@@ -79,7 +73,7 @@
 
 				// Plane
 
-				var material = new THREE.MeshDepthMaterial( { near: 1, far: 2000, wireframe: true } );
+				var material = new THREE.MeshDepthMaterial( { near: 1, far: 2000 } );
 
 				plane = new THREE.Mesh( new Plane( 1000, 1000, 10, 10 ), material );
 				plane.rotation.x = - 90 * ( Math.PI / 180 );
@@ -88,7 +82,7 @@
 
 				// Spheres
 
-				geometry = new Sphere( 100, 16, 8 );
+				geometry = new Sphere( 100, 8, 4 );
 				//material = new THREE.MeshLambertMaterial( { color: 0xffffff } );
 				material = new THREE.MeshDepthMaterial( { near: 1, far: 2000 } );
 
@@ -98,16 +92,19 @@
 					cube.overdraw = true;
 
 					cube.position.x = ( i % 5 ) * 200 - 400;
-					cube.position.z = Math.floor( i / 5 ) * 200 - 400;
+					cube.position.z = Math.floor( i / 5 ) * 200 - 350;
 
 					/*
 					cube.position.x = Math.random() * 1000 - 500;
 					cube.position.y = Math.random() * 1000 - 500;
 					cube.position.z = Math.random() * 1000 - 500;
+					*/
 
 					cube.rotation.x = Math.random() * 200 - 100;
 					cube.rotation.y = Math.random() * 200 - 100;
 					cube.rotation.z = Math.random() * 200 - 100;
+
+					/*
 					cube.scale.x = cube.scale.y = cube.scale.z = Math.random() + 0.5;
 					*/
 
@@ -132,7 +129,7 @@
 
 				renderer = new THREE.CanvasRenderer();
 				//renderer = new THREE.WebGLRenderer();
-				renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( renderer.domElement );
 
@@ -200,20 +197,20 @@
 
 			function loop() {
 
-				if ( moveForward ) camera.position.z -= 5; // camera.moveZ( 5 );
-				if ( moveBackwards ) camera.position.z += 5; // camera.moveZ( - 5 );
+				if ( moveForward ) camera.position.z -= 10; // camera.moveZ( 10 );
+				if ( moveBackwards ) camera.position.z += 10; // camera.moveZ( - 10 );
 
-				if ( moveUp ) camera.position.y += 5; // camera.moveZ( 5 );
-				if ( moveDown ) camera.position.y -= 5; // camera.moveZ( - 5 );
+				if ( moveUp ) camera.position.y += 10; // camera.moveZ( 10 );
+				if ( moveDown ) camera.position.y -= 10; // camera.moveZ( - 10 );
 
-				if ( moveLeft ) camera.position.x -= 5; // camera.moveX( - 5 );
-				if ( moveRight ) camera.position.x += 5; // camera.moveX( 5 );
+				if ( moveLeft ) camera.position.x -= 10; // camera.moveX( - 10 );
+				if ( moveRight ) camera.position.x += 10; // camera.moveX( 10 );
 
 				if ( pitchUp ) camera.rotation.x += 0.01; // camera.rotateX( 1 );
 				if ( pitchDown ) camera.rotation.x -= 0.01; // camera.rotateX( - 1 );
 
-				if ( yawLeft ) camera.target.position.x -= 5; // camera.rotation.y += 0.01; // camera.rotateY( 1 );
-				if ( yawRight ) camera.target.position.x += 5; // camera.rotation.y -= 0.01; // camera.rotateY( - 1 );
+				if ( yawLeft ) camera.target.position.x -= 10; // camera.rotation.y += 0.01; // camera.rotateY( 1 );
+				if ( yawRight ) camera.target.position.x += 10; // camera.rotation.y -= 0.01; // camera.rotateY( - 1 );
 
 				if ( rollLeft ) camera.rotation.z += 0.01; // camera.rotateZ( 1 );
 				if ( rollRight ) camera.rotation.z -= 0.01; // camera.rotateZ( - 1 );
@@ -240,11 +237,9 @@
 
 					var object = scene.objects[i];
 
-					/*
 					object.rotation.x += 0.01;
 					object.rotation.y += 0.005;
 					object.position.y = Math.sin( object.rotation.x ) * 200;
-					*/
 
 					debugContext.rect( object.position.x * 0.1 - 5, object.position.z * 0.1 - 5, 10, 10 );
 

src/materials/MeshDepthMaterial.js

@@ -4,8 +4,7 @@
  * parameters = {
  *  near: <float>,
  *  far: <float>,
- *  wireframe: <boolean>,
- *  wireframe_linewidth: <float>
+ *  opacity: <float>
  * } 
  */
 
@@ -14,16 +13,12 @@ THREE.MeshDepthMaterial = function ( parameters ) {
 	this.near = 1;
 	this.far = 1000;
 	this.opacity = 1;
-	this.wireframe = false;
-	this.wireframe_linewidth = 1;
 
 	if ( parameters ) {
 
 		if ( parameters.near !== undefined ) this.near = parameters.near;
 		if ( parameters.far !== undefined ) this.far = parameters.far;
 		if ( parameters.opacity !== undefined ) this.opacity  = parameters.opacity;
-		if ( parameters.wireframe !== undefined ) this.wireframe = parameters.wireframe;
-		if ( parameters.wireframe_linewidth !== undefined ) this.wireframe_linewidth = parameters.wireframe_linewidth;
 
 	}
 

src/renderers/CanvasRenderer.js

@@ -16,6 +16,9 @@ THREE.CanvasRenderer = function () {
 	_contextFillStyle = '#000000',
 	_contextLineWidth = 1,
 
+	_v1, _v2, _v3, _v4,
+	_v5 = new THREE.Vertex(), _v6 = new THREE.Vertex(), // Needed for latter splitting tris to quads
+
 	_clipRect = new THREE.Rectangle(),
 	_clearRect = new THREE.Rectangle(),
 	_bboxRect = new THREE.Rectangle(),
@@ -25,12 +28,22 @@ THREE.CanvasRenderer = function () {
 	_light = new THREE.Color( 0xffffffff ),
 	_ambientLight = new THREE.Color( 0xff000000 ),
 
-	_pi2 = Math.PI * 2,
-	_w, // z-buffer to w-buffer
-	_vector2 = new THREE.Vector2(), // Needed for expand
+	_pi2 = Math.PI * 2, _w, // z-buffer to w-buffer
 	_vector3 = new THREE.Vector3(), // Needed for PointLight
 	_uv1 = new THREE.UV(), _uv2 = new THREE.UV(), _uv3 = new THREE.UV(), _uv4 = new THREE.UV(),
-	v5 = new THREE.Vector2(), v6 = new THREE.Vector2(); // Needed for latter splitting tris to quads
+
+	_depthMap = document.createElement( 'canvas' ),
+	_depthMapContext = _depthMap.getContext( '2d' ),
+	_depthMapGradient = _depthMapContext.createLinearGradient( 0, 0, 255, 0);
+
+	_depthMap.width = 255;
+	_depthMap.height = 4;
+
+	_depthMapGradient.addColorStop( 0, "white" );
+	_depthMapGradient.addColorStop( 1, "black" );
+
+	_depthMapContext.fillStyle = _depthMapGradient;
+	_depthMapContext.fillRect( 0, 0, 255, 4 );
 
 	this.domElement = _canvas;
 	this.autoClear = true;
@@ -69,8 +82,7 @@ THREE.CanvasRenderer = function () {
 
 	this.render = function ( scene, camera ) {
 
-		var e, el, element, m, ml, fm, fml, material,
-		v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, v5x, v5y, v6x, v6y;
+		var e, el, element, m, ml, fm, fml, material;
 
 		if ( this.autoClear ) {
 
@@ -103,22 +115,25 @@ THREE.CanvasRenderer = function () {
 
 			if ( element instanceof THREE.RenderableParticle ) {
 
-				v1x = element.x * _canvasWidthHalf; v1y = element.y * _canvasHeightHalf;
+				_v1 = element;
+				_v1.x *= _canvasWidthHalf; _v1.y *= _canvasHeightHalf;
 
 				for ( m = 0, ml = element.material.length; m < ml; m++ ) {
 
 					material = element.material[ m ];
-					material && renderParticle( v1x, v1y, element, material, scene );
+					material && renderParticle( _v1, element, material, scene );
 
 				}
 
 			} else if ( element instanceof THREE.RenderableLine ) {
 
-				v1x = element.v1.x * _canvasWidthHalf; v1y = element.v1.y * _canvasHeightHalf;
-				v2x = element.v2.x * _canvasWidthHalf; v2y = element.v2.y * _canvasHeightHalf;
+				_v1 = element.v1; _v2 = element.v2;
+
+				_v1.positionScreen.x *= _canvasWidthHalf; _v1.positionScreen.y *= _canvasHeightHalf;
+				_v2.positionScreen.x *= _canvasWidthHalf; _v2.positionScreen.y *= _canvasHeightHalf;
 
-				_bboxRect.addPoint( v1x, v1y );
-				_bboxRect.addPoint( v2x, v2y );
+				_bboxRect.addPoint( _v1.positionScreen.x, _v1.positionScreen.y );
+				_bboxRect.addPoint( _v2.positionScreen.x, _v2.positionScreen.y );
 
 				if ( !_clipRect.instersects( _bboxRect ) ) {
 
@@ -131,31 +146,29 @@ THREE.CanvasRenderer = function () {
 				while ( m < ml ) {
 
 					material = element.material[ m ++ ];
-					material && renderLine( v1x, v1y, v2x, v2y, element, material, scene );
+					material && renderLine( _v1, _v2, element, material, scene );
 
 				}
 
 			} else if ( element instanceof THREE.RenderableFace3 ) {
 
-				element.v1.x *= _canvasWidthHalf; element.v1.y *= _canvasHeightHalf;
-				element.v2.x *= _canvasWidthHalf; element.v2.y *= _canvasHeightHalf;
-				element.v3.x *= _canvasWidthHalf; element.v3.y *= _canvasHeightHalf;
+				_v1 = element.v1; _v2 = element.v2; _v3 = element.v3;
+
+				_v1.positionScreen.x *= _canvasWidthHalf; _v1.positionScreen.y *= _canvasHeightHalf;
+				_v2.positionScreen.x *= _canvasWidthHalf; _v2.positionScreen.y *= _canvasHeightHalf;
+				_v3.positionScreen.x *= _canvasWidthHalf; _v3.positionScreen.y *= _canvasHeightHalf;
 
 				if ( element.overdraw ) {
 
-					expand( element.v1, element.v2 );
-					expand( element.v2, element.v3 );
-					expand( element.v3, element.v1 );
+					expand( _v1.positionScreen, _v2.positionScreen );
+					expand( _v2.positionScreen, _v3.positionScreen );
+					expand( _v3.positionScreen, _v1.positionScreen );
 
 				}
 
-				v1x = element.v1.x; v1y = element.v1.y;
-				v2x = element.v2.x; v2y = element.v2.y;
-				v3x = element.v3.x; v3y = element.v3.y;
-
-				_bboxRect.addPoint( v1x, v1y );
-				_bboxRect.addPoint( v2x, v2y );
-				_bboxRect.addPoint( v3x, v3y );
+				_bboxRect.addPoint( _v1.positionScreen.x, _v1.positionScreen.y );
+				_bboxRect.addPoint( _v2.positionScreen.x, _v2.positionScreen.y );
+				_bboxRect.addPoint( _v3.positionScreen.x, _v3.positionScreen.y );
 
 				if ( !_clipRect.instersects( _bboxRect ) ) {
 
@@ -176,7 +189,7 @@ THREE.CanvasRenderer = function () {
 						while ( fm < fml ) {
 
 							material = element.faceMaterial[ fm ++ ];
-							material && renderFace3( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene );
+							material && renderFace3( _v1, _v2, _v3, element, material, scene );
 
 						}
 
@@ -184,46 +197,41 @@ THREE.CanvasRenderer = function () {
 
 					}
 
-					renderFace3( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene );
+					material && renderFace3( _v1, _v2, _v3, element, material, scene );
 
 				}
 
 			} else if ( element instanceof THREE.RenderableFace4 ) {
 
-				element.v1.x *= _canvasWidthHalf; element.v1.y *= _canvasHeightHalf;
-				element.v2.x *= _canvasWidthHalf; element.v2.y *= _canvasHeightHalf;
-				element.v3.x *= _canvasWidthHalf; element.v3.y *= _canvasHeightHalf;
-				element.v4.x *= _canvasWidthHalf; element.v4.y *= _canvasHeightHalf;
+				_v1 = element.v1; _v2 = element.v2; _v3 = element.v3; _v4 = element.v4;
+
+				_v1.positionScreen.x *= _canvasWidthHalf; _v1.positionScreen.y *= _canvasHeightHalf;
+				_v2.positionScreen.x *= _canvasWidthHalf; _v2.positionScreen.y *= _canvasHeightHalf;
+				_v3.positionScreen.x *= _canvasWidthHalf; _v3.positionScreen.y *= _canvasHeightHalf;
+				_v4.positionScreen.x *= _canvasWidthHalf; _v4.positionScreen.y *= _canvasHeightHalf;
 
-				v5.copy( element.v2 ); v6.copy( element.v4 );
+				_v5.positionScreen.copy( _v2.positionScreen );
+				_v6.positionScreen.copy( _v4.positionScreen );
 
 				if ( element.overdraw ) {
 
-					expand( element.v1, element.v2 );
-					expand( element.v2, element.v4 );
-					expand( element.v4, element.v1 );
+					expand( _v1.positionScreen, _v2.positionScreen );
+					expand( _v2.positionScreen, _v4.positionScreen );
+					expand( _v4.positionScreen, _v1.positionScreen );
 
 				}
 
-				v1x = element.v1.x; v1y = element.v1.y;
-				v2x = element.v2.x; v2y = element.v2.y;
-				v4x = element.v4.x; v4y = element.v4.y;
-
 				if ( element.overdraw ) {
 
-					expand( element.v3, v5 );
-					expand( element.v3, v6 );
+					expand( _v3.positionScreen, _v5.positionScreen );
+					expand( _v3.positionScreen, _v6.positionScreen );
 
 				}
 
-				v3x = element.v3.x; v3y = element.v3.y;
-				v5x = v5.x; v5y = v5.y;
-				v6x = v6.x; v6y = v6.y;
-
-				_bboxRect.addPoint( v1x, v1y );
-				_bboxRect.addPoint( v2x, v2y );
-				_bboxRect.addPoint( v3x, v3y );
-				_bboxRect.addPoint( v4x, v4y );
+				_bboxRect.addPoint( _v1.positionScreen.x, _v1.positionScreen.y );
+				_bboxRect.addPoint( _v2.positionScreen.x, _v2.positionScreen.y );
+				_bboxRect.addPoint( _v3.positionScreen.x, _v3.positionScreen.y );
+				_bboxRect.addPoint( _v4.positionScreen.x, _v4.positionScreen.y );
 
 				if ( !_clipRect.instersects( _bboxRect ) ) {
 
@@ -244,7 +252,7 @@ THREE.CanvasRenderer = function () {
 						while ( fm < fml ) {
 
 							material = element.faceMaterial[ fm ++ ];
-							material && renderFace4( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, v5x, v5y, v6x, v6y, element, material, scene );
+							material && renderFace4( _v1, _v2, _v3, _v4, _v5, _v6, element, material, scene );
 
 						}
 
@@ -252,7 +260,7 @@ THREE.CanvasRenderer = function () {
 
 					}
 
-					renderFace4( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, v5x, v5y, v6x, v6y, element, material, scene );
+					material && renderFace4( _v1, _v2, _v3, _v4, _v5, _v6, element, material, scene );
 
 				}
 
@@ -376,7 +384,7 @@ THREE.CanvasRenderer = function () {
 
 	}
 
-	function renderParticle ( v1x, v1y, element, material, scene ) {
+	function renderParticle ( v1, element, material, scene ) {
 
 		var width, height, scaleX, scaleY, offsetX, offsetY,
 		bitmap, bitmapWidth, bitmapHeight;
@@ -404,7 +412,7 @@ THREE.CanvasRenderer = function () {
 
 			// TODO: Rotations break this...
 
-			_bboxRect.set( v1x + offsetX - width, v1y + offsetY - height, v1x + offsetX + width, v1y + offsetY + height );
+			_bboxRect.set( v1.x + offsetX - width, v1.y + offsetY - height, v1.x + offsetX + width, v1.y + offsetY + height );
 
 			if ( !_clipRect.instersects( _bboxRect ) ) {
 
@@ -413,7 +421,7 @@ THREE.CanvasRenderer = function () {
 			}
 
 			_context.save();
-			_context.translate( v1x, v1y );
+			_context.translate( v1.x, v1.y );
 			_context.rotate( - element.rotation );
 			_context.scale( scaleX, - scaleY );
 			_context.translate( - bitmapWidth + material.offset.x, - bitmapHeight - material.offset.y );
@@ -453,7 +461,7 @@ THREE.CanvasRenderer = function () {
 			width = element.scale.x * _canvasWidthHalf;
 			height = element.scale.y * _canvasHeightHalf;
 
-			_bboxRect.set( v1x - width, v1y - height, v1x + width, v1y + height );
+			_bboxRect.set( v1.x - width, v1.y - height, v1.x + width, v1.y + height );
 
 			if ( !_clipRect.instersects( _bboxRect ) ) {
 
@@ -462,7 +470,7 @@ THREE.CanvasRenderer = function () {
 			}
 
 			_context.save();
-			_context.translate( v1x, v1y );
+			_context.translate( v1.x, v1.y );
 			_context.rotate( - element.rotation );
 			_context.scale( width, height );
 
@@ -479,7 +487,7 @@ THREE.CanvasRenderer = function () {
 
 	}
 
-	function renderLine( v1x, v1y, v2x, v2y, element, material, scene ) {
+	function renderLine( v1, v2, element, material, scene ) {
 
 		if ( _contextGlobalAlpha != material.opacity ) {
 
@@ -490,8 +498,8 @@ THREE.CanvasRenderer = function () {
 		if ( material instanceof THREE.LineBasicMaterial ) {
 
 			_context.beginPath();
-			_context.moveTo( v1x, v1y );
-			_context.lineTo( v2x, v2y );
+			_context.moveTo( v1.positionScreen.x, v1.positionScreen.y );
+			_context.lineTo( v2.positionScreen.x, v2.positionScreen.y );
 			_context.closePath();
 
 			_color.__styleString = material.color.__styleString;
@@ -516,7 +524,7 @@ THREE.CanvasRenderer = function () {
 
 	}
 
-	function renderFace3( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene ) {
+	function renderFace3( v1, v2, v3, element, material, scene ) {
 
 		var bitmap, bitmapWidth, bitmapHeight;
 
@@ -532,25 +540,42 @@ THREE.CanvasRenderer = function () {
 			bitmapWidth = bitmap.width - 1;
 			bitmapHeight = bitmap.height - 1;
 
-			_uv1.copy( element.uvs[ 0 ] );
-			_uv2.copy( element.uvs[ 1 ] );
-			_uv3.copy( element.uvs[ 2 ] );
+			_uv1.u = element.uvs[ 0 ].u * bitmapWidth; _uv1.v = element.uvs[ 0 ].v * bitmapHeight;
+			_uv2.u = element.uvs[ 1 ].u * bitmapWidth; _uv2.v = element.uvs[ 1 ].v * bitmapHeight;
+			_uv3.u = element.uvs[ 2 ].u * bitmapWidth; _uv3.v = element.uvs[ 2 ].v * bitmapHeight;
 
-			_uv1.u *= bitmapWidth; _uv1.v *= bitmapHeight;
-			_uv2.u *= bitmapWidth; _uv2.v *= bitmapHeight;
-			_uv3.u *= bitmapWidth; _uv3.v *= bitmapHeight;
+			drawTexturedTriangle( bitmap, v1.positionScreen.x, v1.positionScreen.y, v2.positionScreen.x, v2.positionScreen.y, v3.positionScreen.x, v3.positionScreen.y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv3.u, _uv3.v );
+
+			return;
+
+		}
+
+		if ( material instanceof THREE.MeshDepthMaterial ) {
 
-			drawTexturedTriangle( bitmap, v1x, v1y, v2x, v2y, v3x, v3y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv3.u, _uv3.v );
+			bitmap = _depthMap;
+			bitmapWidth = bitmap.width - 1;
+			bitmapHeight = bitmap.height - 1;
+
+			_w = material.__2near / (material.__farPlusNear - v1.positionScreen.z * material.__farMinusNear );
+			_uv1.u = _w * bitmapWidth; _uv1.v = 0;
+
+			_w = material.__2near / (material.__farPlusNear - v2.positionScreen.z * material.__farMinusNear );
+			_uv2.u = _w * bitmapWidth; _uv2.v = 1;
+
+			_w = material.__2near / (material.__farPlusNear - v3.positionScreen.z * material.__farMinusNear );
+			_uv3.u = _w * bitmapWidth; _uv3.v = 2;
+
+			drawTexturedTriangle( bitmap, v1.positionScreen.x, v1.positionScreen.y, v2.positionScreen.x, v2.positionScreen.y, v3.positionScreen.x, v3.positionScreen.y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv3.u, _uv3.v );
 
 			return;
 
 		}
 
 		_context.beginPath();
-		_context.moveTo( v1x, v1y );
-		_context.lineTo( v2x, v2y );
-		_context.lineTo( v3x, v3y );
-		_context.lineTo( v1x, v1y );
+		_context.moveTo( v1.positionScreen.x, v1.positionScreen.y );
+		_context.lineTo( v2.positionScreen.x, v2.positionScreen.y );
+		_context.lineTo( v3.positionScreen.x, v3.positionScreen.y );
+		_context.lineTo( v1.positionScreen.x, v1.positionScreen.y );
 		_context.closePath();
 
 		if ( material instanceof THREE.MeshBasicMaterial ) {
@@ -559,8 +584,10 @@ THREE.CanvasRenderer = function () {
 
 		} else if ( material instanceof THREE.MeshDepthMaterial ) {
 
+			/*
 			_w = 1 - ( material.__2near / (material.__farPlusNear - element.z * material.__farMinusNear ) );
 			_color.setRGBA( _w, _w, _w, 1 );
+			*/
 
 		} else if ( material instanceof THREE.MeshLambertMaterial ) {
 
@@ -613,7 +640,7 @@ THREE.CanvasRenderer = function () {
 
 	}
 
-	function renderFace4 ( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, v5x, v5y, v6x, v6y, element, material, scene ) {
+	function renderFace4( v1, v2, v3, v4, v5, v6, element, material, scene ) {
 
 		var bitmap, bitmapWidth, bitmapHeight;
 
@@ -639,19 +666,44 @@ THREE.CanvasRenderer = function () {
 			_uv3.u *= bitmapWidth; _uv3.v *= bitmapHeight;
 			_uv4.u *= bitmapWidth; _uv4.v *= bitmapHeight;
 
-			drawTexturedTriangle( bitmap, v1x, v1y, v2x, v2y, v4x, v4y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv4.u, _uv4.v );
-			drawTexturedTriangle( bitmap, v5x, v5y, v3x, v3y, v6x, v6y, _uv2.u, _uv2.v, _uv3.u, _uv3.v, _uv4.u, _uv4.v );
+			drawTexturedTriangle( bitmap, v1.positionScreen.x, v1.positionScreen.y, v2.positionScreen.x, v2.positionScreen.y, v4.positionScreen.x, v4.positionScreen.y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv4.u, _uv4.v );
+			drawTexturedTriangle( bitmap, v5.positionScreen.x, v5.positionScreen.y, v3.positionScreen.x, v3.positionScreen.y, v6.positionScreen.x, v6.positionScreen.y, _uv2.u, _uv2.v, _uv3.u, _uv3.v, _uv4.u, _uv4.v );
+
+			return;
+
+		}
+
+		if ( material instanceof THREE.MeshDepthMaterial ) {
+
+			bitmap = _depthMap;
+			bitmapWidth = bitmap.width - 1;
+			bitmapHeight = bitmap.height - 1;
+
+			_w = material.__2near / (material.__farPlusNear - v1.positionScreen.z * material.__farMinusNear );
+			_uv1.u = _w * bitmapWidth; _uv1.v = 0;
+
+			_w = material.__2near / (material.__farPlusNear - v2.positionScreen.z * material.__farMinusNear );
+			_uv2.u = _w * bitmapWidth; _uv2.v = 1;
+
+			_w = material.__2near / (material.__farPlusNear - v3.positionScreen.z * material.__farMinusNear );
+			_uv3.u = _w * bitmapWidth; _uv3.v = 2;
+
+			_w = material.__2near / (material.__farPlusNear - v4.positionScreen.z * material.__farMinusNear );
+			_uv4.u = _w * bitmapWidth; _uv4.v = 3;
+
+			drawTexturedTriangle( bitmap, v1.positionScreen.x, v1.positionScreen.y, v2.positionScreen.x, v2.positionScreen.y, v4.positionScreen.x, v4.positionScreen.y, _uv1.u, _uv1.v, _uv2.u, _uv2.v, _uv4.u, _uv4.v );
+			drawTexturedTriangle( bitmap, v5.positionScreen.x, v5.positionScreen.y, v3.positionScreen.x, v3.positionScreen.y, v6.positionScreen.x, v6.positionScreen.y, _uv2.u, _uv2.v, _uv3.u, _uv3.v, _uv4.u, _uv4.v );
 
 			return;
 
 		}
 
 		_context.beginPath();
-		_context.moveTo( v1x, v1y );
-		_context.lineTo( v2x, v2y );
-		_context.lineTo( v3x, v3y );
-		_context.lineTo( v4x, v4y );
-		_context.lineTo( v1x, v1y );
+		_context.moveTo( v1.positionScreen.x, v1.positionScreen.y );
+		_context.lineTo( v2.positionScreen.x, v2.positionScreen.y );
+		_context.lineTo( v3.positionScreen.x, v3.positionScreen.y );
+		_context.lineTo( v4.positionScreen.x, v4.positionScreen.y );
+		_context.lineTo( v1.positionScreen.x, v1.positionScreen.y );
 		_context.closePath();
 
 		if ( material instanceof THREE.MeshBasicMaterial ) {
@@ -724,15 +776,11 @@ THREE.CanvasRenderer = function () {
 		_context.lineTo( x2, y2 );
 		_context.closePath();
 
-		x1 -= x0;
-		y1 -= y0;
-		x2 -= x0;
-		y2 -= y0;
+		x1 -= x0; y1 -= y0;
+		x2 -= x0; y2 -= y0;
 
-		u1 -= u0;
-		v1 -= v0;
-		u2 -= u0;
-		v2 -= v0;
+		u1 -= u0; v1 -= v0;
+		u2 -= u0; v2 -= v0;
 
 		var det = 1 / ( u1 * v2 - u2 * v1 ),
 
@@ -753,14 +801,15 @@ THREE.CanvasRenderer = function () {
 
 	// Hide anti-alias gaps
 
-	function expand( a, b ) {
+	function expand( v1, v2 ) {
+
+		var x = v2.x - v1.x, y =  v2.y - v1.y,
+		unit = 1 / Math.sqrt( x * x + y * y );
 
-		_vector2.sub( b, a );
-		_vector2.unit();
-		_vector2.multiplyScalar( 0.75 );
+		x *= unit; y *= unit;
 
-		b.addSelf( _vector2 );
-		a.subSelf( _vector2 );
+		v2.x += x; v2.y += y;
+		v1.x -= x; v1.y -= y;
 
 	}
 

src/renderers/Projector.js

@@ -84,9 +84,9 @@ THREE.Projector = function() {
 							   ( v3.positionScreen.y - v1.positionScreen.y ) * ( v2.positionScreen.x - v1.positionScreen.x ) < 0 ) ) ) {
 
 								_face3 = _face3Pool[ _face3Count ] = _face3Pool[ _face3Count ] || new THREE.RenderableFace3();
-								_face3.v1.copy( v1.positionScreen );
-								_face3.v2.copy( v2.positionScreen );
-								_face3.v3.copy( v3.positionScreen );
+								_face3.v1.positionScreen.copy( v1.positionScreen );
+								_face3.v2.positionScreen.copy( v2.positionScreen );
+								_face3.v3.positionScreen.copy( v3.positionScreen );
 
 								_face3.normalWorld.copy( face.normal );
 								object.matrixRotation.transform( _face3.normalWorld );
@@ -126,10 +126,10 @@ THREE.Projector = function() {
 							   ( v2.positionScreen.y - v3.positionScreen.y ) * ( v4.positionScreen.x - v3.positionScreen.x ) < 0 ) ) ) ) {
 
 								_face4 = _face4Pool[ _face4Count ] = _face4Pool[ _face4Count ] || new THREE.RenderableFace4();
-								_face4.v1.copy( v1.positionScreen );
-								_face4.v2.copy( v2.positionScreen );
-								_face4.v3.copy( v3.positionScreen );
-								_face4.v4.copy( v4.positionScreen );
+								_face4.v1.positionScreen.copy( v1.positionScreen );
+								_face4.v2.positionScreen.copy( v2.positionScreen );
+								_face4.v3.positionScreen.copy( v3.positionScreen );
+								_face4.v4.positionScreen.copy( v4.positionScreen );
 
 								_face4.normalWorld.copy( face.normal );
 								object.matrixRotation.transform( _face4.normalWorld );
@@ -176,15 +176,15 @@ THREE.Projector = function() {
 
 					vertex.__visible = vertexPositionScreen.z > 0 && vertexPositionScreen.z < 1;
 
-					if ( v > 0 ) {
+					if ( vertex.__visible && v > 0 ) {
 
 						vertex2 = object.geometry.vertices[ v - 1 ];
 
 						if ( vertex.__visible && vertex2.__visible ) {
 
 							_line = _linePool[ _lineCount ] = _linePool[ _lineCount ] || new THREE.RenderableLine();
-							_line.v1.copy( vertex.positionScreen );
-							_line.v2.copy( vertex2.positionScreen );
+							_line.v1.positionScreen.copy( vertex.positionScreen );
+							_line.v2.positionScreen.copy( vertex2.positionScreen );
 
 							// TODO: Use centroids here too.
 							_line.z = Math.max( vertex.positionScreen.z, vertex2.positionScreen.z );

src/renderers/SVGRenderer.js

@@ -8,6 +8,9 @@ THREE.SVGRenderer = function () {
 	_projector = new THREE.Projector(),
 	_svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
 	_svgWidth, _svgHeight, _svgWidthHalf, _svgHeightHalf,
+
+	_v1, _v2, _v3, _v4,
+
 	_clipRect = new THREE.Rectangle(),
 	_bboxRect = new THREE.Rectangle(),
 
@@ -37,7 +40,7 @@ THREE.SVGRenderer = function () {
 
 	};
 
-	this.setSize = function ( width, height ) {
+	this.setSize = function( width, height ) {
 
 		_svgWidth = width; _svgHeight = height;
 		_svgWidthHalf = _svgWidth / 2; _svgHeightHalf = _svgHeight / 2;
@@ -60,10 +63,9 @@ THREE.SVGRenderer = function () {
 
 	};
 
-	this.render = function ( scene, camera ) {
+	this.render = function( scene, camera ) {
 
-		var e, el, m, ml, fm, fml, element, material,
-		v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y;
+		var e, el, m, ml, fm, fml, element, material;
 
 		if ( this.autoClear ) {
 
@@ -91,28 +93,31 @@ THREE.SVGRenderer = function () {
 
 			if ( element instanceof THREE.RenderableParticle ) {
 
-				v1x = element.x * _svgWidthHalf; v1y = element.y * -_svgHeightHalf;
+				_v1 = element;
+				_v1.x *= _svgWidthHalf; _v1.y *= -_svgHeightHalf;
 
 				for ( m = 0, ml = element.material.length; m < ml; m++ ) {
 
 					material = element.material[ m ];
-					material && renderParticle( v1x, v1y, element, material, scene );
+					material && renderParticle( _v1, element, material, scene );
 
 				}
 
 			}/* else if ( element instanceof THREE.RenderableLine ) {
 
-
+				TODO: It's actually quite easy...
 
 			}*/ else if ( element instanceof THREE.RenderableFace3 ) {
 
-				v1x = element.v1.x * _svgWidthHalf; v1y = element.v1.y * -_svgHeightHalf;
-				v2x = element.v2.x * _svgWidthHalf; v2y = element.v2.y * -_svgHeightHalf;
-				v3x = element.v3.x * _svgWidthHalf; v3y = element.v3.y * -_svgHeightHalf;
+				_v1 = element.v1; _v2 = element.v2; _v3 = element.v3;
 
-				_bboxRect.addPoint( v1x, v1y );
-				_bboxRect.addPoint( v2x, v2y );
-				_bboxRect.addPoint( v3x, v3y );
+				_v1.positionScreen.x *= _svgWidthHalf; _v1.positionScreen.y *= - _svgHeightHalf;
+				_v2.positionScreen.x *= _svgWidthHalf; _v2.positionScreen.y *= - _svgHeightHalf;
+				_v3.positionScreen.x *= _svgWidthHalf; _v3.positionScreen.y *= - _svgHeightHalf;
+
+				_bboxRect.addPoint( _v1.positionScreen.x, _v1.positionScreen.y );
+				_bboxRect.addPoint( _v2.positionScreen.x, _v2.positionScreen.y );
+				_bboxRect.addPoint( _v3.positionScreen.x, _v3.positionScreen.y );
 
 				if ( !_clipRect.instersects( _bboxRect ) ) {
 
@@ -133,7 +138,7 @@ THREE.SVGRenderer = function () {
 						while ( fm < fml ) {
 
 							material = element.faceMaterial[ fm ++ ];
-							material && renderFace3( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene );
+							material && renderFace3( _v1, _v2, _v3, element, material, scene );
 
 						}
 
@@ -141,21 +146,23 @@ THREE.SVGRenderer = function () {
 
 					}
 
-					material && renderFace3( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene );
+					material && renderFace3( _v1, _v2, _v3, element, material, scene );
 
 				}
 
 			} else if ( element instanceof THREE.RenderableFace4 ) {
 
-				v1x = element.v1.x * _svgWidthHalf; v1y = element.v1.y * -_svgHeightHalf;
-				v2x = element.v2.x * _svgWidthHalf; v2y = element.v2.y * -_svgHeightHalf;
-				v3x = element.v3.x * _svgWidthHalf; v3y = element.v3.y * -_svgHeightHalf;
-				v4x = element.v4.x * _svgWidthHalf; v4y = element.v4.y * -_svgHeightHalf;
+				_v1 = element.v1; _v2 = element.v2; _v3 = element.v3; _v4 = element.v4;
+
+				_v1.positionScreen.x *= _svgWidthHalf; _v1.positionScreen.y *= -_svgHeightHalf;
+				_v2.positionScreen.x *= _svgWidthHalf; _v2.positionScreen.y *= -_svgHeightHalf;
+				_v3.positionScreen.x *= _svgWidthHalf; _v3.positionScreen.y *= -_svgHeightHalf;
+				_v4.positionScreen.x *= _svgWidthHalf; _v4.positionScreen.y *= -_svgHeightHalf;
 
-				_bboxRect.addPoint( v1x, v1y );
-				_bboxRect.addPoint( v2x, v2y );
-				_bboxRect.addPoint( v3x, v3y );
-				_bboxRect.addPoint( v4x, v4y );
+				_bboxRect.addPoint( _v1.positionScreen.x, _v1.positionScreen.y );
+				_bboxRect.addPoint( _v2.positionScreen.x, _v2.positionScreen.y );
+				_bboxRect.addPoint( _v3.positionScreen.x, _v3.positionScreen.y );
+				_bboxRect.addPoint( _v4.positionScreen.x, _v4.positionScreen.y );
 
 				if ( !_clipRect.instersects( _bboxRect) ) {
 
@@ -176,7 +183,7 @@ THREE.SVGRenderer = function () {
 						while ( fm < fml ) {
 
 							material = element.faceMaterial[ fm ++ ];
-							material && renderFace4( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, element, material, scene );
+							material && renderFace4( _v1, _v2, _v3, _v4, element, material, scene );
 
 						}
 
@@ -184,7 +191,7 @@ THREE.SVGRenderer = function () {
 
 					}
 
-					material && renderFace4( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, element, material, scene );
+					material && renderFace4( _v1, _v2, _v3, _v4, element, material, scene );
 
 				}
 
@@ -283,11 +290,11 @@ THREE.SVGRenderer = function () {
 
 	}
 
-	function renderParticle ( v1x, v1y, element, material, scene ) {
+	function renderParticle( v1, element, material, scene ) {
 
 		_svgNode = getCircleNode( _circleCount++ );
-		_svgNode.setAttribute( 'cx', v1x );
-		_svgNode.setAttribute( 'cy', v1y );
+		_svgNode.setAttribute( 'cx', v1.x );
+		_svgNode.setAttribute( 'cy', v1.y );
 		_svgNode.setAttribute( 'r', element.scale.x * _svgWidthHalf );
 
 		if ( material instanceof THREE.ParticleCircleMaterial ) {
@@ -323,10 +330,10 @@ THREE.SVGRenderer = function () {
 	}
 	*/
 
-	function renderFace3 ( v1x, v1y, v2x, v2y, v3x, v3y, element, material, scene ) {
+	function renderFace3( v1, v2, v3, element, material, scene ) {
 
 		_svgNode = getPathNode( _pathCount ++ );
-		_svgNode.setAttribute( 'd', 'M ' + v1x + ' ' + v1y + ' L ' + v2x + ' ' + v2y + ' L ' + v3x + ',' + v3y + 'z' );
+		_svgNode.setAttribute( 'd', 'M ' + v1.positionScreen.x + ' ' + v1.positionScreen.y + ' L ' + v2.positionScreen.x + ' ' + v2.positionScreen.y + ' L ' + v3.positionScreen.x + ',' + v3.positionScreen.y + 'z' );
 
 		if ( material instanceof THREE.MeshBasicMaterial ) {
 
@@ -370,10 +377,10 @@ THREE.SVGRenderer = function () {
 
 	}
 
-	function renderFace4 ( v1x, v1y, v2x, v2y, v3x, v3y, v4x, v4y, element, material, scene ) {
+	function renderFace4( v1, v2, v3, v4, element, material, scene ) {
 
 		_svgNode = getPathNode( _pathCount ++ );
-		_svgNode.setAttribute( 'd', 'M ' + v1x + ' ' + v1y + ' L ' + v2x + ' ' + v2y + ' L ' + v3x + ',' + v3y + ' L ' + v4x + ',' + v4y + 'z' );
+		_svgNode.setAttribute( 'd', 'M ' + v1.positionScreen.x + ' ' + v1.positionScreen.y + ' L ' + v2.positionScreen.x + ' ' + v2.positionScreen.y + ' L ' + v3.positionScreen.x + ',' + v3.positionScreen.y + ' L ' + v4.positionScreen.x + ',' + v4.positionScreen.y + 'z' );
 
 		if ( material instanceof THREE.MeshBasicMaterial ) {
 
@@ -412,7 +419,7 @@ THREE.SVGRenderer = function () {
 
 	}
 
-	function getPathNode ( id ) {
+	function getPathNode( id ) {
 
 		if ( _svgPathPool[ id ] == null ) {
 
@@ -432,7 +439,7 @@ THREE.SVGRenderer = function () {
 
 	}
 
-	function getCircleNode ( id ) {
+	function getCircleNode( id ) {
 
 		if ( _svgCirclePool[id] == null ) {
 

src/renderers/renderables/RenderableFace3.js

@@ -4,9 +4,9 @@
 
 THREE.RenderableFace3 = function () {
 
-	this.v1 = new THREE.Vector2();
-	this.v2 = new THREE.Vector2();
-	this.v3 = new THREE.Vector2();
+	this.v1 = new THREE.Vertex();
+	this.v2 = new THREE.Vertex();
+	this.v3 = new THREE.Vertex();
 
 	this.centroidWorld = new THREE.Vector3();
 	this.centroidScreen = new THREE.Vector3();

src/renderers/renderables/RenderableFace4.js

@@ -4,10 +4,10 @@
 
 THREE.RenderableFace4 = function () {
 
-	this.v1 = new THREE.Vector2();
-	this.v2 = new THREE.Vector2();
-	this.v3 = new THREE.Vector2();
-	this.v4 = new THREE.Vector2();
+	this.v1 = new THREE.Vertex();
+	this.v2 = new THREE.Vertex();
+	this.v3 = new THREE.Vertex();
+	this.v4 = new THREE.Vertex();
 
 	this.centroidWorld = new THREE.Vector3();
 	this.centroidScreen = new THREE.Vector3();

src/renderers/renderables/RenderableLine.js

@@ -4,8 +4,8 @@
 
 THREE.RenderableLine = function () {
 
-	this.v1 = new THREE.Vector2();
-	this.v2 = new THREE.Vector2();
+	this.v1 = new THREE.Vertex();
+	this.v2 = new THREE.Vertex();
 
 	this.z = null;