The need for a "How to clean things up" section of the docs

Discussion
, , ,
1

I’ve opened a couple threads on cleaning things up:

But my thought is that in general the Three.js docs need a “How to clean things up” section, as it isn’t totally clear when/how to do it, and when not to do it. It’s easy to miss it, and perhaps leak.

So, just jotting down some ideas:

In this section, it’d be nice if it can talk about patterns (f.e. when to clean up), not just how. F.e.

  • Make a texture, keep track of all instances that use it, call dispose when you have no more instances using it. (code example here)
  • similar with materials
  • similar with geometries

Also, not just when to clean up, but when not to clean up. F.e.

  • Using an MTLLoader, don’t just dispose every material of each Mesh you no longer need if they share the same material, otherwise this cost CPU time to unload the material only to have it re-loaded by the renderer on the next render.

etc.

1 Like
2

Related

3

@Mugen87 I stumbled on another issue regarding cleanup. ImageLoader never calls Cache.remove, only Cache.add:

So now if I am done with a texture, I have to dispose the texture, then figure out how to clear the image from the cache as well. This is difficult enough already, but if I dispose the texture before the texture is loaded, I’ll have to figure out how to hook into the load process to wait until the image is loaded in order to finally clear the image.

This could get ugly!

Also, it’s very easy to miss, and I bet people leak this stuff all the time.

1 Like
4

First, the global THREE.Cache is disabled by default. Second, you can clear the Cache by yourself via THREE.Cache.clear() or remove individual items via THREE.Cache.remove().

Besides, disposing a texture means to delete a WebGLTexture object via WebGLRenderingContext.deleteTexture() and remove related properties from the renderer. This does definitely work even with a cached image.

When a texture is disposed, three.js does not remove the image from cache since it could be the data source for another texture. For now, it’s the responsibility of the app to keep track of the image usage.

There is a callback Texture.onUpdate() that is fired when the texture was specified via WebGLRenderingContext.texImage2D() and thus uploaded to the GPU. Try to use this callback in order to perform your clean up tasks.

1 Like
5

Cool, thanks for the feedback! It’s exactly these sorts of things that the docs need, and I bet there’s more.