From 877da70678a2f031555e5af4a4b5784ec9e8d2c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20=C5=A0pan=C4=9Bl?=
 <OndrejSpanel@users.noreply.github.com>
Date: Tue, 16 Dec 2025 12:54:00 +0100
Subject: [PATCH] WebGLRenderer: Consider skinning / instancing when sorting
 objects. (#28125)

---
 src/renderers/webgl/WebGLRenderLists.js           | 15 +++++++++++++++
 .../src/renderers/webgl/WebGLRenderLists.tests.js |  8 ++++++++
 2 files changed, 23 insertions(+)

diff --git a/src/renderers/webgl/WebGLRenderLists.js b/src/renderers/webgl/WebGLRenderLists.js
index 2839e8b94ac61e..b9b30e7cefd58f 100644
--- a/src/renderers/webgl/WebGLRenderLists.js
+++ b/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;
diff --git a/test/unit/src/renderers/webgl/WebGLRenderLists.tests.js b/test/unit/src/renderers/webgl/WebGLRenderLists.tests.js
index 9c2cdf13a38e38..5a871a00a183e0 100644
--- a/test/unit/src/renderers/webgl/WebGLRenderLists.tests.js
+++ b/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,