Delete textures and free up memory

Questions
1

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

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?

2

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.

3

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

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);	
}
4

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:

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.

5

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

6

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.