I want to add loading until hdrbox is fully rendered

Questions
1

i want to add loading until hdrbox is fully rendered it is size is 24 mb
const createSky = (scene: Scene, textureSrc: string) => {
const skydome = MeshBuilder.CreateBox(
“sky”,
{ size: 400, sideOrientation: Mesh.BACKSIDE },
scene
);
skydome.position.y = 200;
skydome.isPickable = false;
skydome.receiveShadows = true;
const sky = new BackgroundMaterial(“skyMaterial”, scene);
sky.reflectionTexture = new HDRCubeTexture(textureSrc, scene, 1024);
sky.reflectionTexture.coordinatesMode = Texture.INVCUBIC_MODE;
sky.enableGroundProjection = true;
sky.projectedGroundRadius = 30;
sky.projectedGroundHeight = 3;
skydome.material = sky;
skydome.isPickable = false;
// skydome.ignoreCameraMaxZ = true
// skydome.infiniteDistance = true // this may clip scene meshes when Camera zooms out
return skydome;
};

2

You could use the Texture.onLoadObservable observable to remove the loading screen. You could also try scene.executeWhenReady instead, which will be triggered when the scene is ready to be rendered.

3

i have function to change hdr texture i want to display loading until new texture is fully rendered

4

How do you change the hdr texture? If you recreate a new Texture instance, you can use the onLoadObservable observable. If you use updateURL, you can pass a onLoad callback (3rd parameter) where you can hide the loading screen.

5

this is how i change i don’t create new texture


 if (skydome.material) {
        textureLoading.value = true;
        const skyMaterial = skydome.material as BackgroundMaterial;

        textureLoading.value = true;

        let cachedTexture = scene.textures.find(
          (tex) => tex.name === newTexture
        );




        if (!cachedTexture) {
          cachedTexture = new HDRCubeTexture(
            newTexture.file_path[0],
            scene,
            512,
            false,
            false
          );
          skyMaterial.reflectionTexture = cachedTexture;
        }

        skyMaterial.reflectionTexture = cachedTexture;

        // skyMaterial.reflectionTexture.coordinatesMode = Texture.SKYBOX_MODE;
        // skyMaterial.enableGroundProjection = true;
        // skyMaterial.projectedGroundRadius = 20;
        // skyMaterial.projectedGroundHeight = 3;

        createHDRLighting(scene, newTexture.file_path[0]);
        let isTextureApplied = false;

        scene.onAfterRenderObservable.add(() => {

          if (!isTextureApplied) {
            isTextureApplied = true; // Mark that the texture has been applied
            textureLoading.value = false; // Set loading to false
          }
        });
      }
6

I see you do new HDRCubeTexture(...), so you create a new texture?

1 Like
7

yes i do
how to know if this HDRCubeTexture is fully rendered so i can add loading screen

8

You can do:

cachedTexture.onLoadObservable.add(() => {
    // texture is loaded
});