How to render GUI last (after gizmos)

Is there a way to render a fullscreen, foreground GUI after the gizmos? I want them both to still be rendered in the foreground (i.e. after all of the meshes), but with the GUI rendered last.

I can’t find any way to manage their rendering order beyond setting their layers to background or foreground, but it would be great to be able to render the GUI last somehow. :slight_smile:

https://playground.babylonjs.com/#MELUXZ

This is a tricky one! My first thought was to try to manually render the gizmo utility layer and then the GUI over that, but I’m not sure that you can control when the GUI is rendered.

@Cedric @msDestiny14 any ideas?

2 Likes

My hunch is that it’s an oversite in our systems and the GUI should be rendered last.

I would agree with your thinking @DarraghBurke

1 Like

You can use an utility layer.

How to make GUI rendered after Gizmos | Babylon.js Playground (babylonjs.com)

Pointer inputs for gizmo pass through the GUI. I don’t know if it’s possible to have priorities or masking for that. @PolygonalSun

4 Likes

Wonderful solution, thanks @Cedric. And for preventing the inputs from passing through the GUI, setting isPointerBlocker on the GUI controls works well I think, but maybe there’s a catchall solution using priorities or masking like you say… :slightly_smiling_face:

https://playground.babylonjs.com/#MELUXZ#2

2 Likes

Ok this is kind of funny.

ezgif-3-c65e3f709797

See how it’s getting held up when it passes over the GUI.

Here is this fix. https://playground.babylonjs.com/#MELUXZ#3 What we want to do is turn off isPointerBlocker when the dragging starts and then turn it back on when the dragging ends. :joy:

On a side note if you want to for some reason still be able to pick the gizmo behind the GUI BUT still want behaviour of clicking on the rectangle check out this thread. 2D Layer isPointerBlocker exception? - #6 by msDestiny14

4 Likes

Thanks @msDestiny14, that actually solves another issue that I didn’t know I was having too, LOL, where after dragging the mesh behind the GUI and letting go of the mouse click, then it kept dragging until I clicked on the gizmo again. But your fix fixed that issue as well! :slightly_smiling_face: :beers:

1 Like

As far as a I know, there is no masking or priority that can be set and shared between gizmos and GUI

2 Likes