In WebGLRenderer transparent materials are now handled in the same pass as...

In WebGLRenderer transparent materials are now handled in the same pass as blended materials (resulting in better fake transparency ;)

The order of render passes is now following:

1. opaque materials with normal blending

2. opaque materials with additive blending
3. opaque materials with subtractive blending

4. transparent materials with additive blending
5. transparent materials with subtractive blending
6. transparent materials with normal blending

With growing number of passes it's possible it may be worth to do some pre-sorting, though it would have to be tested.

Current way is fairly cheap as if there are no corresponding materials in the pass, for loops just blast through (potentially many very cheap operations).

Pre-sorting would mean creating arrays on the fly in each frame (one expensive operation with effect on garbage collection, which especially Firefox is currently very bad at).

src/renderers/WebGLRenderer.js

@@ -596,7 +596,7 @@ THREE.WebGLRenderer = function ( scene ) {
 
 	};
 
-	this.renderPass = function ( object, materialFaceGroup, blending ) {
+	this.renderPass = function ( object, materialFaceGroup, blending, transparent ) {
 
 		var i, l, m, ml, material, meshMaterial;
 
@@ -609,7 +609,7 @@ THREE.WebGLRenderer = function ( scene ) {
 				for ( i = 0, l = materialFaceGroup.material.length; i < l; i++ ) {
 
 					material = materialFaceGroup.material[ i ];
-					if ( material && material.blending == blending ) {
+					if ( material && material.blending == blending && ( material.opacity < 1.0 == transparent ) ) {
 
 						this.setBlending( material.blending );
 						this.renderBuffer( material, materialFaceGroup );
@@ -621,7 +621,7 @@ THREE.WebGLRenderer = function ( scene ) {
 			} else {
 
 				material = meshMaterial;
-				if ( material && material.blending == blending ) {
+				if ( material && material.blending == blending && ( material.opacity < 1.0 == transparent ) ) {
 
 					this.setBlending( material.blending );
 					this.renderBuffer( material, materialFaceGroup );
@@ -657,7 +657,7 @@ THREE.WebGLRenderer = function ( scene ) {
 			webGLObject = scene.__webGLObjects[ o ];
 
 			this.setupMatrices( webGLObject.__object, camera );
-			this.renderPass( webGLObject.__object, webGLObject, THREE.NormalBlending );
+			this.renderPass( webGLObject.__object, webGLObject, THREE.NormalBlending, false );
 
 		}
 
@@ -668,8 +668,17 @@ THREE.WebGLRenderer = function ( scene ) {
 			webGLObject = scene.__webGLObjects[ o ];
 
 			this.setupMatrices( webGLObject.__object, camera );
-			this.renderPass( webGLObject.__object, webGLObject, THREE.AdditiveBlending );
-			this.renderPass( webGLObject.__object, webGLObject, THREE.SubtractiveBlending );
+
+			// opaque blended materials
+			this.renderPass( webGLObject.__object, webGLObject, THREE.AdditiveBlending, false );
+			this.renderPass( webGLObject.__object, webGLObject, THREE.SubtractiveBlending, false );
+			
+			// transparent blended materials
+			this.renderPass( webGLObject.__object, webGLObject, THREE.AdditiveBlending, true );
+			this.renderPass( webGLObject.__object, webGLObject, THREE.SubtractiveBlending, true );
+
+			// transparent normal materials
+			this.renderPass( webGLObject.__object, webGLObject, THREE.NormalBlending, true );
 
 		}