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): https://github.com/Babylon-Projects/B... BabylonJS: https://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