07. Creating a Custom Loading Screen in BabylonJS

Loading screens provide useful feedback to let people know that a scene is loading. They also work to hide the "building process" of your scenes until you're ready to display them.
In this video, we'll look at implementing a few different loading screens. First with the default BabylonJS loading screen then we'll dive into creating a customized loading screen.
Since these loading screens rely on the HTML/CSS side of things we'll be working within the Vue components to set things up. By the end of this video, you'll know how to create a dynamic loading bar-style loading screen along with a simple animated loading screen (which has been provided).
Github Code Repository (07_Custom_Loading_Screen): github.com/Babylon-Projects/B...
BabylonJS: www.babylonjs.com/
Chapters:
0:00 Intro
0:25 Scene Overview
1:32 BabylonJS Loading Screen
2:50 Implementing ILoadingScreen Interface
5:33 HTML Loading Screen Setup
7:13 Updating Constructor HTML Elements
8:10 Adding Custom Loading Screen Instance
9:06 Updating Custom Loading Screen Logic
12:00 Grabbing HTML Elements in Vue
13:10 Changing BabylonJS Engine Loading Screen
14:00 Preview Custom Loading Screen
14:44 Using Import Mesh OnProgress
16:17 Adding updateLoadStatus method
18:02 Preview Dynamic Loading Screen
18:17 Adding Display None with setTimeout
20:05 Vue Specific Loading Screen
24:12 Utilizing LoadingScreen Vue Component
26:02 Passing Function into Custom Loading Constructor
28:13 Preview Animated Loading Screen
#babylonjs #loadingscreen #tutorial

[@demetreguruli]

whoever had evt.total value 0 problem, please note that if you try to set loading screen progress to load external object, like a .glb file from an external website and not your own computer, it will calculate all the values correctly.

[@henrycase9643]

I also got the evt.total being zero, then referred to the documentation at doc.babylonjs.com/divingDeeper/scene/customLoadingScreen to solve it. Looks like the model I wanted to use did not have its lengthComputable.

[@thanhtuduong7987]

Does anyone have the problem that when the loading is finished, the scene doesn't appear and have to resize the browser for it to "magically" appear?