How to clean up textureCache A-frame at current version?

Question

I'm working on a multi camera streaming application and I noticed memory usage keep increasing after switching cameras. I cleaning up on the hls.js side. But I did not see any ways to do that in a-frame. I'm using 1.2.0

I only found old post recommending
document.querySelector('a-scene').systems.material.textureCache and run .dispose()

Which looks like worked on 0.3.0 version, but not since.

Is there a way to clean up textures or is this now happens automatically?

Answer 1

Afaik the textureCache is an object that keeps promises with loaded textures (image, video).

There is a clearTextureCache function but it clears the object, without disposing the loaded textures.

I'd try iterating through the textureCache, grabbing the THREE.Texture objects and calling .dispose() on them. Then you can do clearTextureCache() to clean it up. In the below example - any click io the window will get the cached textures printed in the console:

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      window.addEventListener("click", e => {
        const textureCache = this.el.systems.material.textureCache;
        console.log("Textures in the cache:")
        for (let key in textureCache) {
          textureCache[key].then(val => console.log(val))
        }
      })
    }
  })
</script>
<a-scene foo>
  <a-image position="-1 1.6 -2" src="https://i.imgur.com/wjobVTN.jpeg"></a-image>
  <a-image position="1 1.6 -2" src="https://i.imgur.com/AD3MbBi.jpg"></a-image>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>