Loading a new CubeTexture freezes the engine on v4

Questions
1

Hi guys,

In my application, I have an env texture stored in my scene object:

this.scene.envTexture = new BABYLON.CubeTexture(App.url + '/objects/skybox/' + skybox + '/skybox', this.scene);

And then I use this texture as reflection texture in my skybox and PBR materials:

// My skybox material
hdrSkyboxMaterial.reflectionTexture = this.scene.envTexture;

// My PBR material
wood.reflectionTexture = this.scene.envTexture;

But whenever I change the env texture the engine freezes until the change ends (1 to 5 seconds). The textures are only 180kb total and the HTTP request for loading them only lasts a few milliseconds.

I have another old application that uses Babylon v2 and it never freezes to load a new CubeTexture (detail: this old app does not use PBR).

Is there a way to avoid this behavior in v4?

Thanks for helping!!

EDIT: This is the code I’m calling to change the skybox material after loading the CubeTexture. This is basically the same on both applications:

        if(this.skybox.material) {    
            this.skybox.material.dispose(false, true);
            this.skybox.material = null;
        }

        let hdrSkyboxMaterial = new BABYLON.PBRMaterial('skyBoxMaterial', this.scene);
        hdrSkyboxMaterial.backFaceCulling = false;
        hdrSkyboxMaterial.reflectionTexture = this.scene.envTexture.clone();
        hdrSkyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
        hdrSkyboxMaterial.microSurface = 1.0;
        hdrSkyboxMaterial.disableLighting = true;

        this.skybox.material = hdrSkyboxMaterial;

EDIT2: I tried the CubeTexture OnLoad parameter, but it still freezes the application.

2

You are not using an env texture at all but just a simple cubemap meaning the pbr material (requiring pre processed hdr textures) needs to do way more work at run time.

So either you load all the textures upfront and so, only the first application load will have a hit but it might be a big one depending on the texture size (4k, 1024…) and not directly the file size.

Or you use real environments with pre processed textures: Use a HDR environment (for PBR) - Babylon.js Documentation

Or you can fake the textures harmonics, which are the slow part to generate: texture.sphericalPolynomial = new BABYLON.SphericalPolynomial();

I would really consider in your case pre processed textures as the best option if you also care on enhancing your overall scene visual quality.

1 Like
3

Hi @sebavan, thanks for responding… I removed all meshes and PBR materials keeping only a simple skybox in my scene an it still freezes when I try to create a new CubeTexture.

I have 500x500 jpg textures.

As I was recreating the pbr materials inside onLoad (with a console.log to check when onLoad is called), I think what is freezing is the “new CubeTexture” command. Seems like that recreating the pbr materials was fast than preparing the textures.

Does it make sense for you? Could I be doing something wrong?

Thanks man

4

it does not really :slight_smile: is the new texture freezing or is the shader compilation freezing once the texture is ready.

We would need a repro in the PG to troubleshoot.

1 Like
5

Thanks man, I’ll do it

6

Hi @sebavan, here is the playground: Babylon.js Playground

I added a button to change the background.

7

You are still relying on PBR in you example :slight_smile: which explains the freeze, could you create an example without it ?

8

And if you follow the recommandation from upper you ll see it does not appear:
https://www.babylonjs-playground.com/#D9FPG1#1

9

Hi @sebavan, sorry I did not noticed that the skybox is a PBR material too… my bad, sorry for bhotering you with it :sweat_smile:

10

no problem :slight_smile:

1 Like