WebGLRenderer: Added SortingGroup #14433

Mugen87 · 2018-07-08T15:04:50Z

The PR introduces a new class SortingGroup which can be used to group objects within the render list. So it's somewhat similar to Unity's SortingGroup API.

WestLangley · 2018-07-08T18:06:31Z

So, within a sorting group, object.renderOrder only applies relative to the objects within the sorting group. Is that your intention?

If so, I expect SortingGroup will have to have its renderOrder property honored so the sorting groups can be sorted.

WestLangley · 2018-07-08T18:13:45Z

And a sorting group should not contain both opaque and transparent renderable objects. I think that is OK, though.

WestLangley · 2018-07-08T18:20:00Z

@mrdoob I wonder if SVGLoader could make use of this feature to ensure the shapes are rendered in the proper order -- especially if there are multiple SVG objects, or other objects in the scene.

Mugen87 · 2018-07-08T20:41:47Z

So, within a sorting group, object.renderOrder only applies relative to the objects within the sorting group. Is that your intention?

Yes. And if SortingGroup groups are not used at all, renderOrder has still the highest priority.

If so, I expect SortingGroup will have to have its renderOrder property honored so the sorting groups can be sorted.

Um, I'm not sure how to solve this. Objects of type SortingGroup are not added to the render list so it's not possible to sort them right now. I guess we need some additional logic for this use case...

WestLangley · 2018-07-08T20:49:42Z

Yes. You have to be able to sort the sorting groups themselves.

Mugen87 · 2018-07-09T14:24:42Z

Sorting groups via renderOrder should be possible now. You can see the effect if you change the properties in this fiddle: ~~https://jsfiddle.net/f2Lommf5/8890/~~

BTW: It's now necessary to set new property of WebGLRenderer (sortingGroupsEnabled) to true so SortingGroups can be used. The sorting of groups needs an additional traversal through the scene graph. The flag was introduced in order to avoid this overhead if you don't need SortingGroups in your app.

navigator117 · 2018-07-10T09:02:00Z

Mesh without SortingGroup parent should be able to compare renderOrder with SortingGroup, as unity does this.

Mugen87 · 2018-07-10T11:22:44Z

This should work now, too. The code is also slightly refactored so changes to projectObject() are not necessary anymore.

Mugen87 · 2018-07-10T11:39:52Z

Nevertheless the holistic implementation of this approach feels hacky. Besides, the current way WebGLSortingGroups and WebGLRenderList are working together is no good. I'm closing the PR for now and try to think of a different approach.

mrdoob · 2018-12-28T18:25:10Z

What about this implementation:

diff --git a/src/renderers/WebGLRenderer.js b/src/renderers/WebGLRenderer.js
index 4f61704e7..f684902b8 100644
--- a/src/renderers/WebGLRenderer.js
+++ b/src/renderers/WebGLRenderer.js
@@ -1073,7 +1073,7 @@ function WebGLRenderer( parameters ) {
 		currentRenderList = renderLists.get( scene, camera );
 		currentRenderList.init();
 
-		projectObject( scene, camera, _this.sortObjects );
+		projectObject( scene, camera, 0, _this.sortObjects );
 
 		if ( _this.sortObjects === true ) {
 
@@ -1164,7 +1164,7 @@ function WebGLRenderer( parameters ) {
 
 	};
 
-	function projectObject( object, camera, sortObjects ) {
+	function projectObject( object, camera, groupOrder, sortObjects ) {
 
 		if ( object.visible === false ) return;
 
@@ -1172,7 +1172,11 @@ function WebGLRenderer( parameters ) {
 
 		if ( visible ) {
 
-			if ( object.isLight ) {
+			if ( object.isSortingGroup ) {
+
+				groupOrder = object.renderOrder;
+
+			} else if ( object.isLight ) {
 
 				currentRenderState.pushLight( object );
 
@@ -1196,7 +1200,7 @@ function WebGLRenderer( parameters ) {
 					var geometry = objects.update( object );
 					var material = object.material;
 
-					currentRenderList.push( object, geometry, material, _vector3.z, null );
+					currentRenderList.push( object, geometry, material, groupOrder, _vector3.z, null );
 
 				}
 
@@ -1209,7 +1213,7 @@ function WebGLRenderer( parameters ) {
 
 				}
 
-				currentRenderList.push( object, null, object.material, _vector3.z, null );
+				currentRenderList.push( object, null, object.material, groupOrder, _vector3.z, null );
 
 			} else if ( object.isMesh || object.isLine || object.isPoints ) {
 
@@ -1242,7 +1246,7 @@ function WebGLRenderer( parameters ) {
 
 							if ( groupMaterial && groupMaterial.visible ) {
 
-								currentRenderList.push( object, geometry, groupMaterial, _vector3.z, group );
+								currentRenderList.push( object, geometry, groupMaterial, groupOrder, _vector3.z, group );
 
 							}
 
@@ -1250,7 +1254,7 @@ function WebGLRenderer( parameters ) {
 
 					} else if ( material.visible ) {
 
-						currentRenderList.push( object, geometry, material, _vector3.z, null );
+						currentRenderList.push( object, geometry, material, groupOrder, _vector3.z, null );
 
 					}
 
@@ -1264,7 +1268,7 @@ function WebGLRenderer( parameters ) {
 
 		for ( var i = 0, l = children.length; i < l; i ++ ) {
 
-			projectObject( children[ i ], camera, sortObjects );
+			projectObject( children[ i ], camera, groupOrder, sortObjects );
 
 		}
 
diff --git a/src/renderers/webgl/WebGLRenderLists.js b/src/renderers/webgl/WebGLRenderLists.js
index 234de8d5f..0150d2518 100644
--- a/src/renderers/webgl/WebGLRenderLists.js
+++ b/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;
 
@@ -64,7 +72,7 @@ function WebGLRenderList() {
 
 	}
 
-	function getNextRenderItem( object, geometry, material, z, group ) {
+	function getNextRenderItem( object, geometry, material, groupOrder, z, group ) {
 
 		var renderItem = renderItems[ renderItemsIndex ];
 
@@ -76,6 +84,7 @@ function WebGLRenderList() {
 				geometry: geometry,
 				material: material,
 				program: material.program,
+				groupOrder: groupOrder,
 				renderOrder: object.renderOrder,
 				z: z,
 				group: group
@@ -90,6 +99,7 @@ function WebGLRenderList() {
 			renderItem.geometry = geometry;
 			renderItem.material = material;
 			renderItem.program = material.program;
+			renderItem.groupOrder = object.groupOrder;
 			renderItem.renderOrder = object.renderOrder;
 			renderItem.z = z;
 			renderItem.group = group;

mrdoob · 2018-12-28T18:27:14Z

Actually, we could just do this with the current Group directly.
I can't imagine anyone's current code breaking as setting group.renderOrder had no use previously.

diff --git a/src/renderers/WebGLRenderer.js b/src/renderers/WebGLRenderer.js
index 4f61704e7..f684902b8 100644
--- a/src/renderers/WebGLRenderer.js
+++ b/src/renderers/WebGLRenderer.js
@@ -1073,7 +1073,7 @@ function WebGLRenderer( parameters ) {
 		currentRenderList = renderLists.get( scene, camera );
 		currentRenderList.init();
 
-		projectObject( scene, camera, _this.sortObjects );
+		projectObject( scene, camera, 0, _this.sortObjects );
 
 		if ( _this.sortObjects === true ) {
 
@@ -1164,7 +1164,7 @@ function WebGLRenderer( parameters ) {
 
 	};
 
-	function projectObject( object, camera, sortObjects ) {
+	function projectObject( object, camera, groupOrder, sortObjects ) {
 
 		if ( object.visible === false ) return;
 
@@ -1172,7 +1172,11 @@ function WebGLRenderer( parameters ) {
 
 		if ( visible ) {
 
-			if ( object.isLight ) {
+			if ( object.isGroup ) {
+
+				groupOrder = object.renderOrder;
+
+			} else if ( object.isLight ) {
 
 				currentRenderState.pushLight( object );
 
@@ -1196,7 +1200,7 @@ function WebGLRenderer( parameters ) {
 					var geometry = objects.update( object );
 					var material = object.material;
 
-					currentRenderList.push( object, geometry, material, _vector3.z, null );
+					currentRenderList.push( object, geometry, material, groupOrder, _vector3.z, null );
 
 				}
 
@@ -1209,7 +1213,7 @@ function WebGLRenderer( parameters ) {
 
 				}
 
-				currentRenderList.push( object, null, object.material, _vector3.z, null );
+				currentRenderList.push( object, null, object.material, groupOrder, _vector3.z, null );
 
 			} else if ( object.isMesh || object.isLine || object.isPoints ) {
 
@@ -1242,7 +1246,7 @@ function WebGLRenderer( parameters ) {
 
 							if ( groupMaterial && groupMaterial.visible ) {
 
-								currentRenderList.push( object, geometry, groupMaterial, _vector3.z, group );
+								currentRenderList.push( object, geometry, groupMaterial, groupOrder, _vector3.z, group );
 
 							}
 
@@ -1250,7 +1254,7 @@ function WebGLRenderer( parameters ) {
 
 					} else if ( material.visible ) {
 
-						currentRenderList.push( object, geometry, material, _vector3.z, null );
+						currentRenderList.push( object, geometry, material, groupOrder, _vector3.z, null );
 
 					}
 
@@ -1264,7 +1268,7 @@ function WebGLRenderer( parameters ) {
 
 		for ( var i = 0, l = children.length; i < l; i ++ ) {
 
-			projectObject( children[ i ], camera, sortObjects );
+			projectObject( children[ i ], camera, groupOrder, sortObjects );
 
 		}
 
diff --git a/src/renderers/webgl/WebGLRenderLists.js b/src/renderers/webgl/WebGLRenderLists.js
index 234de8d5f..0150d2518 100644
--- a/src/renderers/webgl/WebGLRenderLists.js
+++ b/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;
 
@@ -64,7 +72,7 @@ function WebGLRenderList() {
 
 	}
 
-	function getNextRenderItem( object, geometry, material, z, group ) {
+	function getNextRenderItem( object, geometry, material, groupOrder, z, group ) {
 
 		var renderItem = renderItems[ renderItemsIndex ];
 
@@ -76,6 +84,7 @@ function WebGLRenderList() {
 				geometry: geometry,
 				material: material,
 				program: material.program,
+				groupOrder: groupOrder,
 				renderOrder: object.renderOrder,
 				z: z,
 				group: group
@@ -90,6 +99,7 @@ function WebGLRenderList() {
 			renderItem.geometry = geometry;
 			renderItem.material = material;
 			renderItem.program = material.program;
+			renderItem.groupOrder = object.groupOrder;
 			renderItem.renderOrder = object.renderOrder;
 			renderItem.z = z;
 			renderItem.group = group;

Mugen87 · 2018-12-28T19:27:30Z

I've added a WIP PR to demonstrate your suggested change. I've also added a small demo that shows that the PR solve the original issue mentioned in #14415

WebGLRenderer: Added .sortGroups

384a3b8

Mugen87 changed the title ~~WebGLRenderer: Added .sortGroups~~ WebGLRenderer: Added SortingGroup Jul 8, 2018

Added SortingGroup

8fd1d47

Mugen87 added 3 commits July 8, 2018 23:11

Merge remote-tracking branch 'upstream/dev' into dev14

429ae79

SortingGroup: Derive from Group instead of Object3D

0548a7d

Added WebGLSortingGroups

e1d463f

WebGLRenderer: Rename sortGroups to sortingGroupsEnabled

48c1a53

WebGLSortingGroups: Refactoring

c97064e

WebGLSortingGroup: Improve check if object is in sorting group

fc2bb13

Mugen87 closed this Jul 10, 2018

Mugen87 mentioned this pull request Dec 26, 2018

Two mesh with Muti-Materials set same renderOrder value, the z-order is not correct? #14415

Closed

3 tasks

Mugen87 mentioned this pull request Dec 28, 2018

WebGLRenderer: Added ability to sort groups by renderOrder #15484

Merged

Mugen87 mentioned this pull request Feb 9, 2020

Suggestion: Default group render order to not overwrite existing group order #18176

Draft

Uh oh!

WebGLRenderer: Added SortingGroup #14433

WebGLRenderer: Added SortingGroup #14433

Uh oh!

Conversation

Mugen87 commented Jul 8, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

WestLangley commented Jul 8, 2018

Uh oh!

WestLangley commented Jul 8, 2018

Uh oh!

WestLangley commented Jul 8, 2018

Uh oh!

Mugen87 commented Jul 8, 2018

Uh oh!

WestLangley commented Jul 8, 2018

Uh oh!

Mugen87 commented Jul 9, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

navigator117 commented Jul 10, 2018

Uh oh!

Mugen87 commented Jul 10, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Mugen87 commented Jul 10, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mrdoob commented Dec 28, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mrdoob commented Dec 28, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Mugen87 commented Dec 28, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Mugen87 commented Jul 8, 2018 •

edited

Loading

Mugen87 commented Jul 9, 2018 •

edited

Loading

Mugen87 commented Jul 10, 2018 •

edited

Loading

Mugen87 commented Jul 10, 2018 •

edited

Loading

mrdoob commented Dec 28, 2018 •

edited

Loading

mrdoob commented Dec 28, 2018 •

edited

Loading