SimpleButton overlapping bug

Bugs
1

Hi folks,

I started a conversation on Questions and was told this could be an engine bug. Here’s the full detail of the issue: GUI SimpleButton overlapping issue

Simplified: I have two buttons rendered on top of each other however there’s some weird stuff happening when you rotate in/around the element. Even though in space one button is positioned in front likes:

1a687f9100f37dc3cd5efbb8c82cba743ae57b48_2_956x1000
1a687f9100f37dc3cd5efbb8c82cba743ae57b48_2_956x1000956×1000 76.7 KB

When you view from the rear it renders like so:

0dcbce59b316f3870c240c6682a1123f1b641fd6_2_1094x998
0dcbce59b316f3870c240c6682a1123f1b641fd6_2_1094x9981094×998 94.8 KB

I can solve this with renderingGroupId apparently but this seems like a deeper problem.

Hopefully this is a helpful bug report.

David

2

Guys, don’t miss the video:

3

It’s not a bug per see, it’s because the planes are flagged as transparent because of the dynamic texture applied to them, meaning they are simply sorted before being rendered. Depending on the camera view, sometimes A is in front of B and sometimes it is the reverse, so their relative position changes.

The easiest way to deal with that in your case is to set the mesh.alphaIndex property to set the proper sorting order:
https://playground.babylonjs.com/#DT7AQC#25

4 Likes