How to dispose scene.background with WebGLRenderTarget

Questions
1

I am creating scene background by

this._scene.background = new THREE.WebGLCubeRenderTarget(
      512,
      {}
    ).fromEquirectangularTexture(this._renderer, texture);

Works fine, but later on I am dynamically changing textures for this background. At first I try to dispose it by calling:

this._scene.background.texture.dispose();

this._scene.background.dispose();

And then again fromEquirectangularTexture with the new texture.

It is working, but problem (a big one) is that background textures are not disposed. Leading to memory leaks and crashes. I can see it in renderer.info as well as in plain memory going up.

I tried variuos order of dispose call to .background and .background.texture, but no luck.

Any advice? Thanks a lot.

2

It should be:

this._scene.background.dispose();
this._scene = null;

However, Scene.background does support equirectangular env maps since r120. Meaning it’s sufficient to do:

texture.mapping = THREE.EquirectangularReflectionMapping;
this._scene.background = texture;

If you don’t need the texture anymore, use texture.dispose(). A related memory leak was fixed in the current dev version (see, https://github.com/mrdoob/three.js/pull/20439). The next release (r122) will contain this patch.

Can you please try if the memory leak is still present with the latest dev version of three.js using the new approach (not using fromEquirectangularTexture())? Builds are available here.

3

Thanks Mugen.

But how should I specify when doing
this._scene.background = texture;
that it is an equirectangular texture? As when I do just

let texture = THREE.TextureLoader().load(url,
  (texture) => {
       this._scene.background = texture;     
  }
);

then it is just a plain background image, not cubemap

4

Sorry, I’ve forgot to mentioned that you have to do this:

texture.mapping = THREE.EquirectangularReflectionMapping;

Like in: https://threejs.org/examples/webgl_materials_envmaps

5

Awesome. Thanks a lot.

So recap:

I replaced fromEquirectangularTexture to plain

let t = THREE.TextureLoader().load(url,
  (texture) => {
    texture.mapping = THREE.EquirectangularReflectionMapping;
   this._scene.background = texture;     
  }
);

When using r121.1, problem with memory still persist. Using dev build from your link fixes this and background textures are disposed correctly now.

Thanks one more time

1 Like