Progress bar in babylonjs

Questions
1

Hi ,
i need to make a progress bar wih babylon.js , the progression is related to the loading of the js file.

Any helps ?

Thanks

2

Hi mixofo,

As far as I know, the browser doesn’t provide a way to measure progress loading a JS file; there’s just “unloaded” and “loaded.” I’m not sure how it could know more detail that that, as it won’t know what the JS file will tell it to do until it reads it. If you control the JS file in question, you might could add custom signals in there to tell you progress, and you could create a bar based on that. Alternatively, you could just come up with an expectation of how long you think the loading will take and just have a progress bar that fills at that speed; pretty hack-ish, but it should help set your users’s expectations more correctly. Bottom line, though, I don’t think there’s a built-in way to do what you’re looking for, unless I’ve misunderstood the aim.

3

i have a .obj files with 100 elments , my idea it is to put a variable between each element percentage = percentage + 1 , and when all element are downloaded , the progress bar will show 100 %.
There is also a document.ready , maybe that can help ?

Babylon.js - Sponza demo , this demo have progress bar , but maybe it is a fake progress bar ?

4

Quite simple actually :slight_smile:

Babylon.js Playground (progress bar only, no loading/progressing logic)

The functions should explain themselves.
UI.setProgress( progressInPerCent ) // 0 - 100
UI.showProgressBar();
UI.hideProgressBar();

@syntheticmagus already covered the issues with real-time progress measuring,
something you can do is simply record on a per-file basis, if you have 5 files, they’d each account for 20%, etc, of course 1 file might be 20MB and another 50KB,
another option is to pre-code the expected size, then using the SceneLoader onProgress event to calculate a %.

but to my knowledge, this is a tough area to make dynamicly.

3 Likes