In the process of rotation, the rectangular billboard and the circular billboard will always be one after the other. Can the rectangular billboard always be placed at the top
https://playground.babylonjs.com/#TMHF80#1268
You could use the renderingGroupId property?
See https://playground.babylonjs.com/#TMHF80#1270 (lines 35 and 37)
The renderinggroupid attribute will keep the object at the top level forever. There will be a bug in this case.
for example:
https://playground.babylonjs.com/#TMHF80#1271
The higher the renderinggroupid value, the longer the layer will always be
Indeed, but that wasn’t the scenario you asked about originally 
Changing the group will sidestep depth checks (AFAIK) so that’s definitely not a universal solution. I think you may have to adjust the depth values manually or perform some other magic to get it to work in a more complex scenario, but that’s really something the Babylon experts would know better than I do.
As far as I can see, the problem is that billboard meshes (and sprites) are just planes projected to always face the camera. This means their physical location in world space determines when they occlude each other. You could try to override the depth value in a shader, change the position, or even update dynamically the rendering group ID? None of these seem like ideal solutions, but I can’t think of anything else right now.
What we need to consider is a general scenario, not a demo It’s a headache
Transparency ordering is hard you can learn all the tricks available here Transparent Rendering | Babylon.js Documentation
1 Like
You can set your own sorting function that the engine should use to sort transparent objects.
In your case, you would need this function to always sort the sprite before its corresponding text, but have correct sorting between different sprites+texts.
You can do something like this:
I’m using the existing alphaIndex property to link the sprite and its text: they both have the same value. That’s how the sorting function knows it should apply a special sorting between both objects. I’m using a property I have added on the meshes, priority: it’s 0 for the sprite, 1 for the text. That way, the sprite will always be sorted first compared to the text.
3 Likes
Thank you, but Babylon is not found in the document BABYLON.RenderingGroup.backToFrontSortCompare API
You probably need to import core/Rendering/renderingGroup.
Hello @brightMoon just checking in, was your question answered?
Not completely solved
What would you like help with?