Made Projector's painterSort stable.

examples/canvas_interactive_lines.html

@@ -64,7 +64,7 @@
 						program: program }
 					)
 				);
-				sphereInter.scale.x = sphereInter.scale.y = 2;
+				sphereInter.scale.x = sphereInter.scale.y = 5;
 				sphereInter.visible = false;
 				scene.add( sphereInter );
 
@@ -99,14 +99,14 @@
 				parentTransform.scale.y = Math.random() + 0.5;
 				parentTransform.scale.z = Math.random() + 0.5;
 
-				for ( var i = 0; i < 100; i ++ ) {
+				for ( var i = 0; i < 50; i ++ ) {
 
 					var type = Math.random() > 0.5 ? THREE.LineStrip : THREE.LinePieces;
 					var object = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: Math.random() * 0xffffff } ), type );
 					
-					object.position.x = Math.random() * 800 - 400;
-					object.position.y = Math.random() * 800 - 400;
-					object.position.z = Math.random() * 800 - 400;
+					object.position.x = Math.random() * 400 - 200;
+					object.position.y = Math.random() * 400 - 200;
+					object.position.z = Math.random() * 400 - 200;
 
 					object.rotation.x = Math.random() * 2 * Math.PI;
 					object.rotation.y = Math.random() * 2 * Math.PI;

src/core/Projector.js

@@ -78,6 +78,7 @@ THREE.Projector = function () {
 	var getObject = function ( object ) {
 
 		_object = getNextObjectInPool();
+		_object.id = object.id;
 		_object.object = object;
 
 		if ( object.renderDepth !== null ) {
@@ -240,6 +241,7 @@ THREE.Projector = function () {
 
 								_face = getNextFace3InPool();
 
+								_face.id = object.id;
 								_face.v1.copy( v1 );
 								_face.v2.copy( v2 );
 								_face.v3.copy( v3 );
@@ -281,6 +283,7 @@ THREE.Projector = function () {
 
 								_face = getNextFace4InPool();
 
+								_face.id = object.id;
 								_face.v1.copy( v1 );
 								_face.v2.copy( v2 );
 								_face.v3.copy( v3 );
@@ -392,6 +395,8 @@ THREE.Projector = function () {
 						_clippedVertex2PositionScreen.multiplyScalar( 1 / _clippedVertex2PositionScreen.w );
 
 						_line = getNextLineInPool();
+
+						_line.id = object.id;
 						_line.v1.positionScreen.copy( _clippedVertex1PositionScreen );
 						_line.v2.positionScreen.copy( _clippedVertex2PositionScreen );
 
@@ -432,10 +437,11 @@ THREE.Projector = function () {
 				if ( _vector4.z > 0 && _vector4.z < 1 ) {
 
 					_particle = getNextParticleInPool();
-					_particle.object = object;
+					_particle.id = object.id;
 					_particle.x = _vector4.x / _vector4.w;
 					_particle.y = _vector4.y / _vector4.w;
 					_particle.z = _vector4.z;
+					_particle.object = object;
 
 					_particle.rotation = object.rotation.z;
 
@@ -561,7 +567,19 @@ THREE.Projector = function () {
 
 	function painterSort( a, b ) {
 
-		return b.z - a.z;
+		if ( a.z !== b.z ) {
+
+			return b.z - a.z;
+
+		} else if ( a.id !== b.id ) {
+
+			return a.id - b.id;
+
+		} else {
+
+			return 0;
+
+		}
 
 	}
 

src/renderers/renderables/RenderableFace3.js

@@ -4,6 +4,8 @@
 
 THREE.RenderableFace3 = function () {
 
+	this.id = 0;
+
 	this.v1 = new THREE.RenderableVertex();
 	this.v2 = new THREE.RenderableVertex();
 	this.v3 = new THREE.RenderableVertex();
@@ -21,6 +23,6 @@ THREE.RenderableFace3 = function () {
 	this.material = null;
 	this.uvs = [[]];
 
-	this.z = null;
+	this.z = 0;
 
 };

src/renderers/renderables/RenderableFace4.js

@@ -4,6 +4,8 @@
 
 THREE.RenderableFace4 = function () {
 
+	this.id = 0;
+
 	this.v1 = new THREE.RenderableVertex();
 	this.v2 = new THREE.RenderableVertex();
 	this.v3 = new THREE.RenderableVertex();
@@ -22,6 +24,6 @@ THREE.RenderableFace4 = function () {
 	this.material = null;
 	this.uvs = [[]];
 
-	this.z = null;
+	this.z = 0;
 
 };

src/renderers/renderables/RenderableLine.js

@@ -4,7 +4,7 @@
 
 THREE.RenderableLine = function () {
 
-	this.z = null;
+	this.id = 0;
 
 	this.v1 = new THREE.RenderableVertex();
 	this.v2 = new THREE.RenderableVertex();
@@ -12,4 +12,6 @@ THREE.RenderableLine = function () {
 	this.vertexColors = [ new THREE.Color(), new THREE.Color() ];
 	this.material = null;
 
+	this.z = 0;
+
 };

src/renderers/renderables/RenderableObject.js

@@ -4,7 +4,9 @@
 
 THREE.RenderableObject = function () {
 
+	this.id = 0;
+
 	this.object = null;
-	this.z = null;
+	this.z = 0;
 
 };

src/renderers/renderables/RenderableParticle.js

@@ -4,11 +4,13 @@
 
 THREE.RenderableParticle = function () {
 
+	this.id = 0;
+
 	this.object = null;
 
-	this.x = null;
-	this.y = null;
-	this.z = null;
+	this.x = 0;
+	this.y = 0;
+	this.z = 0;
 
 	this.rotation = null;
 	this.scale = new THREE.Vector2();