three.js: 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! 1530709073076

Three.js version
  • r94
Browser
  • Chrome
OS
  • macOS
Hardware Requirements (graphics card, VR Device, …)

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 27 (4 by maintainers)

Most upvoted comments

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.

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.

Sorry, ‘impossible’ was a poor choice of words. I was assuming you meant “render in the order specified by geometry.groups.” Is that what you were saying? If so, what would be the sorting algorithm that would achieve that result in this particular case?

Regardless, this example is an edge-case since there is z-fighting anyway. So I do not really think we need to worry about this issue.