Detect GUI overlap/collision

Hello everyone,

I know that Babylonjs support the way to detect mesh collision like this link below.

however, is it possible we can detect whether GUI is overlapping the other GUI (text guiTextBlock or Button) link image below? I’ve survey for these day, but still having no idea. Please help.

Image 1

If you are using planes with an advanced dynamic texture on it, you could check if the planes intersect.

If you are using a full screen ADT then I don’t think there’s any way to know if a control is intersecting another control except by checking yourself that the 2D bounding box of each control is intersecting.

hello Evgeni_Popov

thanks the reply. I tried to use 2D bounding box of each control to check collision.
and it’s works.

Can you tell me how you did it, I ran into the same problem.How to use 2D bounding box.Please help.

There’s actually a simple version and a complex version. Depending if you want to account for rotation. Option one is assuming you will never rotate your box and then you can just use the control._currentMeasure to get the center, width and height.

For the complex one (aka accounting for the rotation) We do a bit of math in the engine to get the bounding box: Let’s a look at the invalidateRect() function inside of control.ts .

In summary we get the _currentMeasure and transformToRef to get the measure in global space. Then measure.CombineToRef to get the bounding box.

Side note: It’s a bit expensive approach if you want to test every box control against every box control.