Loading and unloading assets vs using different scenes or pages

Bit of background… I’m building an interactive application to inform first time voters here about how the voting system and the government works here in Belgium.

Rough WIP (Finalizing the style): KIEZ.nu - Gen Z Kiest

We basically have a number of “topics”, for which we each build a scene in Blender with animations and then add interactions in Babylon. These have to be modular and depending on our election cycle the order of these scenes will be shuffled.

So these are basically self-contained, modular “levels” for all intents and purposes and I wanted to ask some more experienced people here what the best way to handle the loading and unloading of these levels would be.
Each level consists of one or more compressed .glb’s to keep our workflow simple. We’re aiming for about 5-6 levels at first, which would be expanded eventually to 10 or more.

Right now, I have to make a decision between:

  • Having a single HTML page and loading / unloading assets within the Babylon scene
  • Setting up multiple babylon scenes and swapping them in and out on a single HTML page
  • Having a HTML page for each one with a shared codebase for the scene rendering but it’s own functions for loading the different scenes, animations and interactions.

I know this is quite a broad question, but I wanted to see if anyone has done anything similar. I’m trying to keep everything as lightweight as possible as we’re primarily targeting mobile users.

I appreciate any input, thanks.

1 Like

Hello @mantissa , how are you doing?

I think @RaananW might be the right one to know about web development performance and best practices.

I can just give my 2 cents here - It all depends on your users (or your expected average user).

Depending on the machine , the browser, the environment that will render the site, you can choose different approaches. If you want everything to be as snappy as possible, you will need to load the first scene, and while showing it, download all of the rest, create their scenes, and switch between them when you want to. If you don’t mind the users to wait for the page load, the cleaner approach would be a page per experience, because you will be sure that memory management will be much simpler - your browser takes care of clearing everything, and you only load what you need.

It also depends on the size of models and the amount of textures you are loading. you wouldn’t want to oveload your GPU with too many textures just to have the app crash on some users.

So, TL;dr - think about your average user and lower your expecatations from their device then make sure the experience works on the lower-than-average device, and is as smooth as you agree it could be.

The build process is straightforward for each of those scenarios, it is just slightly different for individual pages vs. a single page.

Thanks for the detailed answer, I had some time to try things out.
I’ve settled on a single page approach with assets swapping in and out when needed and a loading animation in between when necessary.

This makes the whole experience feel a bit more seamless for our purposes. Our assets are usually ~1-2MB, so nothing crazy. (Long live gltf compression!)

For anyone thinking of doing anything similar, the mesh.dispose() function is great for unloading assets. The only thing I haven’t figured out yet is how to clean up triggered animations, but I’m sure I’ll get there eventually.