Weekly Video: Creating a Custom Loading Screen

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!

8 Likes

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

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

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

Thanks for links.

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

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

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

load

2 Likes