Synced with mrdoob's branch.

examples/webglrenderer2_sandbox.html

@@ -90,6 +90,7 @@
 		<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
 		<script type="text/javascript" src="../src/renderers/WebGLRenderer2.js"></script>
+		<script type="text/javascript" src="../src/renderers/renderables/RenderableObject.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
 		<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>

src/renderers/Projector.js

@@ -7,6 +7,7 @@
 THREE.Projector = function() {
 
 	var _renderList = null,
+	_object, _objectCount, _objectPool = [],
 	_face3, _face32, _face3Count, _face3Pool = [],
 	_line, _lineCount, _linePool = [],
 	_particle, _particleCount, _particlePool = [],
@@ -20,6 +21,46 @@ THREE.Projector = function() {
 
 	_face3VertexNormals;
 
+	this.projectObjects = function ( scene, camera ) {
+
+		var o, ol, objects, object;
+
+		_renderList = [];
+		_objectCount = 0;
+
+		_projScreenMatrix.multiply( camera.projectionMatrix, camera.matrix );
+
+		objects = scene.objects;
+
+		for ( o = 0, ol = objects.length; o < ol; o++ ) {
+
+			object = objects[ o ];
+
+			if ( object.visible === false ) continue;
+
+			_object = _objectPool[ _objectCount ] = _objectPool[ _objectCount ] || new THREE.RenderableObject();
+
+			_vector4.copy( object.position );
+			_projScreenMatrix.multiplyVector4( _vector4 );
+			// _vector4.multiplyScalar( 1 / _vector4.w );
+
+			_object.object = object;
+			_object.z = _vector4.z;
+
+			_renderList.push( _object );
+
+			_objectCount ++;
+
+		}
+
+		_renderList.sort( painterSort );
+
+		return _renderList;
+
+	};
+
+	// TODO: Rename to projectElements? Test also using it with projectObjects to speed up sorting?
+
 	this.projectScene = function ( scene, camera ) {
 
 		var o, ol, v, vl, f, fl, n, nl, objects, object,
@@ -39,6 +80,9 @@ THREE.Projector = function() {
 		for ( o = 0, ol = objects.length; o < ol; o++ ) {
 
 			object = objects[ o ];
+
+			if ( object.visible === false ) continue;
+
 			object.autoUpdateMatrix && object.updateMatrix();
 
 			objectMatrix = object.matrix;
@@ -313,7 +357,7 @@ THREE.Projector = function() {
 
 		}
 
-		_renderList.sort( function ( a, b ) { return b.z - a.z; } );
+		_renderList.sort( painterSort );
 
 		return _renderList;
 
@@ -400,4 +444,10 @@ THREE.Projector = function() {
 
 	}
 
+	function painterSort( a, b ) {
+
+		return b.z - a.z;
+
+	}
+
 };

src/renderers/WebGLRenderer2.js

@@ -4,7 +4,10 @@
 
 THREE.WebGLRenderer2 = function () {
 
-	var _canvas = document.createElement( 'canvas' ),
+	var _renderList = null,
+	_projector = new THREE.Projector(),
+
+	_canvas = document.createElement( 'canvas' ),
 	_gl, _currentProgram,
 	_modelViewMatrix = new THREE.Matrix4(),
 	_viewMatrixArray = new Float32Array( 16 ),
@@ -70,18 +73,27 @@ THREE.WebGLRenderer2 = function () {
 		_viewMatrixArray.set( camera.matrix.flatten() );
 		_projectionMatrixArray.set( camera.projectionMatrix.flatten() );
 
+		/*
 		for ( o = 0, ol = scene.objects.length; o < ol; o++ ) {
 
 			object = scene.objects[ o ];
 
-			if ( object.visible ) {
+			renderObject( object );
 
-				renderObject( object );
+		}
+		*/
 
-			}
+		_renderList = _projector.projectObjects( scene, camera );
+
+		for ( o = 0, ol = _renderList.length; o < ol; o++ ) {
+
+			object = _renderList[ o ];
+
+			renderObject( object.object );
 
 		}
 
+
 		function renderObject( object ) {
 
 			var geometry, material, m, nl,
@@ -281,18 +293,6 @@ THREE.WebGLRenderer2 = function () {
 
 				} else if ( face instanceof THREE.Face4 ) {
 
-					group = Math.floor( vertexIndex / 65535 );
-
-					if ( !vertices ) {
-
-						vertices = [];
-						faces = [];
-						normals = [];
-						lines = [];
-						uvs = [];
-
-					}
-
 					v1 = geometry.vertices[ face.a ].position;
 					v2 = geometry.vertices[ face.b ].position;
 					v3 = geometry.vertices[ face.c ].position;

src/renderers/renderables/RenderableObject.js

+/**
+ * @author mr.doob / http://mrdoob.com/
+ */
+
+THREE.RenderableObject = function () {
+
+	this.object = null;
+	this.z = null;
+
+};