Weekly Video: Creating a Custom Loading Screen

Announcements
1

Hey All! Happy Friday. Weekly video time!!! This week @PolygonalSun wanted to answer a question that came directly from you, the community!..How do you create custom loading screens with Babylon.js?

Enjoy!

9 Likes
2

As usual. Luv this. Someday will use…

Funny btw. Like your style. @PolygonalSun

“Do_we_have_a_div?”

Link to PG pls?

Nevermind. Found LINK in PG Search: https://www.babylonjs-playground.com/#HQTWIG#4

Piece of cake.

Thx,

:eagle:

1 Like
3

The playgrounds are generally always available in the Youtube description…but here are the two from the video:

https://playground.babylonjs.com/#5Y2GIC#38

https://playground.babylonjs.com/#HQTWIG#4

1 Like
4

aFalcon does not find links in description, but that is ok, because PG search rocks it!

Thanks for links.

5

how can show progress percent in loading screen similar sponza demo?

sponza
sponza1275×665 200 KB

6

Sorry I don’t have a PG to hand but here’s roughly how I do it using AssetsManager.onProgress() with either the default Babylon.js loading screen or a custom loading screen built with HTML & CSS:

this._assetsManager.onProgress = (remainingCount, totalCount, lastFinishedTask) => {
    const loadedCount = totalCount - remainingCount;
    const percentLoaded = Math.round(loadedCount / totalCount * 100) + '%';
    const commonLoadingText = `Loaded ${loadedCount} of ${totalCount} assets`;

    // Log verbose loading text.
    console.log(`${commonLoadingText} (${percentLoaded}) "${lastFinishedTask.name}"`);

    // Update default loading text.
    this._engine.loadingUIText = commonLoadingText;

    // Update custom loading text.
    el = document.getElementById("loading-text");
    el.textContent = commonLoadingText;

    // Update custom loading percent.
    let el = document.getElementById("loading-progress-bar");
    el.style.width = percentLoaded;
    el.textContent = percentLoaded;
};

this._assetsManager.onFinish = (tasks) => {
    console.log('Loading finished');
};
3 Likes
7

loading screen with progress percent solved :
https://playground.babylonjs.com/#5Y2GIC#120
what is your opinion?

load

2 Likes