How close is too close... alternatively: how to effectively mandate render order?

I’ve got a bunch of 2D objects I want to drag and drop, etcetera. When dropped, I’m having difficulties getting the correct render order. I might have several problems, but I certainly have this one: https://playground.babylonjs.com/#DW56YA. Where the green diamond is well hidden and the blue triangle is not. That is, by the y coordinate, both the blue triangle and the green diamond should be hidden. What is the best way to arrange it so everything gets rendered in y order?

I’m not sure this really answers your question, but I’m guessing that the z-fighting issue you’re seeing is a result of precision relative to camera distance and rendering.

Just tweaking the values to be a bit less “precise” I think I was able to make it work?

https://playground.babylonjs.com/#DW56YA#2

Yup. Nudging works. But as I mentioned, this is just one of my likely… complexities/bugs. I’ll dig and report back here.

At these settings, the order of render matters every once in a while: artifacts can be seen.
(I’m just exchanging the positions of like-material meshes). Off-hand, I’m not able to tell the difference in depth between the first and the last ‘disc’. I’m good.
https://playground.babylonjs.com/#DW56YA#4