# Delete textures and free up memory

**URL:** <https://discourse.threejs.org/t/delete-textures-and-free-up-memory/45118>\
**Category:** Questions\
**Tags:** loaders\
**Created:** [November 25, 2022, 5:45am UTC](https://discourse.threejs.org/t/delete-textures-and-free-up-memory/45118 "2022-11-25T05:45:26Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Attila\_Schroeder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/attila_schroeder/32/36097_2.png) [@Attila\_Schroeder](https://discourse.threejs.org/u/Attila_Schroeder)\
**Post date:** [November 25, 2022, 5:45am UTC](https://discourse.threejs.org/t/delete-textures-and-free-up-memory/45118/1 "2022-11-25T05:45:27Z")

</div>

I load a class via a factory function. in the factory function i load textures and then load the texture data into an array. After that I delete the textures again to free up memory but I’m not sure if the way I’m doing it is right because I would expect to see more free ram

```javascript
static async init(params) {
   let map;
   const sharedBufferMaps = [];
				
   map = await new THREE.TextureLoader().loadAsync('./resources/maps/10k-Q1.jpg');
   sharedBufferMaps.push(utils.GetImageDataArray(map.image));
   map.dispose();
   map = await new THREE.TextureLoader().loadAsync('./resources/maps/10k-Q2.jpg');
   sharedBufferMaps.push(utils.GetImageDataArray(map.image);
   map.dispose();
   map = await new THREE.TextureLoader().loadAsync('./resources/maps/10k-Q3.jpg');
   sharedBufferMaps.push(utils.GetImageDataArray(map.image));
   map.dispose();
   map = await new THREE.TextureLoader().loadAsync('./resources/maps/10k-Q4.jpg');
   sharedBufferMaps.push(utils.GetImageDataArray(map.image);
   map.dispose();			
	
	
   params['sharedBufferMaps'] = sharedBufferMaps;
				
   return new ImageWorker(params);	
}

```

is that correct with the dispose?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [November 25, 2022, 10:13am UTC](https://discourse.threejs.org/t/delete-textures-and-free-up-memory/45118/2 "2022-11-25T10:13:48Z")

</div>

First of all, it’s sufficient to create a single instance of `TextureLoader` and then reusing it.

The call of `dispose()` at that point has no effect. The method should only be used if you don’t need a texture _after it has been used for rendering_. Its primary purpose is to free GPU related data.

---

<div class="post-metadata">

**Author:** ![Attila\_Schroeder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/attila_schroeder/32/36097_2.png) [@Attila\_Schroeder](https://discourse.threejs.org/u/Attila_Schroeder)\
**Post date:** [November 25, 2022, 11:15am UTC](https://discourse.threejs.org/t/delete-textures-and-free-up-memory/45118/3 "2022-11-25T11:15:31Z")

</div>

Good objection with the instances. Is `map = null;` then the decent solution? I no longer need the textures after I have loaded their values ​​into the arrays

```javascript
static async init(params) {

   let map;
   const sharedBufferMaps = [];
   const texLoader = new THREE.TextureLoader();	
	
   map = await texLoader.loadAsync('./resources/maps/10k-Q1.jpg');
   sharedBufferMaps.push(utils.GetImageDataArray(map.image));
   map = await texLoader.loadAsync('./resources/maps/10k-Q2.jpg');
   sharedBufferMaps.push(utils.GetImageDataArray(map.image);
   map = await texLoader.loadAsync('./resources/maps/10k-Q3.jpg');
   sharedBufferMaps.push(utils.GetImageDataArray(map.image));
   map = await texLoader.loadAsync('./resources/maps/10k-Q4.jpg');
   sharedBufferMaps.push(utils.GetImageDataArray(map.image);
   map = null;			
	
	
   params['sharedBufferMaps'] = sharedBufferMaps;
				
   return new ImageWorker(params);	
}

```

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [November 25, 2022, 12:12pm UTC](https://discourse.threejs.org/t/delete-textures-and-free-up-memory/45118/4 "2022-11-25T12:12:14Z")

</div>

i don’t think it makes a difference. map will be flagged to the GC after it leaves the init function scope.

the only fault i see is waterfall loading, this will make loading three times longer than it could be.

this will load the textures in parallel:

```javascript
static async init(params) {
  const loader = new THREE.TextureLoader()   
  const sharedBufferMaps = await Promise.all(["Q1", "Q2", "Q3", "Q4"].map(async (name) => {
    const texture = await loader.loadAsync(`./resources/maps/10k-${name}.jpg`)
    return utils.GetImageDataArray(texture.image)
  }))				
  return new ImageWorker({ ...params, sharedBufferMaps })
}

```

ps, `params['sharedBufferMaps']` seems like an anti pattern. a function should best not mutate parameters. i don’t know what `params` is or where it comes from but it’s generally a good idea to keep functions pure.

---

<div class="post-metadata">

**Author:** ![Attila\_Schroeder](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/attila_schroeder/32/36097_2.png) [@Attila\_Schroeder](https://discourse.threejs.org/u/Attila_Schroeder)\
**Post date:** [November 25, 2022, 1:52pm UTC](https://discourse.threejs.org/t/delete-textures-and-free-up-memory/45118/5 "2022-11-25T13:52:56Z")

</div>

Your version is much more elegant than mine, I like it. Is `const texture` empty afterwards? I no longer need the textures after their values ​​are in the sharedBufferMaps and that’s why I want to free the memory from the textures

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [November 27, 2022, 8:13pm UTC](https://discourse.threejs.org/t/delete-textures-and-free-up-memory/45118/6 "2022-11-27T20:13:56Z")

</div>

like @Mugen87 said, calling dispose in that context has no effect. “texture” is only valid inside a scope, you don’t need to do texture = null in javascript, GC will clear it.