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

Description of the problem

I create two mesh with same renderOrder.

var circleGeometry = new THREE.CircleBufferGeometry(radius, segements);                                                                                                                                                                 
var ringGeometry = new THREE.RingBufferGeometry(radius, radius + ringWidth, segements);                                                                                                                                                                 
var cellGeometry = null;
  
//...

var circleMaterial = new THREE.MeshBasicMaterial({                                                                                                                                                                                                                                                                        
  map: texture,                                                                                                                                                                                                                                                                                                         
  // wireframe: true                                                                                                                                                                                                                                                                                                    
});                                                                                                                                                                                                                                                                                                                       
var ringMaterial = new THREE.MeshBasicMaterial({                                                                                                                                                                                                                                                                          
  color: 0x000000,                                                                                                                                                                                                                                                                                                      
  vertexColors: THREE.VertexColors,                                                                                                                                                                                                                                                                                     
  // wireframe: true                                                                                                                                                                                                                                                                                                    
});
                                                                                                                                                                                                                                                                                               
cellGeometry = THREE.BufferGeometryUtils.mergeBufferGeometries([circleGeometry, ringGeometry], true);                                                                                                                                                                                                                     
var mesh1 = new THREE.Mesh(cellGeometry, [circleMaterial, ringMaterial]);                                                                                                                                                                                                                                                 
scene.add(mesh1);                                                                                                                                                                                                                                                                                                         
mesh1.renderOrder = radius;                                                                                                                                                                                                                                                                                               
var mesh2 = new THREE.Mesh(cellGeometry, [circleMaterial, ringMaterial]);                                                                                                                                                                                                                                                 
mesh2.position.x += 2;                                                                                                                                                                                                                                                                                                    
mesh2.renderOrder = radius;    
                                                                                                                                                                                                                                                                             
scene.add(mesh2);  

The result was not correct, see screenshot! 

Three.js version

• r94

Browser

• Chrome

OS

• macOS

Hardware Requirements (graphics card, VR Device, …)

[0b5vr]

Hi! I definitely need material specific renderOrder feature, instead of mesh.renderOrder.

I’m currently working on Unity familiar stuff ( https://hub.vroid.com ), and it has material.renderQueue to deal with multiple material meshes. Since Three.js has no ability to sort its render order per material, We made our own WebGLRenderList to achieve correct rendering order:

https://gist.github.com/FMS-Cat/8e86dad4293516c5f2eeed1eedd88843#file-webglvrmrenderlists-ts-L39-L53

Our current way is too hacky and very vulnerable to future Three.js updates so I want a feature that can tweak its render order by material property.

[RemusMar]

Michael,

The bad practice is still there. This “SortingGroup” workaround comes with wasted processing power (performances hit). Feel free to take it as ‘feature request’ if you like.