Overlap Label Problem

Hello Community,
I added a label to a box using rectangle and text block of Babylon GUI
But when I rotate camera , the label overlap the second box , so if the label is for the first box ; when we rotate the camera, The label will appear as it is for the second box

Any suggestion will be appreciated!
Thank You

That’s the way the ui is rendered (not checking for occlusion in that case). Maybe @DarraghBurke has a suggestion or a workaround

Maybe with the use of a line it would make it possible to see which box the label is linked to.
I added it to your PG

1 Like

@Dad72 thank you for your suggestion :slight_smile: , but this way the problem is not resolved , I prefer a suitable solution for my case

Yes, I didn’t say that solved the problem. it’s just another solution. But as Raanan says, this is how the UI is rendered, you won’t be able to do much about it.

Unless you are using occlusion queries and when a mesh is hidden, you hide the label. (maybe that would work)

1 Like

@Dad72 I tried the occlusion queries , but why it seems working only on one box ? ; The hello disappear ; or the yes no ;(when we rotate camera)
I updated my example using transform node as in my real case I am using it

You could use a 2D plane, apply a GUI texture to it, and rotate that to face the camera. Since it’s a plane in the scene, it would be occluded when behind another mesh. However, you would lose the consistent sizing regardless of zoom, and your texture will probably not be as crisp.

Otherwise, I don’t know if there is any easy solution for what you’re looking for. You would want to occlude the “hello” as soon as the “hello” touches the yes box on screen, right?
We don’t have any way to check if a GUI element is overlapping a mesh. Perhaps you could fire a ray at each corner of the label and see if it hits the yesss box. If so, and the yess box is closer than the hello box, then hide the “hello” label. This could work for simple scenarios but there will be a high performance cost.


@DarraghBurke Thank you for your response,
My required behavior : if “hello box” is no longer seen by the camera ; its label must not be seen also , because if “hello box” label is still showing it will appear as it is a label for the “yes box” and vice versa

I think Ray may helps as you suggest I will definitely try!

  • What did you mean by this ? the size will be static regardless of zoom?
    “However, you would lose the consistent sizing regardless of zoom, and your texture will probably not be as crisp”

  • If you could check please my last reply for Dad72 where I tried to use occlusion queries, it seems not to work on the both cases ; is there anything missing??
    and is it a suitable solution ?

Thank you in advance :slight_smile:

1 Like

Hello just checking in, was your question answered? @mhossry

The plane would become smaller as the camera gets further away, rather than a 2D GUI element which is always the same size on screen. You could fix this by computing the appropriate scaling using the distance from the camera

1 Like

Hello :slight_smile: , Sorry for the late reply , yes I created Ray from the camera position towards the mesh
var ray = BABYLON.Ray.CreateNewFromTo(camera.position, box.position);
Then I added some conditions on the pickWithRay function