Z-index via Camera

Hello,
is there a automatic Z-Sort function for the Z-index in Babylon js?
In this Playground, One Button is always on top of the other.

I think it is possible with the build in GUI, but in this case i have to use HTML Elements for my Projekt.

Thanks in advance for the answers.

Hi!

This playground is interesting. You are actually creating HTML elements and setting them to be at the position of the meshes. The issue with z-ordering is because you don’t provide any z-ordering to your buttons. You can set the z-ordering based on the distance of the meshes from the camera. You could also use babylon’s GUI elements, which will probably be a better option for you (I hope):

unfortunately i can’t use the GUI from BJS

Maybe it is possible to measure the distance from the camera to the mesh and use this to generate the Z-index?

well, this is exactly what I was suggesting :slight_smile:

This is the way to get a rough estimate to the distance to the camera:

Z-Index Camera | Babylon.js Playground (babylonjs.com)

Applying this to the zIndex will give you opposite results. what you will need to do is sort your buttons, check the distance to the camera, sort this list and revert it. Then assign zIndex to this structure.

2 Likes