Rendering GUI on top of Scenes

Questions
1

I have a project where I use:
a babylon scene,
a utility layer,
an advanced texture (CreateFullScreenUI).
As a result of all these layers/scenes I have the following output when utility layer and advanced texture meet each other:
image
I want GUI layer to stay on top all the time, how can I achieve this? Thanks in advance!

3

Hi M, welcome the the forum! Sorry for slow replies.

When you say ā€˜utility layerā€™, do you mean BabylonJS UtilityLayer? Or maybe an extra <canvas> laying atop renderCanvas?

Also, if you could use the BJS playground app to re-create the issueā€¦ that would be great.

Sorry I have no solutions. Please give more info about utility layer, and make playground if you can, while we watch for more comments. Thx.

4

Yup agree a playground would help a lot.

5

Hi again!
Sorry for the late reply, my account is new and needed activation of moderators.

I didnā€™t add new canvas div, gui and utility layer are created within babylonjs scene. Here is my repo pg: https://www.babylonjs-playground.com/#I5NMC4#0

1 Like
6

Thanks for the excellent playground exampleā€¦ nicely done.

https://www.babylonjs-playground.com/#I5NMC4#1

Swapped lines 15/16, and then used utilLayer as ā€˜sceneā€™ for advancedTexture.

Layers are depth-sorted better, but the slider quit working. So, other things need adjusting, somewhere.

Iā€™ll keep thinkingā€¦ and so will others. Issue remains open.

1 Like
7

Haha thats clever! Thank you! I will try it as soon as I get home.

8

Thx. Maybe clever, maybe dangerous. :slight_smile:

https://www.babylonjs-playground.com/#I5NMC4#2

I added some more property settings in lines 16-18ā€¦ no symptom changes seen, yet.

Actually, when advancedTexture is set isForeground trueā€¦ it should be atop util layer by default, I think.

Soā€¦ yeah, likely, BJS GUI ADT controlā€¦ hasnā€™t yet been updated to ā€œhonorā€ util layers. (my lame theory)

Interesting results when we create TWO ADTā€™s ad add one to BOTH layers, and then add slider to both ADTā€™s. pg #3

9

I think the issue is currently that the utility layer and full screen gui are displayed by listening to onAfterRenderObservable and right now there is no option for priority here. For now I would try what Wingnut suggested but if that is not sufficient somehow for your usecase we can look at supporting some sort of order priority.

1 Like
10

More interesting experiments from you :slight_smile:

Iā€™m on my pc now and when I tried to apply these procedures to my project, GUI is still below the utility layer. I am using webpack for compiling my javascript files and GUI and utility code are in separate files. I think, unexposed parts of babylonjs decides on which scenes are drawn above but I have no idea.

I will keep experimenting a little more.
Edit: No luck with my experiments :frowning:

@trevordev, I think that would be really awesome and for other people, too!

1 Like
11

Yeah, @trevordevā€¦ MK canā€™t click/drag any of the GUI controlsā€¦ using my kludgy method.

@mkadirtanā€¦ youā€™re using the newest preview version of BJS? The ORDER of the script-includesā€¦ might be important/pertinent. ie. Bring-in GUI first, then uLayer, then BJS core. Then maybe change it around, etc. No promises. :slight_smile:

Sorry to hear that my demented layer-stack ideaā€¦ is not working for home project. hmm.

I have 0 experience with webpack, but Iā€™ll keep thinking (which usually makes the situationā€¦ worse) :smiley:

1 Like
12

Gotcha, after looking into this a bit more, I was incorrect, the gui is rendered as part of the scene render so Wingnutā€™s solution sounds right but the input events dont seem to get handled properly for guiā€™s within a utility layer. I created this issue to look into it Unable to get a working gui on top of a utilityLayer Ā· Issue #5707 Ā· BabylonJS/Babylon.js Ā· GitHub

3 Likes
13

@Wingnut, @trevordev Iā€™m very thankful for your efforts guys!

I think, for now it is best to wait for issue resolution.

14

Iā€™m working on it today!

1 Like
15

it is fixed and merged. Will be in next nightly

2 Likes
16

Thanks a lot!

17

Sorry for adding to an older post, but I keep coming back to this on in search of a solution. I have made som changes to the playground from earlier and added som SSAO to it. The problem is it will get the AO applied to/after the utilityLayer;

https://www.babylonjs-playground.com/#I5NMC4#4

I have tried adjusting the layerMask but have not got it working. Setting it up with a separate camera for gui and masking that works, but that gives me trouble with the VRhelper, because setting activeCameras seems to also set activeCamera to the last of the activeCameras, and that would be the gui camera, so entering and exiting VR would set and reset based on gui camera and not my universalCamera, if I have assumed correctly based on my test.

So is there any way to mask out ā€œpost effectsā€ from the utilityLayer?

Any help is greatly apreciated.

18

@trevordev: I wonder if we could add an option to UtilityLayers to let them render after the entire root scene? (like on onAfterRenderObservable instead of on onAfterCameraRenderObservable)?

19

That is sort of what I was hoping it did, but I am quite new to all this, and still wrapping my head around stuff. I am on 4.0.3, and plan to stay on that for now. So I am guessing there is no way to do it right now then? I tried setting a separate camera for the utilityLayerScene isolating it all with layerMask, but i guess that is not a working option or I made some mistake. The only thing I have not tried (I think) is setting up the gui in a separate scene, and rendering one after the other in runRenderLoop.

Anyway, thanks for taking a look at this.

20

Rendering the GUI in a different scene will work :slight_smile: 100% guarantee

21

Ok, I guess that is my best option for now then. It just seemed more logical to me that utilityLayer would be more performant than a whole other scene, so I wanted to try that first.

Thanks for the quick feedback Deltakosh. :+1: