Detect GUI overlap/collision

enyo · March 5, 2021, 2:32am

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.

Evgeni_Popov · March 5, 2021, 9:39am

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.

enyo · March 9, 2021, 2:16am

hello Evgeni_Popov

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

yunshang · September 13, 2021, 3:02pm

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

msDestiny14 · September 14, 2021, 5:49pm

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 .

github.com

BabylonJS/Babylon.js/blob/master/gui/src/2D/controls/control.ts

import { Nullable } from "babylonjs/types";
import { Observable, Observer } from "babylonjs/Misc/observable";
import { Vector2, Vector3, Matrix } from "babylonjs/Maths/math.vector";
import { PointerEventTypes, PointerInfoBase } from 'babylonjs/Events/pointerEvents';
import { Logger } from "babylonjs/Misc/logger";
import { Tools } from "babylonjs/Misc/tools";
import { TransformNode } from "babylonjs/Meshes/transformNode";
import { Scene } from "babylonjs/scene";

import { Container } from "./container";
import { AdvancedDynamicTexture } from "../advancedDynamicTexture";
import { ValueAndUnit } from "../valueAndUnit";
import { Measure } from "../measure";
import { Style } from "../style";
import { Matrix2D, Vector2WithInfo } from "../math2D";
import { _TypeStore } from 'babylonjs/Misc/typeStore';
import { SerializationHelper, serialize } from 'babylonjs/Misc/decorators';
import { ICanvasRenderingContext } from 'babylonjs/Engines/ICanvas';
import { Engine } from "babylonjs/Engines/engine";

This file has been truncated. show original

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.

Topic		Replies	Views
How to judge whether two meshes intersect？ Questions mesh	3	871	December 1, 2022
Does Babylon use bounding boxes for collision-checking on complex meshes? Questions	15	1335	January 18, 2022
Overlap Label Problem Questions	10	749	June 5, 2022
Collision detection on rotating mesh and what do when one is found? Questions	5	1121	April 25, 2020
Detecting collisions on meshes that don't fill bounding boxes Questions	7	752	February 15, 2022

Detect GUI overlap/collision

Related topics