How to sort 3d widgets

Hey there! Could anyone tells me how can I sort my 3d widgets to each other? I have a problem with overlapping, and I don’t understand how to solve it. I know there is a Layer ZOrder option inside of Widget Component, but I dont know how to change it at runtime. Maybe it’s a wrong way and I have to find another solution?

As you understand I want to open my popup window (which is a 3d widget as well) and cover my other 3d widgets on the viewport.

Hi.

If the widgets are drawn directly on the viewport you can change the Z order (draw order) using “Add to viewport” node when they are created. You can also use this node to modify how an existing widget is drawn.

271834-addwidgettoviewport.png

Because you used the term “widget component” am I right in thinking these are 3D widgets which exist in the world?
When they are in the world, controlling draw order can be slightly more tricky.

Z order / draw order works purely in relation to the players screen and viewport. Separate widget objects in the world handle their draw order using their assigned material properties and their actual locations.

If you are using the engine widget material with no depth pass (used to render widgets on top of other geometry), then these clipping issues will occur. If this is the case then there are work arounds you can implement.

Yes, you’re right - I’m talking about 3d widgets and their widget component. That’s why I can’t just create a new widget later and place it to viewport.
I switched on “Disable depth pass” in my material, but it didn’t get me another result.

On the widget components themselves, are the spaces set to world or screen?

271854-spaceorscreen.png

It’s Screen

This is quite simple to do if you are using Screen.

On the widget component there is a category called “Layer”.
Set each widget to be a different “SharedLayer” and change the “Layer Z Order”

Example:
Icons in the background:
SharedLayerName: NormalRender
LayerZOrder: -100

Overlayed menu:
SharedLayerName: RenderedOnTop
LayerZOrder: 1

That is it! But my main question was - can I do it at runtime, I mean - to manipulate LayerZOrder. If answer is “yes”, my next question will be - “How?” :slight_smile:

I’m afraid I don’t think there is. The widget component is constructed during design time before the class is generated.

I know it’s not ideal, but one work around would be to have two widgets of the same class with different z orders and toggle the visibilities between them as and when you need them.

Apologies for not reading the question correctly, at first I thought you were referring to the Z order of the viewport.

And what if the widget’s space is set to World?

I had to search high and low to find your answer. This saved me from losing my mind. Thank you for taking the time to help people out! much love