Why hideLoadingUI runs when it is not called?

Questions
1

I want to create a custom Loading Page. I have 2 classes running the operation.

CustomLoading.ts

export class CustomLoading{
    scene: Scene;
    engine: Engine;
    loadingScreen: CustomLoadingScreen;
    lightTubes!: AbstractMesh[];
    models!: AbstractMesh[];
    ball!: AbstractMesh;
    
    constructor(
        private canvas: HTMLCanvasElement,
        private loadingBar: HTMLElement,
        private precentLoaded: HTMLElement,
        private Loader: HTMLElement,
        ){
        this.engine = new Engine(this.canvas, true);
        this.loadingScreen = new CustomLoadingScreen(this.loadingBar, this.precentLoaded, this.Loader);
        this.engine.loadingScreen = this.loadingScreen;
        this.engine.displayLoadingUI();
        this.scene = this.CreateScene();
        
        this.createEnvironment();

        this.engine.runRenderLoop(()=>{
            this.scene.render();
        })
    }

    CreateScene():Scene {
        const scene = new Scene(this.engine);
        
        const camera = new FreeCamera('camera', new Vector3(0,1,-8), scene);
        camera.attachControl();
        camera.speed = 0.25;

        const envTex = CubeTexture.CreateFromPrefilteredData("./environments/wide_street.env", scene);
        scene.environmentTexture = envTex;
        scene.createDefaultSkybox(envTex, true);

        return scene; 
    }

    async createEnvironment(): Promise<void> {
        const {meshes} = await SceneLoader.ImportMeshAsync("", "./models/","LightingScene.glb");

        this.models = meshes;
  
        this.lightTubes = meshes.filter(
            (mesh) =>
            mesh.name === "lightTube_left" || mesh.name === "lightTube_right"
        );
        // this.engine.hideLoadingUI();
    }
}

CustomLoadingScreen.ts

export class CustomLoadingScreen implements ILoadingScreen{
    loadingUIBackgroundColor!: string;
    loadingUIText!: string;

    constructor(
        private loadingBar: HTMLElement,
        private precentLoaded: HTMLElement,
        private Loader: HTMLElement
        ){}
    
    displayLoadingUI(): void{
        this.loadingBar.style.width = '0%';
        this.precentLoaded.innerText = '0%';
    }

    hideLoadingUI = () => {
        this.Loader.id = 'loaded';
    }
}

I don’t call hideloadingUI in CustomLoading but it still changes the id of the HTMLElement. what do you think is the problem?

2

You can see where hideLoadingUI() is called, here:

In your case it seems to be called by dispose() of Engine:

3

This might be the problem but when I use Babylon’s default loading screen, the id changes at the right time. Is there a way to disable disposing the engine from hiding loading UI?

4

I think you can just rewrite either hideLoadingUI or dispose of Engine:

engine.hideLoadingUI = () => {
   //copy from original and i.e. add a boolean
}

or

engine.dispose = () => {
   //copy from original without hideLoadingUI()
}
2 Likes
5

I believe this is the solution. I’ll try it first and mark it as the solution. Thanks

1 Like
6

You can call engine.hideLoadingUI i.e. after a promise or on scene.ready or actually anywhere in the script where it is not relying on engine creation, delay, loop or dispose. Never had an issue with that.

1 Like
7

Hello @amr-zayed just checking if you still have questions