Playing with overlapping depth masks (https://www.babylonjs-playground.com/#YC8DQ1#3) and and I was having problems with the first mask not occluding objects behind it. I realized it is because of the commented out swap code (lines 73-76). This code ensures that the last mask to get created is at zero in the scene list, but the first mask goes to wherever the second mask was. Seeking a better result, I thought I could simply set a different render group for the masks (line 71), but that caused the masks to disappear entirely. I also tried a render order function that would make sure masks render before any other meshes (lines 49-54), but then neither mask occluded what was behind it. So I wrote a function that would ensure that the masks were at the top of the scene.meshes array and that produces the expected result.
Is there a better way to do this? Why can’t I just use render group or a custom ordering? How robust is this approach to render ordering, i.e. will my order in scene.meshes change if a new mesh is created or model is imported into the scene?
I don’t know much about render ordering - let’s see if @sebavan has any ideas
@ericwood73, I am not sure to understand what you are trying to achieve ? opaque mesh are rendered unsorted as usually the framework is CPU bound and the depth info will end up being the same. I do not understand why order would be important if you they are not transparent ?
@sebavan Using the CSS3DRenderer technique to show dom content through the canvas. Order is important because it appears that the mask (mesh with a material with color write disabled) will not occlude any meshes behind it if the meshes behind it precede it in the scene mesh list. If you look at the CSS3DRenderer examples, e.g. https://playground.babylonjs.com/#1DX9UE#183, you can see a part of the code where they make sure the mask is the first mesh. That works fine if you have one mask, but doesn’t work if you have more than one.
I really need a solution that uses the render order function because we have a requirement to be able to update the z order of the DOM content and I found out that if you bring one mask in front of another, you need to also move it in front of the other mask in the scene list so the content properly occludes the rear content. Or if it rendered automatically front to back that would be ideal. I thought that was the default, but if you comment out my code that orders the meshes, you can see that the sphere and background will not be occluded by the masks.
Okay, I got setRenderingOrder to work. I was ordering the wrong way, giving the mesh I wanted to render first a higher value. Question is, if my comparator returns 0, will the meshes be ordered front to back? Or do I need to explicitly implement front to back for all meshes?
0 would mean equal so first in will be first 
it is directly used on the meshes array like this
So if I want front to back ordering for the rest, I’ll have to implement that in my sort function. Otherwise, I’ll get FIFO ordering.
Hey there @ericwood73 just checking in if your question has been answered
