Merge pull request #16488 from Mugen87/dev30

JSM: Added module and TS files for Projector and SVG/SoftwareRenderer.

docs/manual/en/introduction/Import-via-modules.html

@@ -135,6 +135,9 @@
 					<ul>
 						<li>CSS2DRenderer</li>
 						<li>CSS3DRenderer</li>
+						<li>Projector</li>
+						<li>SoftwareRenderer</li>
+						<li>SVGRenderer</li>
 					</ul>
 				</li>
 				<li>utils

examples/jsm/renderers/CSS2DRenderer.d.ts

@@ -1,7 +1,7 @@
 import {
-	Object3D,
+  Object3D,
   Scene,
-	Camera
+  Camera
 } from '../../../src/Three';
 
 export class CSS2DObject extends Object3D {

examples/jsm/renderers/CSS3DRenderer.d.ts

@@ -1,7 +1,7 @@
 import {
-	Object3D,
+  Object3D,
   Scene,
-	Camera
+  Camera
 } from '../../../src/Three';
 
 export class CSS3DObject extends Object3D {

examples/jsm/renderers/Projector.d.ts

@@ -0,0 +1,69 @@
+import {
+  Object3D,
+  Scene,
+  Camera,
+  Vector2,
+  Vector3,
+  Vector4,
+  Color,
+  Material
+} from '../../../src/Three';
+
+export class RenderableObject {
+  id: number;
+  object: Object3D;
+  z: number;
+  renderOrder: number;
+}
+
+export class RenderableFace {
+  id: number;
+  v1: RenderableVertex;
+  v2: RenderableVertex;
+  v3: RenderableVertex;
+  normalModel: Vector3;
+  vertexNormalsModel: Vector3[];
+  vertexNormalsLength: number;
+  color: Color;
+  material: Material;
+  uvs: Vector2[];
+  z: number;
+  renderOrder: number;
+}
+
+export class RenderableVertex {
+  position: Vector3;
+  positionWorld: Vector3;
+  positionScreen: Vector4;
+  visible: boolean;
+
+  copy(vertex: RenderableVertex): void;
+}
+
+export class RenderableLine {
+  id: number;
+  v1: RenderableVertex;
+  v2: RenderableVertex;
+  vertexColors: Color[];
+  material: Material;
+  z: number;
+  renderOrder: number;
+}
+
+export class RenderableSprite {
+  id: number;
+  object: Object3D;
+  x: number;
+  y: number;
+  z: number;
+  rotation: number;
+  scale: Vector2;
+  material: Material;
+  renderOrder: number;
+}
+
+export class Projector {
+  constructor();
+
+  projectScene(scene: Scene, camera: Camera, sortObjects: boolean, sortElements: boolean);
+}

examples/jsm/renderers/Projector.js

@@ -0,0 +1,1134 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ * @author supereggbert / http://www.paulbrunt.co.uk/
+ * @author julianwa / https://github.com/julianwa
+ */
+
+import {
+	BackSide,
+	Box3,
+	BufferGeometry,
+	Color,
+	DoubleSide,
+	FaceColors,
+	FrontSide,
+	Frustum,
+	Geometry,
+	Light,
+	Line,
+	LineSegments,
+	Matrix3,
+	Matrix4,
+	Mesh,
+	Points,
+	Sprite,
+	Vector2,
+	Vector3,
+	Vector4,
+	VertexColors
+} from "../../../build/three.module.js";
+
+var RenderableObject = function () {
+
+	this.id = 0;
+
+	this.object = null;
+	this.z = 0;
+	this.renderOrder = 0;
+
+};
+
+//
+
+var RenderableFace = function () {
+
+	this.id = 0;
+
+	this.v1 = new RenderableVertex();
+	this.v2 = new RenderableVertex();
+	this.v3 = new RenderableVertex();
+
+	this.normalModel = new Vector3();
+
+	this.vertexNormalsModel = [ new Vector3(), new Vector3(), new Vector3() ];
+	this.vertexNormalsLength = 0;
+
+	this.color = new Color();
+	this.material = null;
+	this.uvs = [ new Vector2(), new Vector2(), new Vector2() ];
+
+	this.z = 0;
+	this.renderOrder = 0;
+
+};
+
+//
+
+var RenderableVertex = function () {
+
+	this.position = new Vector3();
+	this.positionWorld = new Vector3();
+	this.positionScreen = new Vector4();
+
+	this.visible = true;
+
+};
+
+RenderableVertex.prototype.copy = function ( vertex ) {
+
+	this.positionWorld.copy( vertex.positionWorld );
+	this.positionScreen.copy( vertex.positionScreen );
+
+};
+
+//
+
+var RenderableLine = function () {
+
+	this.id = 0;
+
+	this.v1 = new RenderableVertex();
+	this.v2 = new RenderableVertex();
+
+	this.vertexColors = [ new Color(), new Color() ];
+	this.material = null;
+
+	this.z = 0;
+	this.renderOrder = 0;
+
+};
+
+//
+
+var RenderableSprite = function () {
+
+	this.id = 0;
+
+	this.object = null;
+
+	this.x = 0;
+	this.y = 0;
+	this.z = 0;
+
+	this.rotation = 0;
+	this.scale = new Vector2();
+
+	this.material = null;
+	this.renderOrder = 0;
+
+};
+
+//
+
+var Projector = function () {
+
+	var _object, _objectCount, _objectPool = [], _objectPoolLength = 0,
+		_vertex, _vertexCount, _vertexPool = [], _vertexPoolLength = 0,
+		_face, _faceCount, _facePool = [], _facePoolLength = 0,
+		_line, _lineCount, _linePool = [], _linePoolLength = 0,
+		_sprite, _spriteCount, _spritePool = [], _spritePoolLength = 0,
+
+		_renderData = { objects: [], lights: [], elements: [] },
+
+		_vector3 = new Vector3(),
+		_vector4 = new Vector4(),
+
+		_clipBox = new Box3( new Vector3( - 1, - 1, - 1 ), new Vector3( 1, 1, 1 ) ),
+		_boundingBox = new Box3(),
+		_points3 = new Array( 3 ),
+
+		_viewMatrix = new Matrix4(),
+		_viewProjectionMatrix = new Matrix4(),
+
+		_modelMatrix,
+		_modelViewProjectionMatrix = new Matrix4(),
+
+		_normalMatrix = new Matrix3(),
+
+		_frustum = new Frustum(),
+
+		_clippedVertex1PositionScreen = new Vector4(),
+		_clippedVertex2PositionScreen = new Vector4();
+
+	//
+
+	this.projectVector = function ( vector, camera ) {
+
+		console.warn( 'THREE.Projector: .projectVector() is now vector.project().' );
+		vector.project( camera );
+
+	};
+
+	this.unprojectVector = function ( vector, camera ) {
+
+		console.warn( 'THREE.Projector: .unprojectVector() is now vector.unproject().' );
+		vector.unproject( camera );
+
+	};
+
+	this.pickingRay = function () {
+
+		console.error( 'THREE.Projector: .pickingRay() is now raycaster.setFromCamera().' );
+
+	};
+
+	//
+
+	var RenderList = function () {
+
+		var normals = [];
+		var colors = [];
+		var uvs = [];
+
+		var object = null;
+		var material = null;
+
+		var normalMatrix = new Matrix3();
+
+		function setObject( value ) {
+
+			object = value;
+			material = object.material;
+
+			normalMatrix.getNormalMatrix( object.matrixWorld );
+
+			normals.length = 0;
+			colors.length = 0;
+			uvs.length = 0;
+
+		}
+
+		function projectVertex( vertex ) {
+
+			var position = vertex.position;
+			var positionWorld = vertex.positionWorld;
+			var positionScreen = vertex.positionScreen;
+
+			positionWorld.copy( position ).applyMatrix4( _modelMatrix );
+			positionScreen.copy( positionWorld ).applyMatrix4( _viewProjectionMatrix );
+
+			var invW = 1 / positionScreen.w;
+
+			positionScreen.x *= invW;
+			positionScreen.y *= invW;
+			positionScreen.z *= invW;
+
+			vertex.visible = positionScreen.x >= - 1 && positionScreen.x <= 1 &&
+					 positionScreen.y >= - 1 && positionScreen.y <= 1 &&
+					 positionScreen.z >= - 1 && positionScreen.z <= 1;
+
+		}
+
+		function pushVertex( x, y, z ) {
+
+			_vertex = getNextVertexInPool();
+			_vertex.position.set( x, y, z );
+
+			projectVertex( _vertex );
+
+		}
+
+		function pushNormal( x, y, z ) {
+
+			normals.push( x, y, z );
+
+		}
+
+		function pushColor( r, g, b ) {
+
+			colors.push( r, g, b );
+
+		}
+
+		function pushUv( x, y ) {
+
+			uvs.push( x, y );
+
+		}
+
+		function checkTriangleVisibility( v1, v2, v3 ) {
+
+			if ( v1.visible === true || v2.visible === true || v3.visible === true ) return true;
+
+			_points3[ 0 ] = v1.positionScreen;
+			_points3[ 1 ] = v2.positionScreen;
+			_points3[ 2 ] = v3.positionScreen;
+
+			return _clipBox.intersectsBox( _boundingBox.setFromPoints( _points3 ) );
+
+		}
+
+		function checkBackfaceCulling( v1, v2, v3 ) {
+
+			return ( ( v3.positionScreen.x - v1.positionScreen.x ) *
+				    ( v2.positionScreen.y - v1.positionScreen.y ) -
+				    ( v3.positionScreen.y - v1.positionScreen.y ) *
+				    ( v2.positionScreen.x - v1.positionScreen.x ) ) < 0;
+
+		}
+
+		function pushLine( a, b ) {
+
+			var v1 = _vertexPool[ a ];
+			var v2 = _vertexPool[ b ];
+
+			// Clip
+
+			v1.positionScreen.copy( v1.position ).applyMatrix4( _modelViewProjectionMatrix );
+			v2.positionScreen.copy( v2.position ).applyMatrix4( _modelViewProjectionMatrix );
+
+			if ( clipLine( v1.positionScreen, v2.positionScreen ) === true ) {
+
+				// Perform the perspective divide
+				v1.positionScreen.multiplyScalar( 1 / v1.positionScreen.w );
+				v2.positionScreen.multiplyScalar( 1 / v2.positionScreen.w );
+
+				_line = getNextLineInPool();
+				_line.id = object.id;
+				_line.v1.copy( v1 );
+				_line.v2.copy( v2 );
+				_line.z = Math.max( v1.positionScreen.z, v2.positionScreen.z );
+				_line.renderOrder = object.renderOrder;
+
+				_line.material = object.material;
+
+				if ( object.material.vertexColors === VertexColors ) {
+
+					_line.vertexColors[ 0 ].fromArray( colors, a * 3 );
+					_line.vertexColors[ 1 ].fromArray( colors, b * 3 );
+
+				}
+
+				_renderData.elements.push( _line );
+
+			}
+
+		}
+
+		function pushTriangle( a, b, c, material ) {
+
+			var v1 = _vertexPool[ a ];
+			var v2 = _vertexPool[ b ];
+			var v3 = _vertexPool[ c ];
+
+			if ( checkTriangleVisibility( v1, v2, v3 ) === false ) return;
+
+			if ( material.side === DoubleSide || checkBackfaceCulling( v1, v2, v3 ) === true ) {
+
+				_face = getNextFaceInPool();
+
+				_face.id = object.id;
+				_face.v1.copy( v1 );
+				_face.v2.copy( v2 );
+				_face.v3.copy( v3 );
+				_face.z = ( v1.positionScreen.z + v2.positionScreen.z + v3.positionScreen.z ) / 3;
+				_face.renderOrder = object.renderOrder;
+
+				// face normal
+				_vector3.subVectors( v3.position, v2.position );
+				_vector4.subVectors( v1.position, v2.position );
+				_vector3.cross( _vector4 );
+				_face.normalModel.copy( _vector3 );
+				_face.normalModel.applyMatrix3( normalMatrix ).normalize();
+
+				for ( var i = 0; i < 3; i ++ ) {
+
+					var normal = _face.vertexNormalsModel[ i ];
+					normal.fromArray( normals, arguments[ i ] * 3 );
+					normal.applyMatrix3( normalMatrix ).normalize();
+
+					var uv = _face.uvs[ i ];
+					uv.fromArray( uvs, arguments[ i ] * 2 );
+
+				}
+
+				_face.vertexNormalsLength = 3;
+
+				_face.material = material;
+
+				if ( material.vertexColors === FaceColors || material.vertexColors === VertexColors ) {
+
+					_face.color.fromArray( colors, a * 3 );
+
+				}
+
+				_renderData.elements.push( _face );
+
+			}
+
+		}
+
+		return {
+			setObject: setObject,
+			projectVertex: projectVertex,
+			checkTriangleVisibility: checkTriangleVisibility,
+			checkBackfaceCulling: checkBackfaceCulling,
+			pushVertex: pushVertex,
+			pushNormal: pushNormal,
+			pushColor: pushColor,
+			pushUv: pushUv,
+			pushLine: pushLine,
+			pushTriangle: pushTriangle
+		};
+
+	};
+
+	var renderList = new RenderList();
+
+	function projectObject( object ) {
+
+		if ( object.visible === false ) return;
+
+		if ( object instanceof Light ) {
+
+			_renderData.lights.push( object );
+
+		} else if ( object instanceof Mesh || object instanceof Line || object instanceof Points ) {
+
+			if ( object.material.visible === false ) return;
+			if ( object.frustumCulled === true && _frustum.intersectsObject( object ) === false ) return;
+
+			addObject( object );
+
+		} else if ( object instanceof Sprite ) {
+
+			if ( object.material.visible === false ) return;
+			if ( object.frustumCulled === true && _frustum.intersectsSprite( object ) === false ) return;
+
+			addObject( object );
+
+		}
+
+		var children = object.children;
+
+		for ( var i = 0, l = children.length; i < l; i ++ ) {
+
+			projectObject( children[ i ] );
+
+		}
+
+	}
+
+	function addObject( object ) {
+
+		_object = getNextObjectInPool();
+		_object.id = object.id;
+		_object.object = object;
+
+		_vector3.setFromMatrixPosition( object.matrixWorld );
+		_vector3.applyMatrix4( _viewProjectionMatrix );
+		_object.z = _vector3.z;
+		_object.renderOrder = object.renderOrder;
+
+		_renderData.objects.push( _object );
+
+	}
+
+	this.projectScene = function ( scene, camera, sortObjects, sortElements ) {
+
+		_faceCount = 0;
+		_lineCount = 0;
+		_spriteCount = 0;
+
+		_renderData.elements.length = 0;
+
+		if ( scene.autoUpdate === true ) scene.updateMatrixWorld();
+		if ( camera.parent === null ) camera.updateMatrixWorld();
+
+		_viewMatrix.copy( camera.matrixWorldInverse );
+		_viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, _viewMatrix );
+
+		_frustum.setFromMatrix( _viewProjectionMatrix );
+
+		//
+
+		_objectCount = 0;
+
+		_renderData.objects.length = 0;
+		_renderData.lights.length = 0;
+
+		projectObject( scene );
+
+		if ( sortObjects === true ) {
+
+			_renderData.objects.sort( painterSort );
+
+		}
+
+		//
+
+		var objects = _renderData.objects;
+
+		for ( var o = 0, ol = objects.length; o < ol; o ++ ) {
+
+			var object = objects[ o ].object;
+			var geometry = object.geometry;
+
+			renderList.setObject( object );
+
+			_modelMatrix = object.matrixWorld;
+
+			_vertexCount = 0;
+
+			if ( object instanceof Mesh ) {
+
+				if ( geometry instanceof BufferGeometry ) {
+
+					var material = object.material;
+
+					var isMultiMaterial = Array.isArray( material );
+
+					var attributes = geometry.attributes;
+					var groups = geometry.groups;
+
+					if ( attributes.position === undefined ) continue;
+
+					var positions = attributes.position.array;
+
+					for ( var i = 0, l = positions.length; i < l; i += 3 ) {
+
+						var x = positions[ i ];
+						var y = positions[ i + 1 ];
+						var z = positions[ i + 2 ];
+
+						if ( material.morphTargets === true ) {
+
+							var morphTargets = geometry.morphAttributes.position;
+							var morphInfluences = object.morphTargetInfluences;
+
+							for ( var t = 0, tl = morphTargets.length; t < tl; t ++ ) {
+
+								var influence = morphInfluences[ t ];
+
+								if ( influence === 0 ) continue;
+
+								var target = morphTargets[ t ];
+
+								x += ( target.getX( i / 3 ) - positions[ i ] ) * influence;
+								y += ( target.getY( i / 3 ) - positions[ i + 1 ] ) * influence;
+								z += ( target.getZ( i / 3 ) - positions[ i + 2 ] ) * influence;
+
+							}
+
+						}
+
+						renderList.pushVertex( x, y, z );
+
+					}
+
+					if ( attributes.normal !== undefined ) {
+
+						var normals = attributes.normal.array;
+
+						for ( var i = 0, l = normals.length; i < l; i += 3 ) {
+
+							renderList.pushNormal( normals[ i ], normals[ i + 1 ], normals[ i + 2 ] );
+
+						}
+
+					}
+
+					if ( attributes.color !== undefined ) {
+
+						var colors = attributes.color.array;
+
+						for ( var i = 0, l = colors.length; i < l; i += 3 ) {
+
+							renderList.pushColor( colors[ i ], colors[ i + 1 ], colors[ i + 2 ] );
+
+						}
+
+					}
+
+					if ( attributes.uv !== undefined ) {
+
+						var uvs = attributes.uv.array;
+
+						for ( var i = 0, l = uvs.length; i < l; i += 2 ) {
+
+							renderList.pushUv( uvs[ i ], uvs[ i + 1 ] );
+
+						}
+
+					}
+
+					if ( geometry.index !== null ) {
+
+						var indices = geometry.index.array;
+
+						if ( groups.length > 0 ) {
+
+							for ( var g = 0; g < groups.length; g ++ ) {
+
+								var group = groups[ g ];
+
+								material = isMultiMaterial === true
+									 ? object.material[ group.materialIndex ]
+									 : object.material;
+
+								if ( material === undefined ) continue;
+
+								for ( var i = group.start, l = group.start + group.count; i < l; i += 3 ) {
+
+									renderList.pushTriangle( indices[ i ], indices[ i + 1 ], indices[ i + 2 ], material );
+
+								}
+
+							}
+
+						} else {
+
+							for ( var i = 0, l = indices.length; i < l; i += 3 ) {
+
+								renderList.pushTriangle( indices[ i ], indices[ i + 1 ], indices[ i + 2 ], material );
+
+							}
+
+						}
+
+					} else {
+
+						if ( groups.length > 0 ) {
+
+							for ( var g = 0; g < groups.length; g ++ ) {
+
+								var group = groups[ g ];
+
+								material = isMultiMaterial === true
+									 ? object.material[ group.materialIndex ]
+									 : object.material;
+
+								if ( material === undefined ) continue;
+
+								for ( var i = group.start, l = group.start + group.count; i < l; i += 3 ) {
+
+									renderList.pushTriangle( i, i + 1, i + 2, material );
+
+								}
+
+							}
+
+						} else {
+
+							for ( var i = 0, l = positions.length / 3; i < l; i += 3 ) {
+
+								renderList.pushTriangle( i, i + 1, i + 2, material );
+
+							}
+
+						}
+
+					}
+
+				} else if ( geometry instanceof Geometry ) {
+
+					var vertices = geometry.vertices;
+					var faces = geometry.faces;
+					var faceVertexUvs = geometry.faceVertexUvs[ 0 ];
+
+					_normalMatrix.getNormalMatrix( _modelMatrix );
+
+					var material = object.material;
+
+					var isMultiMaterial = Array.isArray( material );
+
+					for ( var v = 0, vl = vertices.length; v < vl; v ++ ) {
+
+						var vertex = vertices[ v ];
+
+						_vector3.copy( vertex );
+
+						if ( material.morphTargets === true ) {
+
+							var morphTargets = geometry.morphTargets;
+							var morphInfluences = object.morphTargetInfluences;
+
+							for ( var t = 0, tl = morphTargets.length; t < tl; t ++ ) {
+
+								var influence = morphInfluences[ t ];
+
+								if ( influence === 0 ) continue;
+
+								var target = morphTargets[ t ];
+								var targetVertex = target.vertices[ v ];
+
+								_vector3.x += ( targetVertex.x - vertex.x ) * influence;
+								_vector3.y += ( targetVertex.y - vertex.y ) * influence;
+								_vector3.z += ( targetVertex.z - vertex.z ) * influence;
+
+							}
+
+						}
+
+						renderList.pushVertex( _vector3.x, _vector3.y, _vector3.z );
+
+					}
+
+					for ( var f = 0, fl = faces.length; f < fl; f ++ ) {
+
+						var face = faces[ f ];
+
+						material = isMultiMaterial === true
+							 ? object.material[ face.materialIndex ]
+							 : object.material;
+
+						if ( material === undefined ) continue;
+
+						var side = material.side;
+
+						var v1 = _vertexPool[ face.a ];
+						var v2 = _vertexPool[ face.b ];
+						var v3 = _vertexPool[ face.c ];
+
+						if ( renderList.checkTriangleVisibility( v1, v2, v3 ) === false ) continue;
+
+						var visible = renderList.checkBackfaceCulling( v1, v2, v3 );
+
+						if ( side !== DoubleSide ) {
+
+							if ( side === FrontSide && visible === false ) continue;
+							if ( side === BackSide && visible === true ) continue;
+
+						}
+
+						_face = getNextFaceInPool();
+
+						_face.id = object.id;
+						_face.v1.copy( v1 );
+						_face.v2.copy( v2 );
+						_face.v3.copy( v3 );
+
+						_face.normalModel.copy( face.normal );
+
+						if ( visible === false && ( side === BackSide || side === DoubleSide ) ) {
+
+							_face.normalModel.negate();
+
+						}
+
+						_face.normalModel.applyMatrix3( _normalMatrix ).normalize();
+
+						var faceVertexNormals = face.vertexNormals;
+
+						for ( var n = 0, nl = Math.min( faceVertexNormals.length, 3 ); n < nl; n ++ ) {
+
+							var normalModel = _face.vertexNormalsModel[ n ];
+							normalModel.copy( faceVertexNormals[ n ] );
+
+							if ( visible === false && ( side === BackSide || side === DoubleSide ) ) {
+
+								normalModel.negate();
+
+							}
+
+							normalModel.applyMatrix3( _normalMatrix ).normalize();
+
+						}
+
+						_face.vertexNormalsLength = faceVertexNormals.length;
+
+						var vertexUvs = faceVertexUvs[ f ];
+
+						if ( vertexUvs !== undefined ) {
+
+							for ( var u = 0; u < 3; u ++ ) {
+
+								_face.uvs[ u ].copy( vertexUvs[ u ] );
+
+							}
+
+						}
+
+						_face.color = face.color;
+						_face.material = material;
+
+						_face.z = ( v1.positionScreen.z + v2.positionScreen.z + v3.positionScreen.z ) / 3;
+						_face.renderOrder = object.renderOrder;
+
+						_renderData.elements.push( _face );
+
+					}
+
+				}
+
+			} else if ( object instanceof Line ) {
+
+				_modelViewProjectionMatrix.multiplyMatrices( _viewProjectionMatrix, _modelMatrix );
+
+				if ( geometry instanceof BufferGeometry ) {
+
+					var attributes = geometry.attributes;
+
+					if ( attributes.position !== undefined ) {
+
+						var positions = attributes.position.array;
+
+						for ( var i = 0, l = positions.length; i < l; i += 3 ) {
+
+							renderList.pushVertex( positions[ i ], positions[ i + 1 ], positions[ i + 2 ] );
+
+						}
+
+						if ( attributes.color !== undefined ) {
+
+							var colors = attributes.color.array;
+
+							for ( var i = 0, l = colors.length; i < l; i += 3 ) {
+
+								renderList.pushColor( colors[ i ], colors[ i + 1 ], colors[ i + 2 ] );
+
+							}
+
+						}
+
+						if ( geometry.index !== null ) {
+
+							var indices = geometry.index.array;
+
+							for ( var i = 0, l = indices.length; i < l; i += 2 ) {
+
+								renderList.pushLine( indices[ i ], indices[ i + 1 ] );
+
+							}
+
+						} else {
+
+							var step = object instanceof LineSegments ? 2 : 1;
+
+							for ( var i = 0, l = ( positions.length / 3 ) - 1; i < l; i += step ) {
+
+								renderList.pushLine( i, i + 1 );
+
+							}
+
+						}
+
+					}
+
+				} else if ( geometry instanceof Geometry ) {
+
+					var vertices = object.geometry.vertices;
+
+					if ( vertices.length === 0 ) continue;
+
+					v1 = getNextVertexInPool();
+					v1.positionScreen.copy( vertices[ 0 ] ).applyMatrix4( _modelViewProjectionMatrix );
+
+					var step = object instanceof LineSegments ? 2 : 1;
+
+					for ( var v = 1, vl = vertices.length; v < vl; v ++ ) {
+
+						v1 = getNextVertexInPool();
+						v1.positionScreen.copy( vertices[ v ] ).applyMatrix4( _modelViewProjectionMatrix );
+
+						if ( ( v + 1 ) % step > 0 ) continue;
+
+						v2 = _vertexPool[ _vertexCount - 2 ];
+
+						_clippedVertex1PositionScreen.copy( v1.positionScreen );
+						_clippedVertex2PositionScreen.copy( v2.positionScreen );
+
+						if ( clipLine( _clippedVertex1PositionScreen, _clippedVertex2PositionScreen ) === true ) {
+
+							// Perform the perspective divide
+							_clippedVertex1PositionScreen.multiplyScalar( 1 / _clippedVertex1PositionScreen.w );
+							_clippedVertex2PositionScreen.multiplyScalar( 1 / _clippedVertex2PositionScreen.w );
+
+							_line = getNextLineInPool();
+
+							_line.id = object.id;
+							_line.v1.positionScreen.copy( _clippedVertex1PositionScreen );
+							_line.v2.positionScreen.copy( _clippedVertex2PositionScreen );
+
+							_line.z = Math.max( _clippedVertex1PositionScreen.z, _clippedVertex2PositionScreen.z );
+							_line.renderOrder = object.renderOrder;
+
+							_line.material = object.material;
+
+							if ( object.material.vertexColors === VertexColors ) {
+
+								_line.vertexColors[ 0 ].copy( object.geometry.colors[ v ] );
+								_line.vertexColors[ 1 ].copy( object.geometry.colors[ v - 1 ] );
+
+							}
+
+							_renderData.elements.push( _line );
+
+						}
+
+					}
+
+				}
+
+			} else if ( object instanceof Points ) {
+
+				_modelViewProjectionMatrix.multiplyMatrices( _viewProjectionMatrix, _modelMatrix );
+
+				if ( geometry instanceof Geometry ) {
+
+					var vertices = object.geometry.vertices;
+
+					for ( var v = 0, vl = vertices.length; v < vl; v ++ ) {
+
+						var vertex = vertices[ v ];
+
+						_vector4.set( vertex.x, vertex.y, vertex.z, 1 );
+						_vector4.applyMatrix4( _modelViewProjectionMatrix );
+
+						pushPoint( _vector4, object, camera );
+
+					}
+
+				} else if ( geometry instanceof BufferGeometry ) {
+
+					var attributes = geometry.attributes;
+
+					if ( attributes.position !== undefined ) {
+
+						var positions = attributes.position.array;
+
+						for ( var i = 0, l = positions.length; i < l; i += 3 ) {
+
+							_vector4.set( positions[ i ], positions[ i + 1 ], positions[ i + 2 ], 1 );
+							_vector4.applyMatrix4( _modelViewProjectionMatrix );
+
+							pushPoint( _vector4, object, camera );
+
+						}
+
+					}
+
+				}
+
+			} else if ( object instanceof Sprite ) {
+
+				object.modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
+				_vector4.set( _modelMatrix.elements[ 12 ], _modelMatrix.elements[ 13 ], _modelMatrix.elements[ 14 ], 1 );
+				_vector4.applyMatrix4( _viewProjectionMatrix );
+
+				pushPoint( _vector4, object, camera );
+
+			}
+
+		}
+
+		if ( sortElements === true ) {
+
+			_renderData.elements.sort( painterSort );
+
+		}
+
+		return _renderData;
+
+	};
+
+	function pushPoint( _vector4, object, camera ) {
+
+		var invW = 1 / _vector4.w;
+
+		_vector4.z *= invW;
+
+		if ( _vector4.z >= - 1 && _vector4.z <= 1 ) {
+
+			_sprite = getNextSpriteInPool();
+			_sprite.id = object.id;
+			_sprite.x = _vector4.x * invW;
+			_sprite.y = _vector4.y * invW;
+			_sprite.z = _vector4.z;
+			_sprite.renderOrder = object.renderOrder;
+			_sprite.object = object;
+
+			_sprite.rotation = object.rotation;
+
+			_sprite.scale.x = object.scale.x * Math.abs( _sprite.x - ( _vector4.x + camera.projectionMatrix.elements[ 0 ] ) / ( _vector4.w + camera.projectionMatrix.elements[ 12 ] ) );
+			_sprite.scale.y = object.scale.y * Math.abs( _sprite.y - ( _vector4.y + camera.projectionMatrix.elements[ 5 ] ) / ( _vector4.w + camera.projectionMatrix.elements[ 13 ] ) );
+
+			_sprite.material = object.material;
+
+			_renderData.elements.push( _sprite );
+
+		}
+
+	}
+
+	// Pools
+
+	function getNextObjectInPool() {
+
+		if ( _objectCount === _objectPoolLength ) {
+
+			var object = new RenderableObject();
+			_objectPool.push( object );
+			_objectPoolLength ++;
+			_objectCount ++;
+			return object;
+
+		}
+
+		return _objectPool[ _objectCount ++ ];
+
+	}
+
+	function getNextVertexInPool() {
+
+		if ( _vertexCount === _vertexPoolLength ) {
+
+			var vertex = new RenderableVertex();
+			_vertexPool.push( vertex );
+			_vertexPoolLength ++;
+			_vertexCount ++;
+			return vertex;
+
+		}
+
+		return _vertexPool[ _vertexCount ++ ];
+
+	}
+
+	function getNextFaceInPool() {
+
+		if ( _faceCount === _facePoolLength ) {
+
+			var face = new RenderableFace();
+			_facePool.push( face );
+			_facePoolLength ++;
+			_faceCount ++;
+			return face;
+
+		}
+
+		return _facePool[ _faceCount ++ ];
+
+
+	}
+
+	function getNextLineInPool() {
+
+		if ( _lineCount === _linePoolLength ) {
+
+			var line = new RenderableLine();
+			_linePool.push( line );
+			_linePoolLength ++;
+			_lineCount ++;
+			return line;
+
+		}
+
+		return _linePool[ _lineCount ++ ];
+
+	}
+
+	function getNextSpriteInPool() {
+
+		if ( _spriteCount === _spritePoolLength ) {
+
+			var sprite = new RenderableSprite();
+			_spritePool.push( sprite );
+			_spritePoolLength ++;
+			_spriteCount ++;
+			return sprite;
+
+		}
+
+		return _spritePool[ _spriteCount ++ ];
+
+	}
+
+	//
+
+	function painterSort( a, b ) {
+
+		if ( a.renderOrder !== b.renderOrder ) {
+
+			return a.renderOrder - b.renderOrder;
+
+		} else if ( a.z !== b.z ) {
+
+			return b.z - a.z;
+
+		} else if ( a.id !== b.id ) {
+
+			return a.id - b.id;
+
+		} else {
+
+			return 0;
+
+		}
+
+	}
+
+	function clipLine( s1, s2 ) {
+
+		var alpha1 = 0, alpha2 = 1,
+
+			// Calculate the boundary coordinate of each vertex for the near and far clip planes,
+			// Z = -1 and Z = +1, respectively.
+
+			bc1near = s1.z + s1.w,
+			bc2near = s2.z + s2.w,
+			bc1far = - s1.z + s1.w,
+			bc2far = - s2.z + s2.w;
+
+		if ( bc1near >= 0 && bc2near >= 0 && bc1far >= 0 && bc2far >= 0 ) {
+
+			// Both vertices lie entirely within all clip planes.
+			return true;
+
+		} else if ( ( bc1near < 0 && bc2near < 0 ) || ( bc1far < 0 && bc2far < 0 ) ) {
+
+			// Both vertices lie entirely outside one of the clip planes.
+			return false;
+
+		} else {
+
+			// The line segment spans at least one clip plane.
+
+			if ( bc1near < 0 ) {
+
+				// v1 lies outside the near plane, v2 inside
+				alpha1 = Math.max( alpha1, bc1near / ( bc1near - bc2near ) );
+
+			} else if ( bc2near < 0 ) {
+
+				// v2 lies outside the near plane, v1 inside
+				alpha2 = Math.min( alpha2, bc1near / ( bc1near - bc2near ) );
+
+			}
+
+			if ( bc1far < 0 ) {
+
+				// v1 lies outside the far plane, v2 inside
+				alpha1 = Math.max( alpha1, bc1far / ( bc1far - bc2far ) );
+
+			} else if ( bc2far < 0 ) {
+
+				// v2 lies outside the far plane, v2 inside
+				alpha2 = Math.min( alpha2, bc1far / ( bc1far - bc2far ) );
+
+			}
+
+			if ( alpha2 < alpha1 ) {
+
+				// The line segment spans two boundaries, but is outside both of them.
+				// (This can't happen when we're only clipping against just near/far but good
+				//  to leave the check here for future usage if other clip planes are added.)
+				return false;
+
+			} else {
+
+				// Update the s1 and s2 vertices to match the clipped line segment.
+				s1.lerp( s2, alpha1 );
+				s2.lerp( s1, 1 - alpha2 );
+
+				return true;
+
+			}
+
+		}
+
+	}
+
+};
+
+export { RenderableObject, RenderableFace, RenderableVertex, RenderableLine, RenderableSprite, Projector };

examples/jsm/renderers/SVGRenderer.d.ts

@@ -0,0 +1,28 @@
+import {
+  Object3D,
+  Color,
+  Scene,
+  Camera
+} from '../../../src/Three';
+
+export class SVGObject extends Object3D {
+  constructor(node: SVGElement);
+  node: SVGElement;
+}
+
+export class SVGRenderer {
+  constructor();
+  domElement: SVGElement;
+  autoClear: boolean;
+  sortObjects: boolean;
+  sortElements: boolean;
+  info: {render: {vertices: number, faces: number}};
+
+  setQuality(quality: string): void;
+  setClearColor(color: Color, alpha: number): void;
+  setPixelRatio(): void;
+  setSize(width: number, height: number): void;
+  setPrecision(precision: number): void;
+  clear(): void;
+  render(scene: Scene, camera: Camera): void;
+}

examples/jsm/renderers/SVGRenderer.js

@@ -0,0 +1,526 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+import {
+	Box2,
+	Camera,
+	Color,
+	FaceColors,
+	Matrix3,
+	Matrix4,
+	Object3D,
+	REVISION,
+	Vector3,
+	VertexColors
+} from "../../../build/three.module.js";
+import { Projector } from "../renderers/Projector.js";
+import { RenderableFace } from "../renderers/Projector.js";
+import { RenderableLine } from "../renderers/Projector.js";
+import { RenderableSprite } from "../renderers/Projector.js";
+
+var SVGObject = function ( node ) {
+
+	Object3D.call( this );
+
+	this.node = node;
+
+};
+
+SVGObject.prototype = Object.create( Object3D.prototype );
+SVGObject.prototype.constructor = SVGObject;
+
+var SVGRenderer = function () {
+
+	console.log( 'THREE.SVGRenderer', REVISION );
+
+	var _this = this,
+		_renderData, _elements, _lights,
+		_projector = new Projector(),
+		_svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' ),
+		_svgWidth, _svgHeight, _svgWidthHalf, _svgHeightHalf,
+
+		_v1, _v2, _v3,
+
+		_clipBox = new Box2(),
+		_elemBox = new Box2(),
+
+		_color = new Color(),
+		_diffuseColor = new Color(),
+		_ambientLight = new Color(),
+		_directionalLights = new Color(),
+		_pointLights = new Color(),
+		_clearColor = new Color(),
+		_clearAlpha = 1,
+
+		_vector3 = new Vector3(), // Needed for PointLight
+		_centroid = new Vector3(),
+		_normal = new Vector3(),
+		_normalViewMatrix = new Matrix3(),
+
+		_viewMatrix = new Matrix4(),
+		_viewProjectionMatrix = new Matrix4(),
+
+		_svgPathPool = [],
+		_svgNode, _pathCount = 0,
+
+		_currentPath, _currentStyle,
+
+		_quality = 1, _precision = null;
+
+	this.domElement = _svg;
+
+	this.autoClear = true;
+	this.sortObjects = true;
+	this.sortElements = true;
+
+	this.info = {
+
+		render: {
+
+			vertices: 0,
+			faces: 0
+
+		}
+
+	};
+
+	this.setQuality = function ( quality ) {
+
+		switch ( quality ) {
+
+			case "high": _quality = 1; break;
+			case "low": _quality = 0; break;
+
+		}
+
+	};
+
+	this.setClearColor = function ( color, alpha ) {
+
+		_clearColor.set( color );
+		_clearAlpha = alpha !== undefined ? alpha : 1;
+
+	};
+
+	this.setPixelRatio = function () {};
+
+	this.setSize = function ( width, height ) {
+
+		_svgWidth = width; _svgHeight = height;
+		_svgWidthHalf = _svgWidth / 2; _svgHeightHalf = _svgHeight / 2;
+
+		_svg.setAttribute( 'viewBox', ( - _svgWidthHalf ) + ' ' + ( - _svgHeightHalf ) + ' ' + _svgWidth + ' ' + _svgHeight );
+		_svg.setAttribute( 'width', _svgWidth );
+		_svg.setAttribute( 'height', _svgHeight );
+
+		_clipBox.min.set( - _svgWidthHalf, - _svgHeightHalf );
+		_clipBox.max.set( _svgWidthHalf, _svgHeightHalf );
+
+	};
+
+	this.setPrecision = function ( precision ) {
+
+		_precision = precision;
+
+	};
+
+	function removeChildNodes() {
+
+		_pathCount = 0;
+
+		while ( _svg.childNodes.length > 0 ) {
+
+			_svg.removeChild( _svg.childNodes[ 0 ] );
+
+		}
+
+	}
+
+	function getSvgColor( color, opacity ) {
+
+		var arg = Math.floor( color.r * 255 ) + ',' + Math.floor( color.g * 255 ) + ',' + Math.floor( color.b * 255 );
+
+		if ( opacity === undefined || opacity === 1 ) return 'rgb(' + arg + ')';
+
+		return 'rgb(' + arg + '); fill-opacity: ' + opacity;
+
+	}
+
+	function convert( c ) {
+
+		return _precision !== null ? c.toFixed( _precision ) : c;
+
+	}
+
+	this.clear = function () {
+
+		removeChildNodes();
+		_svg.style.backgroundColor = getSvgColor( _clearColor, _clearAlpha );
+
+	};
+
+	this.render = function ( scene, camera ) {
+
+		if ( camera instanceof Camera === false ) {
+
+			console.error( 'THREE.SVGRenderer.render: camera is not an instance of Camera.' );
+			return;
+
+		}
+
+		var background = scene.background;
+
+		if ( background && background.isColor ) {
+
+			removeChildNodes();
+			_svg.style.backgroundColor = getSvgColor( background );
+
+		} else if ( this.autoClear === true ) {
+
+			this.clear();
+
+		}
+
+		_this.info.render.vertices = 0;
+		_this.info.render.faces = 0;
+
+		_viewMatrix.copy( camera.matrixWorldInverse );
+		_viewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, _viewMatrix );
+
+		_renderData = _projector.projectScene( scene, camera, this.sortObjects, this.sortElements );
+		_elements = _renderData.elements;
+		_lights = _renderData.lights;
+
+		_normalViewMatrix.getNormalMatrix( camera.matrixWorldInverse );
+
+		calculateLights( _lights );
+
+		 // reset accumulated path
+
+		_currentPath = '';
+		_currentStyle = '';
+
+		for ( var e = 0, el = _elements.length; e < el; e ++ ) {
+
+			var element = _elements[ e ];
+			var material = element.material;
+
+			if ( material === undefined || material.opacity === 0 ) continue;
+
+			_elemBox.makeEmpty();
+
+			if ( element instanceof RenderableSprite ) {
+
+				_v1 = element;
+				_v1.x *= _svgWidthHalf; _v1.y *= - _svgHeightHalf;
+
+				renderSprite( _v1, element, material );
+
+			} else if ( element instanceof RenderableLine ) {
+
+				_v1 = element.v1; _v2 = element.v2;
+
+				_v1.positionScreen.x *= _svgWidthHalf; _v1.positionScreen.y *= - _svgHeightHalf;
+				_v2.positionScreen.x *= _svgWidthHalf; _v2.positionScreen.y *= - _svgHeightHalf;
+
+				_elemBox.setFromPoints( [ _v1.positionScreen, _v2.positionScreen ] );
+
+				if ( _clipBox.intersectsBox( _elemBox ) === true ) {
+
+					renderLine( _v1, _v2, element, material );
+
+				}
+
+			} else if ( element instanceof RenderableFace ) {
+
+				_v1 = element.v1; _v2 = element.v2; _v3 = element.v3;
+
+				if ( _v1.positionScreen.z < - 1 || _v1.positionScreen.z > 1 ) continue;
+				if ( _v2.positionScreen.z < - 1 || _v2.positionScreen.z > 1 ) continue;
+				if ( _v3.positionScreen.z < - 1 || _v3.positionScreen.z > 1 ) continue;
+
+				_v1.positionScreen.x *= _svgWidthHalf; _v1.positionScreen.y *= - _svgHeightHalf;
+				_v2.positionScreen.x *= _svgWidthHalf; _v2.positionScreen.y *= - _svgHeightHalf;
+				_v3.positionScreen.x *= _svgWidthHalf; _v3.positionScreen.y *= - _svgHeightHalf;
+
+				_elemBox.setFromPoints( [
+					_v1.positionScreen,
+					_v2.positionScreen,
+					_v3.positionScreen
+				] );
+
+				if ( _clipBox.intersectsBox( _elemBox ) === true ) {
+
+					renderFace3( _v1, _v2, _v3, element, material );
+
+				}
+
+			}
+
+		}
+
+		flushPath(); // just to flush last svg:path
+
+		scene.traverseVisible( function ( object ) {
+
+			 if ( object instanceof SVGObject ) {
+
+				_vector3.setFromMatrixPosition( object.matrixWorld );
+				_vector3.applyMatrix4( _viewProjectionMatrix );
+
+				if ( _vector3.z < - 1 || _vector3.z > 1 ) return;
+
+				var x = _vector3.x * _svgWidthHalf;
+				var y = - _vector3.y * _svgHeightHalf;
+
+				var node = object.node;
+				node.setAttribute( 'transform', 'translate(' + x + ',' + y + ')' );
+
+				_svg.appendChild( node );
+
+			}
+
+		} );
+
+	};
+
+	function calculateLights( lights ) {
+
+		_ambientLight.setRGB( 0, 0, 0 );
+		_directionalLights.setRGB( 0, 0, 0 );
+		_pointLights.setRGB( 0, 0, 0 );
+
+		for ( var l = 0, ll = lights.length; l < ll; l ++ ) {
+
+			var light = lights[ l ];
+			var lightColor = light.color;
+
+			if ( light.isAmbientLight ) {
+
+				_ambientLight.r += lightColor.r;
+				_ambientLight.g += lightColor.g;
+				_ambientLight.b += lightColor.b;
+
+			} else if ( light.isDirectionalLight ) {
+
+				_directionalLights.r += lightColor.r;
+				_directionalLights.g += lightColor.g;
+				_directionalLights.b += lightColor.b;
+
+			} else if ( light.isPointLight ) {
+
+				_pointLights.r += lightColor.r;
+				_pointLights.g += lightColor.g;
+				_pointLights.b += lightColor.b;
+
+			}
+
+		}
+
+	}
+
+	function calculateLight( lights, position, normal, color ) {
+
+		for ( var l = 0, ll = lights.length; l < ll; l ++ ) {
+
+			var light = lights[ l ];
+			var lightColor = light.color;
+
+			if ( light.isDirectionalLight ) {
+
+				var lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld ).normalize();
+
+				var amount = normal.dot( lightPosition );
+
+				if ( amount <= 0 ) continue;
+
+				amount *= light.intensity;
+
+				color.r += lightColor.r * amount;
+				color.g += lightColor.g * amount;
+				color.b += lightColor.b * amount;
+
+			} else if ( light.isPointLight ) {
+
+				var lightPosition = _vector3.setFromMatrixPosition( light.matrixWorld );
+
+				var amount = normal.dot( _vector3.subVectors( lightPosition, position ).normalize() );
+
+				if ( amount <= 0 ) continue;
+
+				amount *= light.distance == 0 ? 1 : 1 - Math.min( position.distanceTo( lightPosition ) / light.distance, 1 );
+
+				if ( amount == 0 ) continue;
+
+				amount *= light.intensity;
+
+				color.r += lightColor.r * amount;
+				color.g += lightColor.g * amount;
+				color.b += lightColor.b * amount;
+
+			}
+
+		}
+
+	}
+
+	function renderSprite( v1, element, material ) {
+
+		var scaleX = element.scale.x * _svgWidthHalf;
+		var scaleY = element.scale.y * _svgHeightHalf;
+
+		if ( material.isPointsMaterial ) {
+
+			scaleX *= material.size;
+			scaleY *= material.size;
+
+		}
+
+		var path = 'M' + convert( v1.x - scaleX * 0.5 ) + ',' + convert( v1.y - scaleY * 0.5 ) + 'h' + convert( scaleX ) + 'v' + convert( scaleY ) + 'h' + convert( - scaleX ) + 'z';
+		var style = "";
+
+		if ( material.isSpriteMaterial || material.isPointsMaterial ) {
+
+			style = 'fill:' + getSvgColor( material.color, material.opacity );
+
+		}
+
+		addPath( style, path );
+
+	}
+
+	function renderLine( v1, v2, element, material ) {
+
+		var path = 'M' + convert( v1.positionScreen.x ) + ',' + convert( v1.positionScreen.y ) + 'L' + convert( v2.positionScreen.x ) + ',' + convert( v2.positionScreen.y );
+
+		if ( material.isLineBasicMaterial ) {
+
+			var style = 'fill:none;stroke:' + getSvgColor( material.color, material.opacity ) + ';stroke-width:' + material.linewidth + ';stroke-linecap:' + material.linecap;
+
+			if ( material.isLineDashedMaterial ) {
+
+				style = style + ';stroke-dasharray:' + material.dashSize + "," + material.gapSize;
+
+			}
+
+			addPath( style, path );
+
+		}
+
+	}
+
+	function renderFace3( v1, v2, v3, element, material ) {
+
+		_this.info.render.vertices += 3;
+		_this.info.render.faces ++;
+
+		var path = 'M' + convert( v1.positionScreen.x ) + ',' + convert( v1.positionScreen.y ) + 'L' + convert( v2.positionScreen.x ) + ',' + convert( v2.positionScreen.y ) + 'L' + convert( v3.positionScreen.x ) + ',' + convert( v3.positionScreen.y ) + 'z';
+		var style = '';
+
+		if ( material.isMeshBasicMaterial ) {
+
+			_color.copy( material.color );
+
+			if ( material.vertexColors === FaceColors || material.vertexColors === VertexColors ) {
+
+				_color.multiply( element.color );
+
+			}
+
+		} else if ( material.isMeshLambertMaterial || material.isMeshPhongMaterial || material.isMeshStandardMaterial ) {
+
+			_diffuseColor.copy( material.color );
+
+			if ( material.vertexColors === FaceColors || material.vertexColors === VertexColors ) {
+
+				_diffuseColor.multiply( element.color );
+
+			}
+
+			_color.copy( _ambientLight );
+
+			_centroid.copy( v1.positionWorld ).add( v2.positionWorld ).add( v3.positionWorld ).divideScalar( 3 );
+
+			calculateLight( _lights, _centroid, element.normalModel, _color );
+
+			_color.multiply( _diffuseColor ).add( material.emissive );
+
+		} else if ( material.isMeshNormalMaterial ) {
+
+			_normal.copy( element.normalModel ).applyMatrix3( _normalViewMatrix );
+
+			_color.setRGB( _normal.x, _normal.y, _normal.z ).multiplyScalar( 0.5 ).addScalar( 0.5 );
+
+		}
+
+		if ( material.wireframe ) {
+
+			style = 'fill:none;stroke:' + getSvgColor( _color, material.opacity ) + ';stroke-width:' + material.wireframeLinewidth + ';stroke-linecap:' + material.wireframeLinecap + ';stroke-linejoin:' + material.wireframeLinejoin;
+
+		} else {
+
+			style = 'fill:' + getSvgColor( _color, material.opacity );
+
+		}
+
+		addPath( style, path );
+
+	}
+
+	function addPath( style, path ) {
+
+		if ( _currentStyle === style ) {
+
+			_currentPath += path;
+
+		} else {
+
+			flushPath();
+
+			_currentStyle = style;
+			_currentPath = path;
+
+		}
+
+	}
+
+	function flushPath() {
+
+		if ( _currentPath ) {
+
+			_svgNode = getPathNode( _pathCount ++ );
+			_svgNode.setAttribute( 'd', _currentPath );
+			_svgNode.setAttribute( 'style', _currentStyle );
+			_svg.appendChild( _svgNode );
+
+		}
+
+		_currentPath = '';
+		_currentStyle = '';
+
+	}
+
+	function getPathNode( id ) {
+
+		if ( _svgPathPool[ id ] == null ) {
+
+			_svgPathPool[ id ] = document.createElementNS( 'http://www.w3.org/2000/svg', 'path' );
+
+			if ( _quality == 0 ) {
+
+				_svgPathPool[ id ].setAttribute( 'shape-rendering', 'crispEdges' ); //optimizeSpeed
+
+			}
+
+			return _svgPathPool[ id ];
+
+		}
+
+		return _svgPathPool[ id ];
+
+	}
+
+};
+
+export { SVGObject, SVGRenderer };

examples/jsm/renderers/SoftwareRenderer.d.ts

@@ -0,0 +1,17 @@
+import {
+  Color,
+  Scene,
+  Camera
+} from '../../../src/Three';
+
+export class SoftwareRenderer {
+  constructor();
+  domElement: HTMLElement;
+  autoClear: boolean;
+
+  setClearColor(color: Color, alpha: number): void;
+  setPixelRatio(): void;
+  setSize(width: number, height: number): void;
+  clear(): void;
+  render(scene: Scene, camera: Camera): void;
+}

examples/jsm/renderers/SoftwareRenderer.js

@@ -0,0 +1,1578 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ * @author ryg / http://farbrausch.de/~fg
+ * @author mraleph / http://mrale.ph/
+ * @author daoshengmu / http://dsmu.me/
+ */
+
+import {
+	Color,
+	FaceColors,
+	LineBasicMaterial,
+	Math as _Math,
+	MeshBasicMaterial,
+	MeshLambertMaterial,
+	MeshPhongMaterial,
+	REVISION,
+	SpriteMaterial,
+	Vector2,
+	Vector3,
+	Vector4,
+	VertexColors
+} from "../../../build/three.module.js";
+import { Projector } from "../renderers/Projector.js";
+import { RenderableFace } from "../renderers/Projector.js";
+import { RenderableLine } from "../renderers/Projector.js";
+import { RenderableSprite } from "../renderers/Projector.js";
+
+var SoftwareRenderer = function ( parameters ) {
+
+	console.log( 'THREE.SoftwareRenderer', REVISION );
+
+	parameters = parameters || {};
+
+	var canvas = parameters.canvas !== undefined
+			 ? parameters.canvas
+			 : document.createElement( 'canvas' );
+
+	var context = canvas.getContext( '2d', {
+		alpha: parameters.alpha === true
+	} );
+
+	var shaders = {};
+	var textures = {};
+
+	var canvasWidth, canvasHeight;
+	var canvasWBlocks, canvasHBlocks;
+	var viewportXScale, viewportYScale, viewportZScale;
+	var viewportXOffs, viewportYOffs, viewportZOffs;
+
+	var clearColor = new Color( 0x000000 );
+	var clearAlpha = parameters.alpha === true ? 0 : 1;
+
+	var imagedata, data, zbuffer;
+	var numBlocks, blockMaxZ, blockFlags;
+
+	var BLOCK_ISCLEAR = ( 1 << 0 );
+	var BLOCK_NEEDCLEAR = ( 1 << 1 );
+
+	var subpixelBits = 4;
+	var subpixelBias = ( 1 << subpixelBits ) - 1;
+	var blockShift = 3;
+	var blockSize = 1 << blockShift;
+	var maxZVal = ( 1 << 24 ); // Note: You want to size this so you don't get overflows.
+	var lineMode = false;
+	var lookVector = new Vector3( 0, 0, 1 );
+	var crossVector = new Vector3();
+
+	var rectx1 = Infinity, recty1 = Infinity;
+	var rectx2 = 0, recty2 = 0;
+
+	var prevrectx1 = Infinity, prevrecty1 = Infinity;
+	var prevrectx2 = 0, prevrecty2 = 0;
+
+	var projector = new Projector();
+
+	var spriteV1 = new Vector4();
+	var spriteV2 = new Vector4();
+	var spriteV3 = new Vector4();
+
+	var spriteUV1 = new Vector2();
+	var spriteUV2 = new Vector2();
+	var spriteUV3 = new Vector2();
+
+	var mpVPool = [];
+	var mpVPoolCount = 0;
+	var mpNPool = [];
+	var mpNPoolCount = 0;
+	var mpUVPool = [];
+	var mpUVPoolCount = 0;
+
+	var _this = this;
+
+	this.domElement = canvas;
+
+	this.autoClear = true;
+
+	this.setClearColor = function ( color, alpha ) {
+
+		clearColor.set( color );
+		clearAlpha = alpha;
+		clearColorBuffer( clearColor );
+
+	};
+
+	this.setPixelRatio = function () {};
+
+	this.setSize = function ( width, height ) {
+
+		canvasWBlocks = Math.floor( width / blockSize );
+		canvasHBlocks = Math.floor( height / blockSize );
+		canvasWidth = canvasWBlocks * blockSize;
+		canvasHeight = canvasHBlocks * blockSize;
+
+		var fixScale = 1 << subpixelBits;
+
+		viewportXScale = fixScale * canvasWidth / 2;
+		viewportYScale = - fixScale * canvasHeight / 2;
+		viewportZScale = maxZVal / 2;
+
+		viewportXOffs = fixScale * canvasWidth / 2 + 0.5;
+		viewportYOffs = fixScale * canvasHeight / 2 + 0.5;
+		viewportZOffs = maxZVal / 2 + 0.5;
+
+		canvas.width = canvasWidth;
+		canvas.height = canvasHeight;
+
+		imagedata = context.getImageData( 0, 0, canvasWidth, canvasHeight );
+		data = imagedata.data;
+
+		zbuffer = new Int32Array( data.length / 4 );
+
+		numBlocks = canvasWBlocks * canvasHBlocks;
+		blockMaxZ = new Int32Array( numBlocks );
+		blockFlags = new Uint8Array( numBlocks );
+
+		for ( var i = 0, l = zbuffer.length; i < l; i ++ ) {
+
+			zbuffer[ i ] = maxZVal;
+
+		}
+
+		for ( var i = 0; i < numBlocks; i ++ ) {
+
+			blockFlags[ i ] = BLOCK_ISCLEAR;
+
+		}
+
+		clearColorBuffer( clearColor );
+
+	};
+
+	this.clear = function () {
+
+		rectx1 = Infinity;
+		recty1 = Infinity;
+		rectx2 = 0;
+		recty2 = 0;
+		mpVPoolCount = 0;
+		mpNPoolCount = 0;
+		mpUVPoolCount = 0;
+
+		for ( var i = 0; i < numBlocks; i ++ ) {
+
+			blockMaxZ[ i ] = maxZVal;
+			blockFlags[ i ] = ( blockFlags[ i ] & BLOCK_ISCLEAR ) ? BLOCK_ISCLEAR : BLOCK_NEEDCLEAR;
+
+		}
+
+	};
+
+
+	this.render = function ( scene, camera ) {
+
+		// TODO: Check why autoClear can't be false.
+		this.clear();
+
+		var background = scene.background;
+
+		if ( background && background.isColor ) {
+
+			clearColorBuffer( background );
+
+		}
+
+		var renderData = projector.projectScene( scene, camera, false, false );
+		var elements = renderData.elements;
+
+		for ( var e = 0, el = elements.length; e < el; e ++ ) {
+
+			var element = elements[ e ];
+			var material = element.material;
+			var shader = getMaterialShader( material );
+
+			if ( ! shader ) continue;
+
+			if ( element instanceof RenderableFace ) {
+
+				if ( ! element.uvs ) {
+
+					drawTriangle(
+						element.v1.positionScreen,
+						element.v2.positionScreen,
+						element.v3.positionScreen,
+						null, null, null,
+						shader, element, material
+					);
+
+				} else {
+
+					drawTriangle(
+						element.v1.positionScreen,
+						element.v2.positionScreen,
+						element.v3.positionScreen,
+						element.uvs[ 0 ], element.uvs[ 1 ], element.uvs[ 2 ],
+						shader, element, material
+					);
+
+				}
+
+
+			} else if ( element instanceof RenderableSprite ) {
+
+				var scaleX = element.scale.x * 0.5;
+				var scaleY = element.scale.y * 0.5;
+
+				spriteV1.copy( element );
+				spriteV1.x -= scaleX;
+				spriteV1.y += scaleY;
+
+				spriteV2.copy( element );
+				spriteV2.x -= scaleX;
+				spriteV2.y -= scaleY;
+
+				spriteV3.copy( element );
+				spriteV3.x += scaleX;
+				spriteV3.y += scaleY;
+
+				if ( material.map ) {
+
+					spriteUV1.set( 0, 1 );
+					spriteUV2.set( 0, 0 );
+					spriteUV3.set( 1, 1 );
+
+					drawTriangle(
+						spriteV1, spriteV2, spriteV3,
+						spriteUV1, spriteUV2, spriteUV3,
+						shader, element, material
+					);
+
+				} else {
+
+					drawTriangle(
+						spriteV1, spriteV2, spriteV3,
+						null, null, null,
+						shader, element, material
+					);
+
+				}
+
+				spriteV1.copy( element );
+				spriteV1.x += scaleX;
+				spriteV1.y += scaleY;
+
+				spriteV2.copy( element );
+				spriteV2.x -= scaleX;
+				spriteV2.y -= scaleY;
+
+				spriteV3.copy( element );
+				spriteV3.x += scaleX;
+				spriteV3.y -= scaleY;
+
+				if ( material.map ) {
+
+					spriteUV1.set( 1, 1 );
+					spriteUV2.set( 0, 0 );
+					spriteUV3.set( 1, 0 );
+
+					drawTriangle(
+						spriteV1, spriteV2, spriteV3,
+						spriteUV1, spriteUV2, spriteUV3,
+						shader, element, material
+					);
+
+				} else {
+
+					drawTriangle(
+						spriteV1, spriteV2, spriteV3,
+						null, null, null,
+						shader, element, material
+					);
+
+				}
+
+			} else if ( element instanceof RenderableLine ) {
+
+				var shader = getMaterialShader( material );
+
+				drawLine(
+					element.v1.positionScreen,
+					element.v2.positionScreen,
+					element.vertexColors[ 0 ],
+					element.vertexColors[ 1 ],
+					shader,
+					material
+				);
+
+			}
+
+		}
+
+		finishClear();
+
+		var x = Math.min( rectx1, prevrectx1 );
+		var y = Math.min( recty1, prevrecty1 );
+		var width = Math.max( rectx2, prevrectx2 ) - x;
+		var height = Math.max( recty2, prevrecty2 ) - y;
+
+		/*
+		// debug; draw zbuffer
+
+		for ( var i = 0, l = zbuffer.length; i < l; i++ ) {
+
+			var o = i * 4;
+			var v = (65535 - zbuffer[ i ]) >> 3;
+			data[ o + 0 ] = v;
+			data[ o + 1 ] = v;
+			data[ o + 2 ] = v;
+			data[ o + 3 ] = 255;
+		}
+		*/
+
+		if ( x !== Infinity ) {
+
+			context.putImageData( imagedata, 0, 0, x, y, width, height );
+
+		}
+
+		prevrectx1 = rectx1; prevrecty1 = recty1;
+		prevrectx2 = rectx2; prevrecty2 = recty2;
+
+	};
+
+	function getAlpha() {
+
+		return parameters.alpha === true ? clearAlpha : 1;
+
+	}
+
+	function clearColorBuffer( color ) {
+
+		var size = canvasWidth * canvasHeight * 4;
+
+		for ( var i = 0; i < size; i += 4 ) {
+
+			data[ i ] = color.r * 255 | 0;
+			data[ i + 1 ] = color.g * 255 | 0;
+			data[ i + 2 ] = color.b * 255 | 0;
+			data[ i + 3 ] = getAlpha() * 255 | 0;
+
+		}
+
+		context.fillStyle = 'rgba(' + ( ( clearColor.r * 255 ) | 0 ) + ',' + ( ( clearColor.g * 255 ) | 0 ) + ',' + ( ( clearColor.b * 255 ) | 0 ) + ',' + getAlpha() + ')';
+		context.fillRect( 0, 0, canvasWidth, canvasHeight );
+
+	}
+
+	function getPalette( material, bSimulateSpecular ) {
+
+		var i = 0, j = 0;
+		var diffuseR = material.color.r * 255;
+		var diffuseG = material.color.g * 255;
+		var diffuseB = material.color.b * 255;
+		var palette = new Uint8Array( 256 * 3 );
+
+		if ( bSimulateSpecular ) {
+
+			while ( i < 204 ) {
+
+				palette[ j ++ ] = Math.min( i * diffuseR / 204, 255 );
+				palette[ j ++ ] = Math.min( i * diffuseG / 204, 255 );
+				palette[ j ++ ] = Math.min( i * diffuseB / 204, 255 );
+				++ i;
+
+			}
+
+			while ( i < 256 ) {
+
+				// plus specular highlight
+				palette[ j ++ ] = Math.min( diffuseR + ( i - 204 ) * ( 255 - diffuseR ) / 82, 255 );
+				palette[ j ++ ] = Math.min( diffuseG + ( i - 204 ) * ( 255 - diffuseG ) / 82, 255 );
+				palette[ j ++ ] = Math.min( diffuseB + ( i - 204 ) * ( 255 - diffuseB ) / 82, 255 );
+				++ i;
+
+			}
+
+		} else {
+
+			while ( i < 256 ) {
+
+				palette[ j ++ ] = Math.min( i * diffuseR / 255, 255 );
+				palette[ j ++ ] = Math.min( i * diffuseG / 255, 255 );
+				palette[ j ++ ] = Math.min( i * diffuseB / 255, 255 );
+				++ i;
+
+			}
+
+		}
+
+		return palette;
+
+	}
+
+	function basicMaterialShader( buffer, depthBuf, offset, depth, u, v, n, face, material ) {
+
+		var colorOffset = offset * 4;
+
+		var texture = textures[ material.map.id ];
+
+		if ( ! texture.data ) return;
+
+		var tdim = texture.width;
+		var isTransparent = material.transparent;
+		var tbound = tdim - 1;
+		var tdata = texture.data;
+		var tIndex = ( ( ( v * tdim ) & tbound ) * tdim + ( ( u * tdim ) & tbound ) ) * 4;
+
+		if ( ! isTransparent ) {
+
+			buffer[ colorOffset ] = tdata[ tIndex ];
+			buffer[ colorOffset + 1 ] = tdata[ tIndex + 1 ];
+			buffer[ colorOffset + 2 ] = tdata[ tIndex + 2 ];
+			buffer[ colorOffset + 3 ] = ( material.opacity << 8 ) - 1;
+			depthBuf[ offset ] = depth;
+
+		} else {
+
+			var srcR = tdata[ tIndex ];
+			var srcG = tdata[ tIndex + 1 ];
+			var srcB = tdata[ tIndex + 2 ];
+			var opaci = tdata[ tIndex + 3 ] * material.opacity / 255;
+			var destR = buffer[ colorOffset ];
+			var destG = buffer[ colorOffset + 1 ];
+			var destB = buffer[ colorOffset + 2 ];
+
+			buffer[ colorOffset ] = ( srcR * opaci + destR * ( 1 - opaci ) );
+			buffer[ colorOffset + 1 ] = ( srcG * opaci + destG * ( 1 - opaci ) );
+			buffer[ colorOffset + 2 ] = ( srcB * opaci + destB * ( 1 - opaci ) );
+			buffer[ colorOffset + 3 ] = ( material.opacity << 8 ) - 1;
+
+			// Only opaue pixls write to the depth buffer
+
+			if ( buffer[ colorOffset + 3 ] == 255 )	depthBuf[ offset ] = depth;
+
+		}
+
+	}
+
+	function lightingMaterialShader( buffer, depthBuf, offset, depth, u, v, n, face, material ) {
+
+		var colorOffset = offset * 4;
+
+		var texture = textures[ material.map.id ];
+
+		if ( ! texture.data ) return;
+
+		var tdim = texture.width;
+		var isTransparent = material.transparent;
+		var cIndex = ( n > 0 ? ( ~ ~ n ) : 0 ) * 3;
+		var tbound = tdim - 1;
+		var tdata = texture.data;
+		var tIndex = ( ( ( v * tdim ) & tbound ) * tdim + ( ( u * tdim ) & tbound ) ) * 4;
+
+		if ( ! isTransparent ) {
+
+			buffer[ colorOffset ] = ( material.palette[ cIndex ] * tdata[ tIndex ] ) >> 8;
+			buffer[ colorOffset + 1 ] = ( material.palette[ cIndex + 1 ] * tdata[ tIndex + 1 ] ) >> 8;
+			buffer[ colorOffset + 2 ] = ( material.palette[ cIndex + 2 ] * tdata[ tIndex + 2 ] ) >> 8;
+			buffer[ colorOffset + 3 ] = ( material.opacity << 8 ) - 1;
+			depthBuf[ offset ] = depth;
+
+		} else {
+
+			var foreColorR = material.palette[ cIndex ] * tdata[ tIndex ];
+			var foreColorG = material.palette[ cIndex + 1 ] * tdata[ tIndex + 1 ];
+			var foreColorB = material.palette[ cIndex + 2 ] * tdata[ tIndex + 2 ];
+			var opaci = tdata[ tIndex + 3 ] * material.opacity / 256;
+			var destR = buffer[ colorOffset ];
+			var destG = buffer[ colorOffset + 1 ];
+			var destB = buffer[ colorOffset + 2 ];
+
+			buffer[ colorOffset ] = foreColorR * opaci + destR * ( 1 - opaci );
+			buffer[ colorOffset + 1 ] = foreColorG * opaci + destG * ( 1 - opaci );
+			buffer[ colorOffset + 2 ] = foreColorB * opaci + destB * ( 1 - opaci );
+			buffer[ colorOffset + 3 ] = ( material.opacity << 8 ) - 1;
+
+			// Only opaue pixls write to the depth buffer
+
+			if ( buffer[ colorOffset + 3 ] == 255 ) depthBuf[ offset ] = depth;
+
+		}
+
+	}
+
+	function getMaterialShader( material ) {
+
+		var id = material.id;
+		var shader = shaders[ id ];
+
+		if ( shader && material.map && ! textures[ material.map.id ] ) delete shaders[ id ];
+
+		if ( shaders[ id ] === undefined || material.needsUpdate === true ) {
+
+			if ( material instanceof MeshBasicMaterial ||
+				material instanceof MeshLambertMaterial ||
+				material instanceof MeshPhongMaterial ||
+				material instanceof SpriteMaterial ) {
+
+				if ( material instanceof MeshLambertMaterial ) {
+
+					// Generate color palette
+					if ( ! material.palette ) {
+
+						material.palette = getPalette( material, false );
+
+					}
+
+				} else if ( material instanceof MeshPhongMaterial ) {
+
+					// Generate color palette
+					if ( ! material.palette ) {
+
+						material.palette = getPalette( material, true );
+
+					}
+
+				}
+
+				var string;
+
+				if ( material.map ) {
+
+					var texture = new SoftwareRenderer.Texture();
+					texture.fromImage( material.map.image );
+
+					if ( ! texture.data ) return;
+
+					textures[ material.map.id ] = texture;
+
+					if ( material instanceof MeshBasicMaterial
+						|| material instanceof SpriteMaterial ) {
+
+						shader = basicMaterialShader;
+
+					} else {
+
+						shader = lightingMaterialShader;
+
+					}
+
+
+				} else {
+
+					if ( material.vertexColors === FaceColors || material.vertexColors === VertexColors ) {
+
+						string = [
+							'var colorOffset = offset * 4;',
+							'buffer[ colorOffset ] = face.color.r * 255;',
+							'buffer[ colorOffset + 1 ] = face.color.g * 255;',
+							'buffer[ colorOffset + 2 ] = face.color.b * 255;',
+							'buffer[ colorOffset + 3 ] = material.opacity * 255;',
+							'depthBuf[ offset ] = depth;'
+						].join( '\n' );
+
+					} else {
+
+						string = [
+							'var colorOffset = offset * 4;',
+							'buffer[ colorOffset ] = material.color.r * 255;',
+							'buffer[ colorOffset + 1 ] = material.color.g * 255;',
+							'buffer[ colorOffset + 2 ] = material.color.b * 255;',
+							'buffer[ colorOffset + 3 ] = material.opacity * 255;',
+							'depthBuf[ offset ] = depth;'
+						].join( '\n' );
+
+					}
+
+					shader = new Function( 'buffer, depthBuf, offset, depth, u, v, n, face, material', string );
+
+				}
+
+			} else if ( material instanceof LineBasicMaterial ) {
+
+				var string = [
+					'var colorOffset = offset * 4;',
+					'buffer[ colorOffset ] = material.color.r * (color1.r+color2.r) * 0.5 * 255;',
+					'buffer[ colorOffset + 1 ] = material.color.g * (color1.g+color2.g) * 0.5 * 255;',
+					'buffer[ colorOffset + 2 ] = material.color.b * (color1.b+color2.b) * 0.5 * 255;',
+					'buffer[ colorOffset + 3 ] = 255;',
+					'depthBuf[ offset ] = depth;'
+				].join( '\n' );
+
+				shader = new Function( 'buffer, depthBuf, offset, depth, color1, color2, material', string );
+
+			} else {
+
+				var string = [
+					'var colorOffset = offset * 4;',
+					'buffer[ colorOffset ] = u * 255;',
+					'buffer[ colorOffset + 1 ] = v * 255;',
+					'buffer[ colorOffset + 2 ] = 0;',
+					'buffer[ colorOffset + 3 ] = 255;',
+					'depthBuf[ offset ] = depth;'
+				].join( '\n' );
+
+				shader = new Function( 'buffer, depthBuf, offset, depth, u, v, n, face, material', string );
+
+			}
+
+			shaders[ id ] = shader;
+
+			material.needsUpdate = false;
+
+		}
+
+		return shader;
+
+	}
+
+	/*
+	function clearRectangle( x1, y1, x2, y2 ) {
+
+		var xmin = Math.max( Math.min( x1, x2 ), 0 );
+		var xmax = Math.min( Math.max( x1, x2 ), canvasWidth );
+		var ymin = Math.max( Math.min( y1, y2 ), 0 );
+		var ymax = Math.min( Math.max( y1, y2 ), canvasHeight );
+
+		var offset = ( xmin + ymin * canvasWidth ) * 4 + 3;
+		var linestep = ( canvasWidth - ( xmax - xmin ) ) * 4;
+
+		for ( var y = ymin; y < ymax; y ++ ) {
+
+			for ( var x = xmin; x < xmax; x ++ ) {
+
+				data[ offset += 4 ] = 0;
+
+			}
+
+			offset += linestep;
+
+		}
+
+	}
+	*/
+
+	function drawTriangle( v1, v2, v3, uv1, uv2, uv3, shader, face, material ) {
+
+		// TODO: Implement per-pixel z-clipping
+
+		if ( v1.z < - 1 || v1.z > 1 || v2.z < - 1 || v2.z > 1 || v3.z < - 1 || v3.z > 1 ) return;
+
+		// https://gist.github.com/2486101
+		// explanation: http://pouet.net/topic.php?which=8760&page=1
+
+		var fixscale = ( 1 << subpixelBits );
+
+		// 28.4 fixed-point coordinates
+
+		var x1 = ( v1.x * viewportXScale + viewportXOffs ) | 0;
+		var x2 = ( v2.x * viewportXScale + viewportXOffs ) | 0;
+		var x3 = ( v3.x * viewportXScale + viewportXOffs ) | 0;
+
+		var y1 = ( v1.y * viewportYScale + viewportYOffs ) | 0;
+		var y2 = ( v2.y * viewportYScale + viewportYOffs ) | 0;
+		var y3 = ( v3.y * viewportYScale + viewportYOffs ) | 0;
+
+		var bHasNormal = face.vertexNormalsModel && face.vertexNormalsModel.length;
+		var bHasUV = uv1 && uv2 && uv3;
+
+		var longestSide = Math.max(
+			Math.sqrt( ( x1 - x2 ) * ( x1 - x2 ) + ( y1 - y2 ) * ( y1 - y2 ) ),
+			Math.sqrt( ( x2 - x3 ) * ( x2 - x3 ) + ( y2 - y3 ) * ( y2 - y3 ) ),
+			Math.sqrt( ( x3 - x1 ) * ( x3 - x1 ) + ( y3 - y1 ) * ( y3 - y1 ) )
+		);
+
+		if ( ! ( face instanceof RenderableSprite ) && ( longestSide > 100 * fixscale ) ) {
+
+			// 1
+			// |\
+			// |a\
+			// |__\
+			// |\c|\
+			// |b\|d\
+			// |__\__\
+			// 2      3
+			var tempFace = { vertexNormalsModel: [], color: face.color };
+			var mpUV12, mpUV23, mpUV31;
+
+			if ( bHasUV ) {
+
+				if ( mpUVPoolCount === mpUVPool.length ) {
+
+					mpUV12 = new Vector2();
+					mpUVPool.push( mpUV12 );
+					++ mpUVPoolCount;
+
+					mpUV23 = new Vector2();
+					mpUVPool.push( mpUV23 );
+					++ mpUVPoolCount;
+
+					mpUV31 = new Vector2();
+					mpUVPool.push( mpUV31 );
+					++ mpUVPoolCount;
+
+				} else {
+
+					mpUV12 = mpUVPool[ mpUVPoolCount ];
+					++ mpUVPoolCount;
+
+					mpUV23 = mpUVPool[ mpUVPoolCount ];
+					++ mpUVPoolCount;
+
+					mpUV31 = mpUVPool[ mpUVPoolCount ];
+					++ mpUVPoolCount;
+
+				}
+
+				var weight;
+
+				weight = ( 1 + v2.z ) * ( v2.w / v1.w ) / ( 1 + v1.z );
+				mpUV12.copy( uv1 ).multiplyScalar( weight ).add( uv2 ).multiplyScalar( 1 / ( weight + 1 ) );
+
+				weight = ( 1 + v3.z ) * ( v3.w / v2.w ) / ( 1 + v2.z );
+				mpUV23.copy( uv2 ).multiplyScalar( weight ).add( uv3 ).multiplyScalar( 1 / ( weight + 1 ) );
+
+				weight = ( 1 + v1.z ) * ( v1.w / v3.w ) / ( 1 + v3.z );
+				mpUV31.copy( uv3 ).multiplyScalar( weight ).add( uv1 ).multiplyScalar( 1 / ( weight + 1 ) );
+
+			}
+
+			var mpV12, mpV23, mpV31;
+
+			if ( mpVPoolCount === mpVPool.length ) {
+
+				mpV12 = new Vector4();
+				mpVPool.push( mpV12 );
+				++ mpVPoolCount;
+
+				mpV23 = new Vector4();
+				mpVPool.push( mpV23 );
+				++ mpVPoolCount;
+
+				mpV31 = new Vector4();
+				mpVPool.push( mpV31 );
+				++ mpVPoolCount;
+
+			} else {
+
+				mpV12 = mpVPool[ mpVPoolCount ];
+				++ mpVPoolCount;
+
+				mpV23 = mpVPool[ mpVPoolCount ];
+				++ mpVPoolCount;
+
+				mpV31 = mpVPool[ mpVPoolCount ];
+				++ mpVPoolCount;
+
+			}
+
+			mpV12.copy( v1 ).add( v2 ).multiplyScalar( 0.5 );
+			mpV23.copy( v2 ).add( v3 ).multiplyScalar( 0.5 );
+			mpV31.copy( v3 ).add( v1 ).multiplyScalar( 0.5 );
+
+			var mpN12, mpN23, mpN31;
+
+			if ( bHasNormal ) {
+
+				if ( mpNPoolCount === mpNPool.length ) {
+
+					mpN12 = new Vector3();
+					mpNPool.push( mpN12 );
+					++ mpNPoolCount;
+
+					mpN23 = new Vector3();
+					mpNPool.push( mpN23 );
+					++ mpNPoolCount;
+
+					mpN31 = new Vector3();
+					mpNPool.push( mpN31 );
+					++ mpNPoolCount;
+
+				} else {
+
+					mpN12 = mpNPool[ mpNPoolCount ];
+					++ mpNPoolCount;
+
+					mpN23 = mpNPool[ mpNPoolCount ];
+					++ mpNPoolCount;
+
+					mpN31 = mpNPool[ mpNPoolCount ];
+					++ mpNPoolCount;
+
+				}
+
+				mpN12.copy( face.vertexNormalsModel[ 0 ] ).add( face.vertexNormalsModel[ 1 ] ).normalize();
+				mpN23.copy( face.vertexNormalsModel[ 1 ] ).add( face.vertexNormalsModel[ 2 ] ).normalize();
+				mpN31.copy( face.vertexNormalsModel[ 2 ] ).add( face.vertexNormalsModel[ 0 ] ).normalize();
+
+			}
+
+			// a
+			if ( bHasNormal ) {
+
+				tempFace.vertexNormalsModel[ 0 ] = face.vertexNormalsModel[ 0 ];
+				tempFace.vertexNormalsModel[ 1 ] = mpN12;
+				tempFace.vertexNormalsModel[ 2 ] = mpN31;
+
+			}
+
+			drawTriangle( v1, mpV12, mpV31, uv1, mpUV12, mpUV31, shader, tempFace, material );
+
+			// b
+			if ( bHasNormal ) {
+
+				tempFace.vertexNormalsModel[ 0 ] = face.vertexNormalsModel[ 1 ];
+				tempFace.vertexNormalsModel[ 1 ] = mpN23;
+				tempFace.vertexNormalsModel[ 2 ] = mpN12;
+
+			}
+
+			drawTriangle( v2, mpV23, mpV12, uv2, mpUV23, mpUV12, shader, tempFace, material );
+
+			// c
+			if ( bHasNormal ) {
+
+				tempFace.vertexNormalsModel[ 0 ] = mpN12;
+				tempFace.vertexNormalsModel[ 1 ] = mpN23;
+				tempFace.vertexNormalsModel[ 2 ] = mpN31;
+
+			}
+
+			drawTriangle( mpV12, mpV23, mpV31, mpUV12, mpUV23, mpUV31, shader, tempFace, material );
+
+			// d
+			if ( bHasNormal ) {
+
+				tempFace.vertexNormalsModel[ 0 ] = face.vertexNormalsModel[ 2 ];
+				tempFace.vertexNormalsModel[ 1 ] = mpN31;
+				tempFace.vertexNormalsModel[ 2 ] = mpN23;
+
+			}
+
+			drawTriangle( v3, mpV31, mpV23, uv3, mpUV31, mpUV23, shader, tempFace, material );
+
+			return;
+
+		}
+
+		// Z values (.28 fixed-point)
+
+		var z1 = ( v1.z * viewportZScale + viewportZOffs ) | 0;
+		var z2 = ( v2.z * viewportZScale + viewportZOffs ) | 0;
+		var z3 = ( v3.z * viewportZScale + viewportZOffs ) | 0;
+
+		// UV values
+		var bHasUV = false;
+		var tu1, tv1, tu2, tv2, tu3, tv3;
+
+		if ( uv1 && uv2 && uv3 ) {
+
+			bHasUV = true;
+
+			tu1 = uv1.x;
+			tv1 = 1 - uv1.y;
+			tu2 = uv2.x;
+			tv2 = 1 - uv2.y;
+			tu3 = uv3.x;
+			tv3 = 1 - uv3.y;
+
+		}
+
+		// Normal values
+		var n1, n2, n3, nz1, nz2, nz3;
+
+		if ( bHasNormal ) {
+
+			n1 = face.vertexNormalsModel[ 0 ];
+			n2 = face.vertexNormalsModel[ 1 ];
+			n3 = face.vertexNormalsModel[ 2 ];
+			nz1 = n1.z * 255;
+			nz2 = n2.z * 255;
+			nz3 = n3.z * 255;
+
+		}
+
+		// Deltas
+
+		var dx12 = x1 - x2, dy12 = y2 - y1;
+		var dx23 = x2 - x3, dy23 = y3 - y2;
+		var dx31 = x3 - x1, dy31 = y1 - y3;
+
+		// Bounding rectangle
+
+		var minx = Math.max( ( Math.min( x1, x2, x3 ) + subpixelBias ) >> subpixelBits, 0 );
+		var maxx = Math.min( ( Math.max( x1, x2, x3 ) + subpixelBias ) >> subpixelBits, canvasWidth );
+		var miny = Math.max( ( Math.min( y1, y2, y3 ) + subpixelBias ) >> subpixelBits, 0 );
+		var maxy = Math.min( ( Math.max( y1, y2, y3 ) + subpixelBias ) >> subpixelBits, canvasHeight );
+
+		rectx1 = Math.min( minx, rectx1 );
+		rectx2 = Math.max( maxx, rectx2 );
+		recty1 = Math.min( miny, recty1 );
+		recty2 = Math.max( maxy, recty2 );
+
+		// Block size, standard 8x8 (must be power of two)
+
+		var q = blockSize;
+
+		// Start in corner of 8x8 block
+
+		minx &= ~ ( q - 1 );
+		miny &= ~ ( q - 1 );
+
+		// Constant part of half-edge functions
+
+		var minXfixscale = ( minx << subpixelBits );
+		var minYfixscale = ( miny << subpixelBits );
+
+		var c1 = dy12 * ( ( minXfixscale ) - x1 ) + dx12 * ( ( minYfixscale ) - y1 );
+		var c2 = dy23 * ( ( minXfixscale ) - x2 ) + dx23 * ( ( minYfixscale ) - y2 );
+		var c3 = dy31 * ( ( minXfixscale ) - x3 ) + dx31 * ( ( minYfixscale ) - y3 );
+
+		// Correct for fill convention
+
+		if ( dy12 > 0 || ( dy12 == 0 && dx12 > 0 ) ) c1 ++;
+		if ( dy23 > 0 || ( dy23 == 0 && dx23 > 0 ) ) c2 ++;
+		if ( dy31 > 0 || ( dy31 == 0 && dx31 > 0 ) ) c3 ++;
+
+		// Note this doesn't kill subpixel precision, but only because we test for >=0 (not >0).
+		// It's a bit subtle. :)
+		c1 = ( c1 - 1 ) >> subpixelBits;
+		c2 = ( c2 - 1 ) >> subpixelBits;
+		c3 = ( c3 - 1 ) >> subpixelBits;
+
+		// Z interpolation setup
+
+		var dz12 = z1 - z2, dz31 = z3 - z1;
+		var invDet = 1.0 / ( dx12 * dy31 - dx31 * dy12 );
+		var dzdx = ( invDet * ( dz12 * dy31 - dz31 * dy12 ) ); // dz per one subpixel step in x
+		var dzdy = ( invDet * ( dz12 * dx31 - dx12 * dz31 ) ); // dz per one subpixel step in y
+
+		// Z at top/left corner of rast area
+
+		var cz = ( z1 + ( ( minXfixscale ) - x1 ) * dzdx + ( ( minYfixscale ) - y1 ) * dzdy ) | 0;
+
+		// Z pixel steps
+
+		dzdx = ( dzdx * fixscale ) | 0;
+		dzdy = ( dzdy * fixscale ) | 0;
+
+		var dtvdx, dtvdy, cbtu, cbtv;
+		if ( bHasUV ) {
+
+			// UV interpolation setup
+			var dtu12 = tu1 - tu2, dtu31 = tu3 - tu1;
+			var dtudx = ( invDet * ( dtu12 * dy31 - dtu31 * dy12 ) ); // dtu per one subpixel step in x
+			var dtudy = ( invDet * ( dtu12 * dx31 - dx12 * dtu31 ) ); // dtu per one subpixel step in y
+			var dtv12 = tv1 - tv2, dtv31 = tv3 - tv1;
+			dtvdx = ( invDet * ( dtv12 * dy31 - dtv31 * dy12 ) ); // dtv per one subpixel step in x
+			dtvdy = ( invDet * ( dtv12 * dx31 - dx12 * dtv31 ) ); // dtv per one subpixel step in y
+
+			// UV at top/left corner of rast area
+			cbtu = ( tu1 + ( minXfixscale - x1 ) * dtudx + ( minYfixscale - y1 ) * dtudy );
+			cbtv = ( tv1 + ( minXfixscale - x1 ) * dtvdx + ( minYfixscale - y1 ) * dtvdy );
+
+			// UV pixel steps
+			dtudx = dtudx * fixscale;
+			dtudy = dtudy * fixscale;
+			dtvdx = dtvdx * fixscale;
+			dtvdy = dtvdy * fixscale;
+
+		}
+
+		var dnzdy, cbnz;
+
+		if ( bHasNormal ) {
+
+			 // Normal interpolation setup
+			var dnz12 = nz1 - nz2, dnz31 = nz3 - nz1;
+			var dnzdx = ( invDet * ( dnz12 * dy31 - dnz31 * dy12 ) ); // dnz per one subpixel step in x
+			var dnzdy = ( invDet * ( dnz12 * dx31 - dx12 * dnz31 ) ); // dnz per one subpixel step in y
+
+			// Normal at top/left corner of rast area
+			cbnz = ( nz1 + ( minXfixscale - x1 ) * dnzdx + ( minYfixscale - y1 ) * dnzdy );
+
+			// Normal pixel steps
+			dnzdx = ( dnzdx * fixscale );
+			dnzdy = ( dnzdy * fixscale );
+
+		}
+
+		// Set up min/max corners
+		var qm1 = q - 1; // for convenience
+		var nmin1 = 0, nmax1 = 0;
+		var nmin2 = 0, nmax2 = 0;
+		var nmin3 = 0, nmax3 = 0;
+		var nminz = 0, nmaxz = 0;
+		if ( dx12 >= 0 ) nmax1 -= qm1 * dx12; else nmin1 -= qm1 * dx12;
+		if ( dy12 >= 0 ) nmax1 -= qm1 * dy12; else nmin1 -= qm1 * dy12;
+		if ( dx23 >= 0 ) nmax2 -= qm1 * dx23; else nmin2 -= qm1 * dx23;
+		if ( dy23 >= 0 ) nmax2 -= qm1 * dy23; else nmin2 -= qm1 * dy23;
+		if ( dx31 >= 0 ) nmax3 -= qm1 * dx31; else nmin3 -= qm1 * dx31;
+		if ( dy31 >= 0 ) nmax3 -= qm1 * dy31; else nmin3 -= qm1 * dy31;
+		if ( dzdx >= 0 ) nmaxz += qm1 * dzdx; else nminz += qm1 * dzdx;
+		if ( dzdy >= 0 ) nmaxz += qm1 * dzdy; else nminz += qm1 * dzdy;
+
+		// Loop through blocks
+		var linestep = canvasWidth - q;
+
+		var cb1 = c1;
+		var cb2 = c2;
+		var cb3 = c3;
+		var cbz = cz;
+		var qstep = - q;
+		var e1x = qstep * dy12;
+		var e2x = qstep * dy23;
+		var e3x = qstep * dy31;
+		var ezx = qstep * dzdx;
+
+		var etux, etvx;
+		if ( bHasUV ) {
+
+			etux = qstep * dtudx;
+			etvx = qstep * dtvdx;
+
+		}
+
+		var enzx;
+		if ( bHasNormal ) {
+
+			enzx = qstep * dnzdx;
+
+		}
+
+		var x0 = minx;
+
+		for ( var y0 = miny; y0 < maxy; y0 += q ) {
+
+			// New block line - keep hunting for tri outer edge in old block line dir
+			while ( x0 >= minx && x0 < maxx && cb1 >= nmax1 && cb2 >= nmax2 && cb3 >= nmax3 ) {
+
+				x0 += qstep;
+				cb1 += e1x;
+				cb2 += e2x;
+				cb3 += e3x;
+				cbz += ezx;
+
+				if ( bHasUV ) {
+
+					cbtu += etux;
+					cbtv += etvx;
+
+				}
+
+				if ( bHasNormal ) {
+
+					cbnz += enzx;
+
+				}
+
+			}
+
+			// Okay, we're now in a block we know is outside. Reverse direction and go into main loop.
+			qstep = - qstep;
+			e1x = - e1x;
+			e2x = - e2x;
+			e3x = - e3x;
+			ezx = - ezx;
+
+			if ( bHasUV ) {
+
+				etux = - etux;
+				etvx = - etvx;
+
+			}
+
+			if ( bHasNormal ) {
+
+				enzx = - enzx;
+
+			}
+
+			while ( 1 ) {
+
+				// Step everything
+				x0 += qstep;
+				cb1 += e1x;
+				cb2 += e2x;
+				cb3 += e3x;
+				cbz += ezx;
+
+				if ( bHasUV ) {
+
+					cbtu += etux;
+					cbtv += etvx;
+
+				}
+
+				if ( bHasNormal ) {
+
+					cbnz += enzx;
+
+				}
+
+				// We're done with this block line when at least one edge completely out
+				// If an edge function is too small and decreasing in the current traversal
+				// dir, we're done with this line.
+				if ( x0 < minx || x0 >= maxx ) break;
+				if ( cb1 < nmax1 ) if ( e1x < 0 ) break; else continue;
+				if ( cb2 < nmax2 ) if ( e2x < 0 ) break; else continue;
+				if ( cb3 < nmax3 ) if ( e3x < 0 ) break; else continue;
+
+				// We can skip this block if it's already fully covered
+				var blockX = x0 >> blockShift;
+				var blockY = y0 >> blockShift;
+				var blockId = blockX + blockY * canvasWBlocks;
+				var minz = cbz + nminz;
+
+				// farthest point in block closer than closest point in our tri?
+				if ( blockMaxZ[ blockId ] < minz ) continue;
+
+				// Need to do a deferred clear?
+				var bflags = blockFlags[ blockId ];
+				if ( bflags & BLOCK_NEEDCLEAR ) clearBlock( blockX, blockY );
+				blockFlags[ blockId ] = bflags & ~ ( BLOCK_ISCLEAR | BLOCK_NEEDCLEAR );
+
+				// Offset at top-left corner
+				var offset = x0 + y0 * canvasWidth;
+
+				// Accept whole block when fully covered
+				if ( cb1 >= nmin1 && cb2 >= nmin2 && cb3 >= nmin3 ) {
+
+					var maxz = cbz + nmaxz;
+					blockMaxZ[ blockId ] = Math.min( blockMaxZ[ blockId ], maxz );
+
+					var cy1 = cb1;
+					var cy2 = cb2;
+					var cyz = cbz;
+
+					var cytu, cytv;
+					if ( bHasUV ) {
+
+						cytu = cbtu;
+						cytv = cbtv;
+
+					}
+
+					var cynz;
+					if ( bHasNormal ) {
+
+						cynz = cbnz;
+
+					}
+
+
+					for ( var iy = 0; iy < q; iy ++ ) {
+
+						var cx1 = cy1;
+						var cx2 = cy2;
+						var cxz = cyz;
+
+						var cxtu;
+						var cxtv;
+						if ( bHasUV ) {
+
+							cxtu = cytu;
+							cxtv = cytv;
+
+						}
+
+						var cxnz;
+						if ( bHasNormal ) {
+
+							cxnz = cynz;
+
+						}
+
+						for ( var ix = 0; ix < q; ix ++ ) {
+
+							var z = cxz;
+
+							if ( z < zbuffer[ offset ] ) {
+
+								shader( data, zbuffer, offset, z, cxtu, cxtv, cxnz, face, material );
+
+							}
+
+							cx1 += dy12;
+							cx2 += dy23;
+							cxz += dzdx;
+
+							if ( bHasUV ) {
+
+								cxtu += dtudx;
+								cxtv += dtvdx;
+
+							}
+
+							if ( bHasNormal ) {
+
+								cxnz += dnzdx;
+
+							}
+
+							offset ++;
+
+						}
+
+						cy1 += dx12;
+						cy2 += dx23;
+						cyz += dzdy;
+
+						if ( bHasUV ) {
+
+							cytu += dtudy;
+							cytv += dtvdy;
+
+						}
+
+						if ( bHasNormal ) {
+
+							cynz += dnzdy;
+
+						}
+
+						offset += linestep;
+
+					}
+
+				} else {
+
+					// Partially covered block
+
+					var cy1 = cb1;
+					var cy2 = cb2;
+					var cy3 = cb3;
+					var cyz = cbz;
+
+					var cytu, cytv;
+					if ( bHasUV ) {
+
+						cytu = cbtu;
+						cytv = cbtv;
+
+					}
+
+					var cynz;
+					if ( bHasNormal ) {
+
+						cynz = cbnz;
+
+					}
+
+					for ( var iy = 0; iy < q; iy ++ ) {
+
+						var cx1 = cy1;
+						var cx2 = cy2;
+						var cx3 = cy3;
+						var cxz = cyz;
+
+						var cxtu;
+						var cxtv;
+						if ( bHasUV ) {
+
+							cxtu = cytu;
+							cxtv = cytv;
+
+						}
+
+						var cxnz;
+						if ( bHasNormal ) {
+
+							cxnz = cynz;
+
+						}
+
+						for ( var ix = 0; ix < q; ix ++ ) {
+
+							if ( ( cx1 | cx2 | cx3 ) >= 0 ) {
+
+								var z = cxz;
+
+								if ( z < zbuffer[ offset ] ) {
+
+									shader( data, zbuffer, offset, z, cxtu, cxtv, cxnz, face, material );
+
+								}
+
+							}
+
+							cx1 += dy12;
+							cx2 += dy23;
+							cx3 += dy31;
+							cxz += dzdx;
+
+							if ( bHasUV ) {
+
+								cxtu += dtudx;
+								cxtv += dtvdx;
+
+							}
+
+							if ( bHasNormal ) {
+
+								cxnz += dnzdx;
+
+							}
+
+							offset ++;
+
+						}
+
+						cy1 += dx12;
+						cy2 += dx23;
+						cy3 += dx31;
+						cyz += dzdy;
+
+						if ( bHasUV ) {
+
+							cytu += dtudy;
+							cytv += dtvdy;
+
+						}
+
+						if ( bHasNormal ) {
+
+							cynz += dnzdy;
+
+						}
+
+						offset += linestep;
+
+					}
+
+				}
+
+			}
+
+			// Advance to next row of blocks
+			cb1 += q * dx12;
+			cb2 += q * dx23;
+			cb3 += q * dx31;
+			cbz += q * dzdy;
+
+			if ( bHasUV ) {
+
+				cbtu += q * dtudy;
+				cbtv += q * dtvdy;
+
+			}
+
+			if ( bHasNormal ) {
+
+				cbnz += q * dnzdy;
+
+			}
+
+		}
+
+	}
+
+	// When drawing line, the blockShiftShift has to be zero. In order to clean pixel
+	// Using color1 and color2 to interpolation pixel color
+	// LineWidth is according to material.linewidth
+	function drawLine( v1, v2, color1, color2, shader, material ) {
+
+		// While the line mode is enable, blockSize has to be changed to 0.
+		if ( ! lineMode ) {
+
+			lineMode = true;
+			blockShift = 0;
+			blockSize = 1 << blockShift;
+
+			_this.setSize( canvas.width, canvas.height );
+
+		}
+
+		// TODO: Implement per-pixel z-clipping
+		if ( v1.z < - 1 || v1.z > 1 || v2.z < - 1 || v2.z > 1 ) return;
+
+		var halfLineWidth = Math.floor( ( material.linewidth - 1 ) * 0.5 );
+
+		// https://gist.github.com/2486101
+		// explanation: http://pouet.net/topic.php?which=8760&page=1
+
+		// 28.4 fixed-point coordinates
+		var x1 = ( v1.x * viewportXScale + viewportXOffs ) | 0;
+		var x2 = ( v2.x * viewportXScale + viewportXOffs ) | 0;
+
+		var y1 = ( v1.y * viewportYScale + viewportYOffs ) | 0;
+		var y2 = ( v2.y * viewportYScale + viewportYOffs ) | 0;
+
+		var z1 = ( v1.z * viewportZScale + viewportZOffs ) | 0;
+		var z2 = ( v2.z * viewportZScale + viewportZOffs ) | 0;
+
+		// Deltas
+		var dx12 = x1 - x2, dy12 = y1 - y2, dz12 = z1 - z2;
+
+		// Bounding rectangle
+		var minx = Math.max( ( Math.min( x1, x2 ) + subpixelBias ) >> subpixelBits, 0 );
+		var maxx = Math.min( ( Math.max( x1, x2 ) + subpixelBias ) >> subpixelBits, canvasWidth );
+		var miny = Math.max( ( Math.min( y1, y2 ) + subpixelBias ) >> subpixelBits, 0 );
+		var maxy = Math.min( ( Math.max( y1, y2 ) + subpixelBias ) >> subpixelBits, canvasHeight );
+		var minz = Math.max( ( Math.min( z1, z2 ) + subpixelBias ) >> subpixelBits, 0 );
+		var maxz = ( Math.max( z1, z2 ) + subpixelBias ) >> subpixelBits;
+
+		rectx1 = Math.min( minx, rectx1 );
+		rectx2 = Math.max( maxx, rectx2 );
+		recty1 = Math.min( miny, recty1 );
+		recty2 = Math.max( maxy, recty2 );
+
+		// Get the line's unit vector and cross vector
+		var length = Math.sqrt( ( dy12 * dy12 ) + ( dx12 * dx12 ) );
+		var unitX = ( dx12 / length );
+		var unitY = ( dy12 / length );
+		var unitZ = ( dz12 / length );
+		var pixelX, pixelY, pixelZ;
+		var pX, pY, pZ;
+		crossVector.set( unitX, unitY, unitZ );
+		crossVector.cross( lookVector );
+		crossVector.normalize();
+
+		while ( length > 0 ) {
+
+			// Get this pixel.
+			pixelX = x2 + length * unitX;
+			pixelY = y2 + length * unitY;
+			pixelZ = z2 + length * unitZ;
+
+			pixelX = ( pixelX + subpixelBias ) >> subpixelBits;
+			pixelY = ( pixelY + subpixelBias ) >> subpixelBits;
+			pZ = ( pixelZ + subpixelBias ) >> subpixelBits;
+
+			// Draw line with line width
+			for ( var i = - halfLineWidth; i <= halfLineWidth; ++ i ) {
+
+				// Compute the line pixels.
+				// Get the pixels on the vector that crosses to the line vector
+				pX = Math.floor( ( pixelX + crossVector.x * i ) );
+				pY = Math.floor( ( pixelY + crossVector.y * i ) );
+
+				// if pixel is over the rect. Continue
+				if ( rectx1 >= pX || rectx2 <= pX || recty1 >= pY || recty2 <= pY )
+					continue;
+
+				// Find this pixel at which block
+				var blockX = pX >> blockShift;
+				var blockY = pY >> blockShift;
+				var blockId = blockX + blockY * canvasWBlocks;
+
+				// Compare the pixel depth width z block.
+				if ( blockMaxZ[ blockId ] < minz ) continue;
+
+				blockMaxZ[ blockId ] = Math.min( blockMaxZ[ blockId ], maxz );
+
+				var bflags = blockFlags[ blockId ];
+				if ( bflags & BLOCK_NEEDCLEAR ) clearBlock( blockX, blockY );
+				blockFlags[ blockId ] = bflags & ~ ( BLOCK_ISCLEAR | BLOCK_NEEDCLEAR );
+
+				// draw pixel
+				var offset = pX + pY * canvasWidth;
+
+				if ( pZ < zbuffer[ offset ] ) {
+
+					shader( data, zbuffer, offset, pZ, color1, color2, material );
+
+				}
+
+			}
+
+			-- length;
+
+		}
+
+	}
+
+	function clearBlock( blockX, blockY ) {
+
+		var zoffset = blockX * blockSize + blockY * blockSize * canvasWidth;
+		var poffset = zoffset * 4;
+
+		var zlinestep = canvasWidth - blockSize;
+		var plinestep = zlinestep * 4;
+
+		for ( var y = 0; y < blockSize; y ++ ) {
+
+			for ( var x = 0; x < blockSize; x ++ ) {
+
+				zbuffer[ zoffset ++ ] = maxZVal;
+
+				data[ poffset ++ ] = clearColor.r * 255 | 0;
+				data[ poffset ++ ] = clearColor.g * 255 | 0;
+				data[ poffset ++ ] = clearColor.b * 255 | 0;
+				data[ poffset ++ ] = getAlpha() * 255 | 0;
+
+			}
+
+			zoffset += zlinestep;
+			poffset += plinestep;
+
+		}
+
+	}
+
+	function finishClear( ) {
+
+		var block = 0;
+
+		for ( var y = 0; y < canvasHBlocks; y ++ ) {
+
+			for ( var x = 0; x < canvasWBlocks; x ++ ) {
+
+				if ( blockFlags[ block ] & BLOCK_NEEDCLEAR ) {
+
+					clearBlock( x, y );
+					blockFlags[ block ] = BLOCK_ISCLEAR;
+
+				}
+
+				block ++;
+
+			}
+
+		}
+
+	}
+
+};
+
+SoftwareRenderer.Texture = function () {
+
+	var canvas;
+
+	this.fromImage = function ( image ) {
+
+		if ( ! image || image.width <= 0 || image.height <= 0 )
+			return;
+
+		if ( canvas === undefined ) {
+
+			canvas = document.createElement( 'canvas' );
+
+		}
+
+		var size = image.width > image.height ? image.width : image.height;
+		size = _Math.ceilPowerOfTwo( size );
+
+		if ( canvas.width != size || canvas.height != size ) {
+
+			canvas.width = size;
+			canvas.height = size;
+
+		}
+
+		var ctx = canvas.getContext( '2d' );
+		ctx.clearRect( 0, 0, size, size );
+		ctx.drawImage( image, 0, 0, size, size );
+
+		var imgData = ctx.getImageData( 0, 0, size, size );
+
+		this.data = imgData.data;
+		this.width = size;
+		this.height = size;
+		this.srcUrl = image.src;
+
+	};
+
+};
+
+export { SoftwareRenderer };

src/Three.Legacy.js

@@ -1888,34 +1888,6 @@ ImageUtils.loadCompressedTextureCube = function () {
 
 //
 
-export function Projector() {
-
-	console.error( 'THREE.Projector has been moved to /examples/js/renderers/Projector.js.' );
-
-	this.projectVector = function ( vector, camera ) {
-
-		console.warn( 'THREE.Projector: .projectVector() is now vector.project().' );
-		vector.project( camera );
-
-	};
-
-	this.unprojectVector = function ( vector, camera ) {
-
-		console.warn( 'THREE.Projector: .unprojectVector() is now vector.unproject().' );
-		vector.unproject( camera );
-
-	};
-
-	this.pickingRay = function () {
-
-		console.error( 'THREE.Projector: .pickingRay() is now raycaster.setFromCamera().' );
-
-	};
-
-}
-
-//
-
 export function CanvasRenderer() {
 
 	console.error( 'THREE.CanvasRenderer has been removed' );

utils/modularize.js

@@ -52,6 +52,9 @@ var files = [
 
 	{ path: 'renderers/CSS2DRenderer.js', dependencies: [], ignoreList: [] },
 	{ path: 'renderers/CSS3DRenderer.js', dependencies: [], ignoreList: [] },
+	{ path: 'renderers/Projector.js', dependencies: [], ignoreList: [] },
+	{ path: 'renderers/SoftwareRenderer.js', dependencies: [ { name: 'Projector', path: 'renderers/Projector.js' }, { name: 'RenderableFace', path: 'renderers/Projector.js' }, { name: 'RenderableLine', path: 'renderers/Projector.js' }, { name: 'RenderableSprite', path: 'renderers/Projector.js' } ], ignoreList: [] },
+	{ path: 'renderers/SVGRenderer.js', dependencies: [ { name: 'Projector', path: 'renderers/Projector.js' }, { name: 'RenderableFace', path: 'renderers/Projector.js' }, { name: 'RenderableLine', path: 'renderers/Projector.js' }, { name: 'RenderableSprite', path: 'renderers/Projector.js' } ], ignoreList: [] },
 
 	{ path: 'utils/BufferGeometryUtils.js', dependencies: [], ignoreList: [] },
 	{ path: 'utils/GeometryUtils.js', dependencies: [], ignoreList: [] },