Rendering GUI on top of Scenes


#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


#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.


#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.


#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!


#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:


#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


#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!


#15

it is fixed and merged. Will be in next nightly


#16

Thanks a lot!