# Slow GUI rendering **URL:** \ **Category:** Questions\ **Created:** [March 15, 2023, 2:53pm UTC](https://forum.babylonjs.com/t/slow-gui-rendering/39053 "2023-03-15T14:53:53Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Vladislav\_Zhidko](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladislav_zhidko/32/26954_2.png) [@Vladislav\_Zhidko](https://forum.babylonjs.com/u/Vladislav_Zhidko)\ **Post date:** [March 15, 2023, 2:53pm UTC](https://forum.babylonjs.com/t/slow-gui-rendering/39053/1 "2023-03-15T14:53:53Z")
Hi. I use AdvancedDynamicTexture.CreateFullscreenUI() to draw the entire GUI in the game. The clouds above the houses are also drawn on this texture and attached to the houses via linkWithMesh. The problem starts at the moment of camera movement because the clouds need to be redrawn, but this redrawing takes a huge frame time → as a result, the fps drops. Game link: [https://lands-staging.faraway.com/Hriz256#LZW3UQ](https://lands-staging.faraway.com/Hriz256#LZW3UQ) Here is an example: ![Снимок экрана 2023-03-15 в 17.38.23](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/e/9/e9e4ab0a138a0e1eba71ea939a6c60ec6cba815a.png) ![Снимок экрана 2023-03-15 в 17.38.29](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/b/8b7ba40d6db559112c60f9f66b2443babef090ab.png) Maybe there are ways to optimize this? ---
**Author:** ![jamessimo](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/jamessimo/32/26847_2.png) [@jamessimo](https://forum.babylonjs.com/u/jamessimo)\ **Post date:** [March 15, 2023, 3:05pm UTC](https://forum.babylonjs.com/t/slow-gui-rendering/39053/2 "2023-03-15T15:05:31Z")
Have you tried using `control.useBitmapCache = true` on the clouds to see if that will help? ---
**Author:** ![Vladislav\_Zhidko](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladislav_zhidko/32/26954_2.png) [@Vladislav\_Zhidko](https://forum.babylonjs.com/u/Vladislav_Zhidko)\ **Post date:** [March 15, 2023, 3:21pm UTC](https://forum.babylonjs.com/t/slow-gui-rendering/39053/3 "2023-03-15T15:21:21Z")
Yes, I tried it. No effect ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [March 15, 2023, 7:54pm UTC](https://forum.babylonjs.com/t/slow-gui-rendering/39053/4 "2023-03-15T19:54:26Z")
---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [March 15, 2023, 11:33pm UTC](https://forum.babylonjs.com/t/slow-gui-rendering/39053/5 "2023-03-15T23:33:51Z")
While @carolhmj is having a look, let me tell you the game is way too pretty !!! Maybe for some of those effects a webgl rendering would help ? ---
**Author:** ![Vladislav\_Zhidko](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladislav_zhidko/32/26954_2.png) [@Vladislav\_Zhidko](https://forum.babylonjs.com/u/Vladislav_Zhidko)\ **Post date:** [March 16, 2023, 7:35am UTC](https://forum.babylonjs.com/t/slow-gui-rendering/39053/6 "2023-03-16T07:35:36Z")
Thank you:) What effects are you talking about? ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [March 16, 2023, 9:45am UTC](https://forum.babylonjs.com/t/slow-gui-rendering/39053/7 "2023-03-16T09:45:02Z")
I believe he’s talking about the clouds which (in my opinion) shouldn’t be part of the ADT. There’s a good reason why the ADT does not refresh at the same rate as scene objects and fx. I agree with @sebavan that these fx should not be part of the ADT layer. And then, I also agree that this scene looks just very pretty 😍 ---
**Author:** ![Vladislav\_Zhidko](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladislav_zhidko/32/26954_2.png) [@Vladislav\_Zhidko](https://forum.babylonjs.com/u/Vladislav_Zhidko)\ **Post date:** [March 16, 2023, 9:59am UTC](https://forum.babylonjs.com/t/slow-gui-rendering/39053/8 "2023-03-16T09:59:38Z")
If doing this is not part of the ADT layer, how then? dynamic texture + instanced plane + billboard mode? ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [March 16, 2023, 10:06am UTC](https://forum.babylonjs.com/t/slow-gui-rendering/39053/9 "2023-03-16T10:06:25Z")
Depends on how often it appears and there are a number of options as per the animation and frequency. But yes, either basically on a plane in which case likely parented to the cam and/or resized with canvas. Else as a pp fx on full-screen (likely from NME or shader). Something around that (again, my opinion only). We’ll see what @carolhmj has to say about it… Meanwhile, have a great day 🕶 ---
**Author:** ![Vladislav\_Zhidko](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladislav_zhidko/32/26954_2.png) [@Vladislav\_Zhidko](https://forum.babylonjs.com/u/Vladislav_Zhidko)\ **Post date:** [March 16, 2023, 10:24am UTC](https://forum.babylonjs.com/t/slow-gui-rendering/39053/10 "2023-03-16T10:24:58Z")
I think it would be important to mention that there are clouds width text, so it is important for me to be able to render them dynamically ![Снимок экрана 2023-03-16 в 13.23.17](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/b/e/be598af069f06a9a619675fb5fe6ce07e757a95d.png) ![Снимок экрана 2023-03-16 в 13.23.45](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/f/1f8a2db27d78444f419850180dd2ebb1c3e6dc39.png) ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [March 16, 2023, 10:32am UTC](https://forum.babylonjs.com/t/slow-gui-rendering/39053/11 "2023-03-16T10:32:23Z")
> [@Vladislav\_Zhidko](#): > > important to mention that there are clouds width text Sorry I’m not sure to understand this part. I don’t see any clouds in your hotspots (from the site or the screenshots above). Do you mean you want to make sure that the GUI can still be viewed when there are clouds. I guess this request is implicit and shouldn’t be a problem. Something I missed? ---
**Author:** ![Vladislav\_Zhidko](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladislav_zhidko/32/26954_2.png) [@Vladislav\_Zhidko](https://forum.babylonjs.com/u/Vladislav_Zhidko)\ **Post date:** [March 16, 2023, 10:33am UTC](https://forum.babylonjs.com/t/slow-gui-rendering/39053/12 "2023-03-16T10:33:46Z")
By clouds I mean pop-up bubbles (I have attached screenshots of them). They are part of the ADT layer now ![Снимок экрана 2023-03-16 в 13.33.29](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/9/69a00c5b12296a45c31fe3b28ad876fc0d0a0b5a.png) ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [March 16, 2023, 10:38am UTC](https://forum.babylonjs.com/t/slow-gui-rendering/39053/13 "2023-03-16T10:38:12Z")
OMG. 🤫 So it’s a language issue (english is also not my language). The clouds I can see on the screen opening above the scene are not those who you were talking about. Your issue is with your hotspots ‘pop-up bubbles’ that are slowing down your scene, is it? ---
**Author:** ![Vladislav\_Zhidko](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladislav_zhidko/32/26954_2.png) [@Vladislav\_Zhidko](https://forum.babylonjs.com/u/Vladislav_Zhidko)\ **Post date:** [March 16, 2023, 10:42am UTC](https://forum.babylonjs.com/t/slow-gui-rendering/39053/14 "2023-03-16T10:42:36Z")
Yes. They are part of the ADT layer and it takes a long time to redraw them ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [March 16, 2023, 10:48am UTC](https://forum.babylonjs.com/t/slow-gui-rendering/39053/15 "2023-03-16T10:48:48Z")
Ok, now I get it. You can forget about the above (my apologies). 🥺 🙏 So let’s start new: All these hotspots/bubbles/clouds, they are all in a single FS ADT texture, is it? You didn’t use ADT for mesh (in texture mode)? And you render/update the entire ADT on each call of these hotspots/bubbles, is that what it is? And when you say they are drawn on this texture, do you mean in real time? They are created and disposed each time you click on an interactive object? And then, you can actually not interact with these bubbles, can you? In case, you could use a dynamicTexture for this part… Edit: So I just went back to your perf screenshot and I guess this is clearer now. I suppose your issue is for mobile or just from the numbers. Because to be honest, on desktop, I didn’t notice this performance drop and it doesn’t affect my user xp. But then, I don’t seem to be able to move the cam while the bubble is open, so I suppose I cannot really reproduce as per your initial post. ---
**Author:** ![Vladislav\_Zhidko](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladislav_zhidko/32/26954_2.png) [@Vladislav\_Zhidko](https://forum.babylonjs.com/u/Vladislav_Zhidko)\ **Post date:** [March 16, 2023, 11:35am UTC](https://forum.babylonjs.com/t/slow-gui-rendering/39053/16 "2023-03-16T11:35:39Z")
> [@mawa](#): > > All these hotspots/bubbles/clouds, they are all in a single FS ADT texture, is it? Yes, that’s right. > [@mawa](#): > > You didn’t use ADT for mesh (in texture mode)? No, I haven’t tried that. Does that make sense? There could be dozens or hundreds of hotstops > [@mawa](#): > > And you render/update the entire ADT on each call of these hotspots/bubbles, is that what it is? They have to redraw themselves every time the camera moves > [@mawa](#): > > And when you say they are drawn on this texture, do you mean in real time? They are created and disposed each time you click on an interactive object? I create them once, if it is a hotspot with a timer it updates its time text every second ```auto const hotspot = new Container(); ADT.addControl(hotspot); hotspot.linkWithMesh(attachmentNode); ``` ---
**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\ **Post date:** [March 16, 2023, 11:40am UTC](https://forum.babylonjs.com/t/slow-gui-rendering/39053/17 "2023-03-16T11:40:19Z")
> [@Vladislav\_Zhidko](#): > > No, I haven’t tried that. Does that make sense? There could be dozens or hundreds of hotstops I believe not. Not in this case and not until we get this cloning of ADT feature I’m still waiting on 😁 For the rest, I will leave @carolhmj (my GUI mentor 👩‍🏫) reply 😁 I don’t feel like taking a chance giving the wrong answer here 😀 I guess you provided enough information for that to happen. Shouldn’t be all too long… ⏳ ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [March 16, 2023, 8:48pm UTC](https://forum.babylonjs.com/t/slow-gui-rendering/39053/18 "2023-03-16T20:48:21Z")
Hello! Wasn’t able to check this earlier, sorry! First thing, I’ll add to Seb and say that the game is looking very very nice already! I’ve started investigating your example and will report back! ---
**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\ **Post date:** [March 20, 2023, 6:33pm UTC](https://forum.babylonjs.com/t/slow-gui-rendering/39053/19 "2023-03-20T18:33:57Z")
I’ve tried doing some captures in your scene using CPU slowdown so the problem gets more visible. What looks like to be using the most time is drawImage, like in these two frame examples: ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/6/166c58ff761ca4ace5cf52a3dbd1c10e9d96ae8b.png) ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/d/b/db1adc7afef41ff54dad85c738c62b22bff35ad9.png) I imagine you’re using some high resolution images for your game, and certain graphic processors (maybe machines with integrated graphics?) struggle to draw them. Keep in mind that when using a GUI image, it is drawn on a 2D canvas context first and then passed as a texture to the 3D main context. And the 3D frame has to wait for the 2D GUI layer to be drawn, which slows everything down. You can see on the captures that \_renderForCamera has to wait for \_checkUpdate to finish everything before it can end. One possible solution would be to lower this resolution. It could be something adaptive, where you detect the agent and adjust the images resolution accordingly. Another option would be to move those elements that rerender many times to use billboarded meshes instead of linked GUI. I put together an example here, the two methods aren’t looking exactly the same, but it can be further refined and adjusted: [Simple GUI in fullscreen mode | Babylon.js Playground (babylonjs.com)](https://playground.babylonjs.com/#XCPP9Y#18044). The idea here is, well, since the CPU is struggling to draw these high res images in a 2D canvas context, bypass it entirely and render on 3D context as a texture. There are other further explorations that could be ventured, like maybe rendering the GUI only every X frames, but I think these first two solutions are simpler. ---
**Author:** ![Vladislav\_Zhidko](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vladislav_zhidko/32/26954_2.png) [@Vladislav\_Zhidko](https://forum.babylonjs.com/u/Vladislav_Zhidko)\ **Post date:** [March 20, 2023, 7:30pm UTC](https://forum.babylonjs.com/t/slow-gui-rendering/39053/20 "2023-03-20T19:30:33Z")
In addition to pictures, hotspots also show timers (text), so I need DynamicTexture as a minimum. Would it be beneficial if I have to create 100 hotspots (100 dynamic textures)? [Next page](https://forum.babylonjs.com/t/slow-gui-rendering/39053.md?page=2)