How do I optimize these GUI

Hi All. I need to create a lot of advanced texture GUI tags dynamically. It’s going to be hundreds.

my playground demo Babylon.js Playground
This way of creation will lock my website. What’s a good way to improve it ?

Adding @msDestiny14

The biggest slow down is going to be those image loadings. (The GUI itself should not be that expensive). I wonder if having some kind of await for loading the image and then you can have a loading screen in the meantime.

Can’t think of anything else specific at the moment.


My understanding was that I’ve reloaded images many times, causing it to get stuck .Is it possible to load these textures only once and reuse them? My users don’t like loading screen :sweat_smile: So I have to optimize it .

If I want to reuse these textures, Should I have to give up the GUI ?

@musk no matter the solution you chose GUI vs already baked, loading 100s of textures will take time :frowning:

1 Like

I think your best bet here is to progressively load in your GUI, as @msDestiny14 alluded to. Is that an option for you? Maybe you can have the most crucial textures load in first and then slowly populate the rest of the screen.

The UX field has put a ton of effort into figuring out ways to make loading less painful, there are lots of articles on this subject such as this one. Probably the worst thing you can do is lock the screen and give the user zero feedback about what’s going on. You definitely want the user to know that the loading is progressing, and if possible, make parts of the UI available right away.


Thank you all for your reply. @sebavan ‘s reply gave me a hint . Loading texture will take time.its inevitable. So create instance of the plane . It’s my solution now. But I had to give up display words.
hey~ @DarraghBurke Thank you for showing me places I’ve never noticed before .

1 Like