Issue with GUI3DManager Menus - Random Appearance, Difficult to Click Buttons, and Misalignment

Bugs
1

Hello everyone,

I’m encountering some issues with the menus in GUI3DManager. Here are the details:

  • Random Appearance of Menus: The menus appear unpredictably, making them difficult to use.
  • Difficult to Click Buttons: The buttons are often hard to click.
  • Misalignment: The menu elements are not properly aligned, which disrupts the user interface.

This problem only occurs when viewing the menus from a specific camera angle, which seems to be affecting the interaction and layout.

Has anyone else experienced this issue or have any suggestions on how to resolve it?

Thanks in advance for your help!

exemple of camera angle:

menu3
menu31371×800 96.2 KB

axemple of another camera angle:

bugMenu
bugMenu950×518 278 KB

2

care to share a playground or reproduction? we will be able to test and provide feedback.

3

Hello @RaananW,
Thank you for your response.

Here’s a link to the playground where the issue can be reproduced: Babylon.js Playground.

According to the first position of the camera:
the front and left views work fine, but when turning to the right and back views, the menu buttons are not aligned properly.

Keyboard controls:

  • Q: Turn left
  • D: Turn right
  • M: Refresh the menu
  • ARROWS: Move

Thanks again!

1 Like
5

just to confirm - i can reproduce this, but only if i click on one of the menus. is that the case, or does it also happen to the first menu without any interaction?

6

same as your behavior.
the first menu work fine, it’s happen only when i click in one of the button menu.
thanks!

7

Is it the same with this PG - bugMenu | Babylon.js Playground (babylonjs.com) ?

8

yes i have the same problem while testing your playground

9

I tried changing the camera’s angle and clicking the menus, but couldn’t. What would be the best way to reproduce this?

10

To reproduce the bug:

  1. Start by facing the default view.
  2. Turn 90 degrees to the right using the Q or D key.
  3. Press M to recall the menu.
  4. Click on any category button.

The second menu that appears will show the misalignment issue.

Let me know if you need any further details. Thanks again for your help!

11

Hello @RaananW,

I just wanted to ask if there have been any updates or progress regarding menu misalignment.

Thank you in advance for any help.

12

Sorry, not yet. I will add a GitHub issue to track progress. What I can tell you is that it doesn’t happen if you don’t add the margin definition, so it must be some issue with resizing.

13

Found the issue :slight_smile:
And it’s on us…

3D GUI Near Menu computes the cell size incorrectly by RaananW · Pull Request #15551 · BabylonJS/Babylon.js (github.com)

2 Likes
15

Hello @RaananW,

I noticed that the issue was resolved while testing on the playground https://playground.babylonjs.com/#Z6M4WM#4.
I tried updating the @babylonjs/gui package from version ^6.48.0 to ^6.49.0, but I’m still encountering the problem in our project.

Thank you again in advance for your help!

16

It has only been fixed recently so probably in 7.25.0 and up

1 Like