WebGLRenderer: Added SortingGroup

src/Three.js

@@ -22,6 +22,7 @@ export { LineLoop } from './objects/LineLoop.js';
 export { Line } from './objects/Line.js';
 export { Points } from './objects/Points.js';
 export { Group } from './objects/Group.js';
+export { SortingGroup } from './objects/SortingGroup.js';
 export { VideoTexture } from './textures/VideoTexture.js';
 export { DataTexture } from './textures/DataTexture.js';
 export { CompressedTexture } from './textures/CompressedTexture.js';

src/objects/SortingGroup.js

@@ -0,0 +1,24 @@
+import { Group } from './Group.js';
+
+/**
+ * @author Mugen87 / https://github.com/Mugen87
+ */
+
+function SortingGroup() {
+
+	Group.call( this );
+
+	this.type = 'SortingGroup';
+
+}
+
+SortingGroup.prototype = Object.assign( Object.create( Group.prototype ), {
+
+	constructor: SortingGroup,
+
+	isSortingGroup: true
+
+} );
+
+
+export { SortingGroup };

src/renderers/WebGLRenderer.js

@@ -36,6 +36,7 @@ import { WebGLProperties } from './webgl/WebGLProperties.js';
 import { WebGLRenderLists } from './webgl/WebGLRenderLists.js';
 import { WebGLRenderStates } from './webgl/WebGLRenderStates.js';
 import { WebGLShadowMap } from './webgl/WebGLShadowMap.js';
+import { WebGLSortingGroups } from './webgl/WebGLSortingGroups.js';
 import { WebGLState } from './webgl/WebGLState.js';
 import { WebGLTextures } from './webgl/WebGLTextures.js';
 import { WebGLUniforms } from './webgl/WebGLUniforms.js';
@@ -86,6 +87,7 @@ function WebGLRenderer( parameters ) {
 	// scene graph
 
 	this.sortObjects = true;
+	this.sortingGroupsEnabled = false;
 
 	// user-defined clipping
 
@@ -229,7 +231,7 @@ function WebGLRenderer( parameters ) {
 
 	var extensions, capabilities, state, info;
 	var properties, textures, attributes, geometries, objects;
-	var programCache, renderLists, renderStates;
+	var programCache, renderLists, renderStates, sortingGroups;
 
 	var background, morphtargets, bufferRenderer, indexedBufferRenderer;
 
@@ -265,6 +267,7 @@ function WebGLRenderer( parameters ) {
 		programCache = new WebGLPrograms( _this, extensions, capabilities );
 		renderLists = new WebGLRenderLists();
 		renderStates = new WebGLRenderStates();
+		sortingGroups = new WebGLSortingGroups();
 
 		background = new WebGLBackground( _this, state, objects, _premultipliedAlpha );
 
@@ -499,6 +502,7 @@ function WebGLRenderer( parameters ) {
 		renderStates.dispose();
 		properties.dispose();
 		objects.dispose();
+		sortingGroups.dispose();
 
 		vr.dispose();
 
@@ -1056,6 +1060,14 @@ function WebGLRenderer( parameters ) {
 		currentRenderList = renderLists.get( scene, camera );
 		currentRenderList.init();
 
+		if ( _this.sortingGroupsEnabled === true ) {
+
+			sortingGroups.init();
+			sortingGroups.update( scene );
+			sortingGroups.finish();
+
+		}
+
 		projectObject( scene, camera, _this.sortObjects );
 
 		if ( _this.sortObjects === true ) {

src/renderers/webgl/WebGLRenderLists.js

@@ -4,7 +4,11 @@
 
 function painterSortStable( a, b ) {
 
-	if ( a.renderOrder !== b.renderOrder ) {
+	if ( a.groupOrder !== b.groupOrder ) {
+
+		return a.groupOrder - b.groupOrder;
+
+	} else	if ( a.renderOrder !== b.renderOrder ) {
 
 		return a.renderOrder - b.renderOrder;
 
@@ -30,7 +34,11 @@ function painterSortStable( a, b ) {
 
 function reversePainterSortStable( a, b ) {
 
-	if ( a.renderOrder !== b.renderOrder ) {
+	if ( a.groupOrder !== b.groupOrder ) {
+
+		return a.groupOrder - b.groupOrder;
+
+	} else	if ( a.renderOrder !== b.renderOrder ) {
 
 		return a.renderOrder - b.renderOrder;
 
@@ -49,7 +57,11 @@ function reversePainterSortStable( a, b ) {
 
 function painterSortStableSprites( a, b ) {
 
-	if ( a.renderOrder !== b.renderOrder ) {
+	if ( a.groupOrder !== b.groupOrder ) {
+
+		return a.groupOrder - b.groupOrder;
+
+	} else	if ( a.renderOrder !== b.renderOrder ) {
 
 	 return a.renderOrder - b.renderOrder;
 
@@ -97,6 +109,7 @@ function WebGLRenderList() {
 				material: material,
 				program: material.program,
 				renderOrder: object.renderOrder,
+				groupOrder: object.__groupOrder,
 				z: z,
 				group: group
 			};
@@ -111,6 +124,7 @@ function WebGLRenderList() {
 			renderItem.material = material;
 			renderItem.program = material.program;
 			renderItem.renderOrder = object.renderOrder;
+			renderItem.groupOrder = object.__groupOrder;
 			renderItem.z = z;
 			renderItem.group = group;
 

src/renderers/webgl/WebGLSortingGroups.js

@@ -0,0 +1,119 @@
+/**
+ * @author Mugen87 / https://github.com/Mugen87
+ */
+
+function WebGLSortingGroups() {
+
+	var currentGroupOrder;
+	var arrays = {};
+
+	function init() {
+
+		currentGroupOrder = 0;
+
+	}
+
+	function update( object, level ) {
+
+		if ( object.children.length === 0 ) return;
+
+		level = level || 0;
+
+		if ( arrays[ level ] === undefined ) arrays[ level ] = [];
+
+		var children = arrays[ level ];
+		children.length = 0;
+
+		Array.prototype.push.apply( children, object.children );
+
+		//
+
+		children.sort( groupSortStable );
+
+		//
+
+		for ( var i = 0, l = children.length; i < l; i ++ ) {
+
+			var child = children[ i ];
+
+			if ( child.isMesh || child.isLine || child.isPoints || child.isImmediateRenderObject || child.isSprite ) {
+
+				if ( inSortingGroup( child ) === true ) {
+
+					child.__groupOrder = currentGroupOrder;
+
+				} else {
+
+					child.__groupOrder = ++ currentGroupOrder;
+
+				}
+
+			} else if ( child.isSortingGroup ) {
+
+				currentGroupOrder = ++ currentGroupOrder;
+
+			}
+
+			update( child, level + 1 );
+
+		}
+
+	}
+
+	function inSortingGroup( object ) {
+
+		var parent = object.parent;
+
+		if ( parent === null ) {
+
+			return false;
+
+		} else {
+
+			if ( parent.isSortingGroup ) return true;
+
+			return inSortingGroup( parent );
+
+		}
+
+	}
+
+	function finish() {
+
+		for ( var key in arrays ) {
+
+			arrays[ key ].length = 0;
+
+		}
+
+	}
+
+	function dispose() {
+
+		arrays = {};
+
+	}
+
+	return {
+
+		dispose: dispose,
+		finish: finish,
+		init: init,
+		update: update
+
+	};
+
+}
+
+function groupSortStable( a, b ) {
+
+	if ( a.renderOrder !== b.renderOrder ) {
+
+	 return a.renderOrder - b.renderOrder;
+
+	}
+
+}
+
+
+export { WebGLSortingGroups };