Changed Sprites to use stable sorting.

Fixes #2581

build/three.js

@@ -19532,12 +19532,6 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	};
 
-	function painterSort ( a, b ) {
-
-		return b.z - a.z;
-
-	};
-
 	function numericalSort ( a, b ) {
 
 		return b[ 1 ] - a[ 1 ];
@@ -34449,7 +34443,7 @@ THREE.SpritePlugin = function ( ) {
 			if ( ! sprite.useScreenCoordinates ) {
 
 				sprite._modelViewMatrix.multiply( camera.matrixWorldInverse, sprite.matrixWorld );
-				sprite.z = - sprite._modelViewMatrix.elements[14];
+				sprite.z = - sprite._modelViewMatrix.elements[ 14 ];
 
 			} else {
 
@@ -34459,7 +34453,7 @@ THREE.SpritePlugin = function ( ) {
 
 		}
 
-		sprites.sort( painterSort );
+		sprites.sort( painterSortStable );
 
 		// render all sprites
 
@@ -34572,9 +34566,17 @@ THREE.SpritePlugin = function ( ) {
 
 	};
 
-	function painterSort ( a, b ) {
+	function painterSortStable ( a, b ) {
 
-		return b.z - a.z;
+		if ( a.z !== b.z ) {
+
+			return b.z - a.z;
+
+		} else {
+
+			return b.id - a.id;
+
+		}
 
 	};
 

build/three.min.js

@@ -733,14 +733,15 @@ j.z)j.z=u.z}q.left=i.x;q.right=j.x;q.top=j.y;q.bottom=i.y;q.updateProjectionMatr
 if(!r._viewMatrixArray)r._viewMatrixArray=new Float32Array(16);if(!r._projectionMatrixArray)r._projectionMatrixArray=new Float32Array(16);r.matrixWorldInverse.flattenToArray(r._viewMatrixArray);r.projectionMatrix.flattenToArray(r._projectionMatrixArray);h.multiply(r.projectionMatrix,r.matrixWorldInverse);g.setFromMatrix(h);b.setRenderTarget(q);b.clear();t=m.__webglObjects;o=0;for(q=t.length;o<q;o++){z=t[o];s=z.object;z.render=false;if(s.visible&&s.castShadow&&(!(s instanceof THREE.Mesh)||!s.frustumCulled||
 g.contains(s))){s._modelViewMatrix.multiply(r.matrixWorldInverse,s.matrixWorld);z.render=true}}o=0;for(q=t.length;o<q;o++){z=t[o];if(z.render){s=z.object;z=z.buffer;w=s.material instanceof THREE.MeshFaceMaterial?s.geometry.materials[0]:s.material;u=s.geometry.morphTargets.length>0&&w.morphTargets;w=s instanceof THREE.SkinnedMesh&&w.skinning;u=s.customDepthMaterial?s.customDepthMaterial:w?u?f:e:u?d:c;z instanceof THREE.BufferGeometry?b.renderBufferDirect(r,m.__lights,null,u,z,s):b.renderBuffer(r,m.__lights,
 null,u,z,s)}}t=m.__webglObjectsImmediate;o=0;for(q=t.length;o<q;o++){z=t[o];s=z.object;if(s.visible&&s.castShadow){s._modelViewMatrix.multiply(r.matrixWorldInverse,s.matrixWorld);b.renderImmediateObject(r,m.__lights,null,c,s)}}}l=b.getClearColor();p=b.getClearAlpha();a.clearColor(l.r,l.g,l.b,p);a.enable(a.BLEND);b.shadowMapCullFrontFaces&&a.cullFace(a.BACK)}};THREE.ShadowMapPlugin.__projector=new THREE.Projector;
-THREE.SpritePlugin=function(){function a(a,b){return b.z-a.z}var b,c,d,e,f,g,h,i,j,m;this.init=function(a){b=a.context;c=a;d=new Float32Array(16);e=new Uint16Array(6);a=0;d[a++]=-1;d[a++]=-1;d[a++]=0;d[a++]=0;d[a++]=1;d[a++]=-1;d[a++]=1;d[a++]=0;d[a++]=1;d[a++]=1;d[a++]=1;d[a++]=1;d[a++]=-1;d[a++]=1;d[a++]=0;d[a++]=1;a=0;e[a++]=0;e[a++]=1;e[a++]=2;e[a++]=0;e[a++]=2;e[a++]=3;f=b.createBuffer();g=b.createBuffer();b.bindBuffer(b.ARRAY_BUFFER,f);b.bufferData(b.ARRAY_BUFFER,d,b.STATIC_DRAW);b.bindBuffer(b.ELEMENT_ARRAY_BUFFER,
-g);b.bufferData(b.ELEMENT_ARRAY_BUFFER,e,b.STATIC_DRAW);var a=THREE.ShaderSprite.sprite,l=b.createProgram(),p=b.createShader(b.FRAGMENT_SHADER),o=b.createShader(b.VERTEX_SHADER);b.shaderSource(p,a.fragmentShader);b.shaderSource(o,a.vertexShader);b.compileShader(p);b.compileShader(o);b.attachShader(l,p);b.attachShader(l,o);b.linkProgram(l);h=l;i={};j={};i.position=b.getAttribLocation(h,"position");i.uv=b.getAttribLocation(h,"uv");j.uvOffset=b.getUniformLocation(h,"uvOffset");j.uvScale=b.getUniformLocation(h,
-"uvScale");j.rotation=b.getUniformLocation(h,"rotation");j.scale=b.getUniformLocation(h,"scale");j.alignment=b.getUniformLocation(h,"alignment");j.color=b.getUniformLocation(h,"color");j.map=b.getUniformLocation(h,"map");j.opacity=b.getUniformLocation(h,"opacity");j.useScreenCoordinates=b.getUniformLocation(h,"useScreenCoordinates");j.affectedByDistance=b.getUniformLocation(h,"affectedByDistance");j.screenPosition=b.getUniformLocation(h,"screenPosition");j.modelViewMatrix=b.getUniformLocation(h,"modelViewMatrix");
-j.projectionMatrix=b.getUniformLocation(h,"projectionMatrix");j.fogType=b.getUniformLocation(h,"fogType");j.fogDensity=b.getUniformLocation(h,"fogDensity");j.fogNear=b.getUniformLocation(h,"fogNear");j.fogFar=b.getUniformLocation(h,"fogFar");j.fogColor=b.getUniformLocation(h,"fogColor");m=false};this.render=function(d,e,p,o){var q=d.__webglSprites,r=q.length;if(r){var s=i,z=j,u=o/p,p=p*0.5,t=o*0.5,F=true;b.useProgram(h);if(!m){b.enableVertexAttribArray(s.position);b.enableVertexAttribArray(s.uv);
-m=true}b.disable(b.CULL_FACE);b.enable(b.BLEND);b.depthMask(true);b.bindBuffer(b.ARRAY_BUFFER,f);b.vertexAttribPointer(s.position,2,b.FLOAT,false,16,0);b.vertexAttribPointer(s.uv,2,b.FLOAT,false,16,8);b.bindBuffer(b.ELEMENT_ARRAY_BUFFER,g);b.uniformMatrix4fv(z.projectionMatrix,false,e._projectionMatrixArray);b.activeTexture(b.TEXTURE0);b.uniform1i(z.map,0);var A=s=0,w=d.fog;if(w){b.uniform3f(z.fogColor,w.color.r,w.color.g,w.color.b);if(w instanceof THREE.Fog){b.uniform1f(z.fogNear,w.near);b.uniform1f(z.fogFar,
-w.far);b.uniform1i(z.fogType,1);A=s=1}else if(w instanceof THREE.FogExp2){b.uniform1f(z.fogDensity,w.density);b.uniform1i(z.fogType,2);A=s=2}}else{b.uniform1i(z.fogType,0);A=s=0}for(var v,C=[],w=0;w<r;w++){v=q[w];if(v.visible&&v.opacity!==0)if(v.useScreenCoordinates)v.z=-v.position.z;else{v._modelViewMatrix.multiply(e.matrixWorldInverse,v.matrixWorld);v.z=-v._modelViewMatrix.elements[14]}}q.sort(a);for(w=0;w<r;w++){v=q[w];if(v.visible&&v.opacity!==0&&v.map&&v.map.image&&v.map.image.width){if(v.useScreenCoordinates){b.uniform1i(z.useScreenCoordinates,
-1);b.uniform3f(z.screenPosition,(v.position.x-p)/p,(t-v.position.y)/t,Math.max(0,Math.min(1,v.position.z)))}else{b.uniform1i(z.useScreenCoordinates,0);b.uniform1i(z.affectedByDistance,v.affectedByDistance?1:0);b.uniformMatrix4fv(z.modelViewMatrix,false,v._modelViewMatrix.elements)}e=d.fog&&v.fog?A:0;if(s!==e){b.uniform1i(z.fogType,e);s=e}e=1/(v.scaleByViewport?o:1);C[0]=e*u*v.scale.x;C[1]=e*v.scale.y;b.uniform2f(z.uvScale,v.uvScale.x,v.uvScale.y);b.uniform2f(z.uvOffset,v.uvOffset.x,v.uvOffset.y);
-b.uniform2f(z.alignment,v.alignment.x,v.alignment.y);b.uniform1f(z.opacity,v.opacity);b.uniform3f(z.color,v.color.r,v.color.g,v.color.b);b.uniform1f(z.rotation,v.rotation);b.uniform2fv(z.scale,C);if(v.mergeWith3D&&!F){b.enable(b.DEPTH_TEST);F=true}else if(!v.mergeWith3D&&F){b.disable(b.DEPTH_TEST);F=false}c.setBlending(v.blending,v.blendEquation,v.blendSrc,v.blendDst);c.setTexture(v.map,0);b.drawElements(b.TRIANGLES,6,b.UNSIGNED_SHORT,0)}}b.enable(b.CULL_FACE);b.enable(b.DEPTH_TEST);b.depthMask(true)}}};
+THREE.SpritePlugin=function(){function a(a,b){return a.z!==b.z?b.z-a.z:b.id-a.id}var b,c,d,e,f,g,h,i,j,m;this.init=function(a){b=a.context;c=a;d=new Float32Array(16);e=new Uint16Array(6);a=0;d[a++]=-1;d[a++]=-1;d[a++]=0;d[a++]=0;d[a++]=1;d[a++]=-1;d[a++]=1;d[a++]=0;d[a++]=1;d[a++]=1;d[a++]=1;d[a++]=1;d[a++]=-1;d[a++]=1;d[a++]=0;d[a++]=1;a=0;e[a++]=0;e[a++]=1;e[a++]=2;e[a++]=0;e[a++]=2;e[a++]=3;f=b.createBuffer();g=b.createBuffer();b.bindBuffer(b.ARRAY_BUFFER,f);b.bufferData(b.ARRAY_BUFFER,d,b.STATIC_DRAW);
+b.bindBuffer(b.ELEMENT_ARRAY_BUFFER,g);b.bufferData(b.ELEMENT_ARRAY_BUFFER,e,b.STATIC_DRAW);var a=THREE.ShaderSprite.sprite,l=b.createProgram(),p=b.createShader(b.FRAGMENT_SHADER),o=b.createShader(b.VERTEX_SHADER);b.shaderSource(p,a.fragmentShader);b.shaderSource(o,a.vertexShader);b.compileShader(p);b.compileShader(o);b.attachShader(l,p);b.attachShader(l,o);b.linkProgram(l);h=l;i={};j={};i.position=b.getAttribLocation(h,"position");i.uv=b.getAttribLocation(h,"uv");j.uvOffset=b.getUniformLocation(h,
+"uvOffset");j.uvScale=b.getUniformLocation(h,"uvScale");j.rotation=b.getUniformLocation(h,"rotation");j.scale=b.getUniformLocation(h,"scale");j.alignment=b.getUniformLocation(h,"alignment");j.color=b.getUniformLocation(h,"color");j.map=b.getUniformLocation(h,"map");j.opacity=b.getUniformLocation(h,"opacity");j.useScreenCoordinates=b.getUniformLocation(h,"useScreenCoordinates");j.affectedByDistance=b.getUniformLocation(h,"affectedByDistance");j.screenPosition=b.getUniformLocation(h,"screenPosition");
+j.modelViewMatrix=b.getUniformLocation(h,"modelViewMatrix");j.projectionMatrix=b.getUniformLocation(h,"projectionMatrix");j.fogType=b.getUniformLocation(h,"fogType");j.fogDensity=b.getUniformLocation(h,"fogDensity");j.fogNear=b.getUniformLocation(h,"fogNear");j.fogFar=b.getUniformLocation(h,"fogFar");j.fogColor=b.getUniformLocation(h,"fogColor");m=false};this.render=function(d,e,p,o){var q=d.__webglSprites,r=q.length;if(r){var s=i,z=j,u=o/p,p=p*0.5,t=o*0.5,F=true;b.useProgram(h);if(!m){b.enableVertexAttribArray(s.position);
+b.enableVertexAttribArray(s.uv);m=true}b.disable(b.CULL_FACE);b.enable(b.BLEND);b.depthMask(true);b.bindBuffer(b.ARRAY_BUFFER,f);b.vertexAttribPointer(s.position,2,b.FLOAT,false,16,0);b.vertexAttribPointer(s.uv,2,b.FLOAT,false,16,8);b.bindBuffer(b.ELEMENT_ARRAY_BUFFER,g);b.uniformMatrix4fv(z.projectionMatrix,false,e._projectionMatrixArray);b.activeTexture(b.TEXTURE0);b.uniform1i(z.map,0);var A=s=0,w=d.fog;if(w){b.uniform3f(z.fogColor,w.color.r,w.color.g,w.color.b);if(w instanceof THREE.Fog){b.uniform1f(z.fogNear,
+w.near);b.uniform1f(z.fogFar,w.far);b.uniform1i(z.fogType,1);A=s=1}else if(w instanceof THREE.FogExp2){b.uniform1f(z.fogDensity,w.density);b.uniform1i(z.fogType,2);A=s=2}}else{b.uniform1i(z.fogType,0);A=s=0}for(var v,C=[],w=0;w<r;w++){v=q[w];if(v.visible&&v.opacity!==0)if(v.useScreenCoordinates)v.z=-v.position.z;else{v._modelViewMatrix.multiply(e.matrixWorldInverse,v.matrixWorld);v.z=-v._modelViewMatrix.elements[14]}}q.sort(a);for(w=0;w<r;w++){v=q[w];if(v.visible&&v.opacity!==0&&v.map&&v.map.image&&
+v.map.image.width){if(v.useScreenCoordinates){b.uniform1i(z.useScreenCoordinates,1);b.uniform3f(z.screenPosition,(v.position.x-p)/p,(t-v.position.y)/t,Math.max(0,Math.min(1,v.position.z)))}else{b.uniform1i(z.useScreenCoordinates,0);b.uniform1i(z.affectedByDistance,v.affectedByDistance?1:0);b.uniformMatrix4fv(z.modelViewMatrix,false,v._modelViewMatrix.elements)}e=d.fog&&v.fog?A:0;if(s!==e){b.uniform1i(z.fogType,e);s=e}e=1/(v.scaleByViewport?o:1);C[0]=e*u*v.scale.x;C[1]=e*v.scale.y;b.uniform2f(z.uvScale,
+v.uvScale.x,v.uvScale.y);b.uniform2f(z.uvOffset,v.uvOffset.x,v.uvOffset.y);b.uniform2f(z.alignment,v.alignment.x,v.alignment.y);b.uniform1f(z.opacity,v.opacity);b.uniform3f(z.color,v.color.r,v.color.g,v.color.b);b.uniform1f(z.rotation,v.rotation);b.uniform2fv(z.scale,C);if(v.mergeWith3D&&!F){b.enable(b.DEPTH_TEST);F=true}else if(!v.mergeWith3D&&F){b.disable(b.DEPTH_TEST);F=false}c.setBlending(v.blending,v.blendEquation,v.blendSrc,v.blendDst);c.setTexture(v.map,0);b.drawElements(b.TRIANGLES,6,b.UNSIGNED_SHORT,
+0)}}b.enable(b.CULL_FACE);b.enable(b.DEPTH_TEST);b.depthMask(true)}}};
 THREE.DepthPassPlugin=function(){this.enabled=false;this.renderTarget=null;var a,b,c,d,e=new THREE.Frustum,f=new THREE.Matrix4;this.init=function(e){a=e.context;b=e;var e=THREE.ShaderLib.depthRGBA,f=THREE.UniformsUtils.clone(e.uniforms);c=new THREE.ShaderMaterial({fragmentShader:e.fragmentShader,vertexShader:e.vertexShader,uniforms:f});d=new THREE.ShaderMaterial({fragmentShader:e.fragmentShader,vertexShader:e.vertexShader,uniforms:f,morphTargets:true});c._shadowPass=true;d._shadowPass=true};this.render=
 function(a,b){this.enabled&&this.update(a,b)};this.update=function(g,h){var i,j,m,n,l,p;a.clearColor(1,1,1,1);a.disable(a.BLEND);b.setDepthTest(true);b.autoUpdateScene&&g.updateMatrixWorld();if(!h._viewMatrixArray)h._viewMatrixArray=new Float32Array(16);if(!h._projectionMatrixArray)h._projectionMatrixArray=new Float32Array(16);h.matrixWorldInverse.getInverse(h.matrixWorld);h.matrixWorldInverse.flattenToArray(h._viewMatrixArray);h.projectionMatrix.flattenToArray(h._projectionMatrixArray);f.multiply(h.projectionMatrix,
 h.matrixWorldInverse);e.setFromMatrix(f);b.setRenderTarget(this.renderTarget);b.clear();p=g.__webglObjects;i=0;for(j=p.length;i<j;i++){m=p[i];l=m.object;m.render=false;if(l.visible&&(!(l instanceof THREE.Mesh)||!l.frustumCulled||e.contains(l))){l._modelViewMatrix.multiply(h.matrixWorldInverse,l.matrixWorld);m.render=true}}i=0;for(j=p.length;i<j;i++){m=p[i];if(m.render){l=m.object;m=m.buffer;l.material&&b.setMaterialFaces(l.material);n=l.customDepthMaterial?l.customDepthMaterial:l.geometry.morphTargets.length?

src/extras/renderers/plugins/SpritePlugin.js

@@ -172,7 +172,7 @@ THREE.SpritePlugin = function ( ) {
 			if ( ! sprite.useScreenCoordinates ) {
 
 				sprite._modelViewMatrix.multiply( camera.matrixWorldInverse, sprite.matrixWorld );
-				sprite.z = - sprite._modelViewMatrix.elements[14];
+				sprite.z = - sprite._modelViewMatrix.elements[ 14 ];
 
 			} else {
 
@@ -182,7 +182,7 @@ THREE.SpritePlugin = function ( ) {
 
 		}
 
-		sprites.sort( painterSort );
+		sprites.sort( painterSortStable );
 
 		// render all sprites
 
@@ -295,9 +295,17 @@ THREE.SpritePlugin = function ( ) {
 
 	};
 
-	function painterSort ( a, b ) {
+	function painterSortStable ( a, b ) {
 
-		return b.z - a.z;
+		if ( a.z !== b.z ) {
+
+			return b.z - a.z;
+
+		} else {
+
+			return b.id - a.id;
+
+		}
 
 	};
 

src/renderers/WebGLRenderer.js

@@ -3734,12 +3734,6 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	};
 
-	function painterSort ( a, b ) {
-
-		return b.z - a.z;
-
-	};
-
 	function numericalSort ( a, b ) {
 
 		return b[ 1 ] - a[ 1 ];