How does the full-screen GUI control scale according to the distance of the camera

I used render loop to determine the camera distance and control the gui scale, but something seems to be wrong. The border of the button is left on the canvas. This happens with the scaling of persistent violence, and Is there a better way to control the GUI control scale.

In short, I believe it doesn’t. The fs gui being a 2D layer on top of the scene, it relies only on the canvas size and resolution (at least, the way I understand it). I suppose you would need to create GUI for mesh to adapt from the camera view. Yet, I’m not 100% sure, so best is you wait on the answer from the expert cc @carolhmj


mawa is correct, the fullscreen GUI is intended to be a layer on top of the scene, and I think a mesh GUI would probably be more adapted for your use case. In any case, the border left on canvas is an artifact of the invalidate rect optimization (where it tries to not clear the entire canvas every frame, just the part that was occupied by the GUI), so you can turn it off (by using advancedTexture.useInvalidateRectOptimization = false).


I’m going to use html element to implement it, because the displayed content needs a lot of animation effects. BABYLON.Animation can control the GUI property? I tried scaleY but it didn’t work,
Exist some examples if possible?

GUI can have animations, yes: Simple GUI in fullscreen mode | Babylon.js Playground (

1 Like

Why doesn’t the animation work when you set both scaleX and scaleY?

Typos :grin: Line 55 in PG. You didn’t set your keys for scaleX. Copied the one from scaleY and forgot to change it? I won’t tell anyone :joy:Happens to me all the time :face_with_hand_over_mouth:


Thank you. Rushing makes stupid code