WebGLRenderer: Consider skinning / instancing when sorting objects. (#28125)

src/renderers/webgl/WebGLRenderLists.js

@@ -12,6 +12,10 @@ function painterSortStable( a, b ) {
 
 		return a.material.id - b.material.id;
 
+	} else if ( a.materialVariant !== b.materialVariant ) {
+
+		return a.materialVariant - b.materialVariant;
+
 	} else if ( a.z !== b.z ) {
 
 		return a.z - b.z;
@@ -66,6 +70,15 @@ function WebGLRenderList() {
 
 	}
 
+	function materialVariant( object ) {
+
+		let variant = 0;
+		if ( object.isInstancedMesh ) variant += 2;
+		if ( object.isSkinnedMesh ) variant += 1;
+		return variant;
+
+	}
+
 	function getNextRenderItem( object, geometry, material, groupOrder, z, group ) {
 
 		let renderItem = renderItems[ renderItemsIndex ];
@@ -77,6 +90,7 @@ function WebGLRenderList() {
 				object: object,
 				geometry: geometry,
 				material: material,
+				materialVariant: materialVariant( object ),
 				groupOrder: groupOrder,
 				renderOrder: object.renderOrder,
 				z: z,
@@ -91,6 +105,7 @@ function WebGLRenderList() {
 			renderItem.object = object;
 			renderItem.geometry = geometry;
 			renderItem.material = material;
+			renderItem.materialVariant = materialVariant( object );
 			renderItem.groupOrder = groupOrder;
 			renderItem.renderOrder = object.renderOrder;
 			renderItem.z = z;

test/unit/src/renderers/webgl/WebGLRenderLists.tests.js

@@ -76,6 +76,7 @@ export default QUnit.module( 'Renderers', () => {
 						object: objA,
 						geometry: geoA,
 						material: matA,
+						materialVariant: 0,
 						groupOrder: 0,
 						renderOrder: 0,
 						z: 0.5,
@@ -94,6 +95,7 @@ export default QUnit.module( 'Renderers', () => {
 						object: objB,
 						geometry: geoB,
 						material: matB,
+						materialVariant: 0,
 						groupOrder: 1,
 						renderOrder: 0,
 						z: 1.5,
@@ -112,6 +114,7 @@ export default QUnit.module( 'Renderers', () => {
 						object: objC,
 						geometry: geoC,
 						material: matC,
+						materialVariant: 0,
 						groupOrder: 2,
 						renderOrder: 0,
 						z: 2.5,
@@ -130,6 +133,7 @@ export default QUnit.module( 'Renderers', () => {
 						object: objD,
 						geometry: geoD,
 						material: matD,
+						materialVariant: 0,
 						groupOrder: 3,
 						renderOrder: 0,
 						z: 3.5,
@@ -170,6 +174,7 @@ export default QUnit.module( 'Renderers', () => {
 						object: objA,
 						geometry: geoA,
 						material: matA,
+						materialVariant: 0,
 						groupOrder: 0,
 						renderOrder: 0,
 						z: 0.5,
@@ -188,6 +193,7 @@ export default QUnit.module( 'Renderers', () => {
 						object: objB,
 						geometry: geoB,
 						material: matB,
+						materialVariant: 0,
 						groupOrder: 1,
 						renderOrder: 0,
 						z: 1.5,
@@ -206,6 +212,7 @@ export default QUnit.module( 'Renderers', () => {
 						object: objC,
 						geometry: geoC,
 						material: matC,
+						materialVariant: 0,
 						groupOrder: 2,
 						renderOrder: 0,
 						z: 2.5,
@@ -224,6 +231,7 @@ export default QUnit.module( 'Renderers', () => {
 						object: objD,
 						geometry: geoD,
 						material: matD,
+						materialVariant: 0,
 						groupOrder: 3,
 						renderOrder: 0,
 						z: 3.5,