Reverse effects of createDefaultSkybox

Hi!

I’m creating a react component where I should be able to define a skybox and clean up once the component is removed (componentWillUnmount).

So basically I try to add a skybox and later remove it. However once I use createDefaultSkybox on the scene, some textures are being added I suppose and I’m not sure how to do proper “clean up”:

 // create
  public createSkybox(pathToEnvTexture: string) {
    this.removeSkybox();
    const { worldRadius } = utils.getWorldMeasurements(this.scene);
    const envTexture = new CubeTexture(pathToEnvTexture, this.scene);
    this.skybox = this.scene.createDefaultSkybox(
      envTexture,
      true,
      worldRadius * 30
    );
  }

 // clean up
public removeSkybox() {
    if (this.skybox) {
      this.skybox.dispose();
      this.skybox = null;
    }
}

Here is an image without skybox -> with skybox -> after removing skybox:

It’s probably because createDefaultSkybox will also create the scene environmentTexture as well.

Setting setGlobalEnvTexture to false should be enough.

https://www.babylonjs-playground.com/#K4S3GU#44

Or you can also, in you removeSkybox, set scene.environmentTexture = null

1 Like

Yeah, that solves it!

Though, perhaps I should first dispose it? like:

scene.environmentTexture.dispose()
scene.environmentTexture = null;

It looks like environmentTexture.dispose() give us an error.

But instead of use createDefaultSkybox, I think you should create manually your custom skybox, it will be simpler.

The createDefaultSkybox just create a simple cube using a cubetexture in its reflection texture : https://www.babylonjs-playground.com/#UU7RQ#244

environmentTexture.dispose() seems to work in my case :slight_smile: but if this fails in future I will probably create skybox manually.

I just remade a test, don’t know why I get this yesterday.

If you created your skybox using createDefaultSkybox, you can use:

scene.getMeshByName('hdrSkyBox').dispose()

to dispose it.