I am in the process of developing a fairly straightforward Three.js Application.
Overview: The concept involves navigating with your camera along a path through a virtual "world". This world consists entirely of basic Sprites with SpriteMaterials adorned with transparent textures. These textures essentially consist of GIF images with alpha transparency.
The entire application is functioning smoothly and the performance is commendable. I have minimized the camera depth to render objects only in close proximity, enhancing efficiency.
However, I am encountering an issue where the memory usage is escalating significantly (exceeding 2GB) due to the multitude of textures being used. Despite reusing Texture/Material references for identical elements within the scene (such as trees and rocks), the memory consumption continues to rise.
When traversing through the world, not all objects are initially visible or displayed, even though all sprites are added to the scene from the start. Upon inspection in the console, it becomes apparent that textures for non-visible objects are loaded only when progressing further into the world and new elements come into view. Consequently, the memory usage gradually climbs.
Implementing "object pooling" for constructing the world is not feasible due to its specific layout constraints.
In order to test this scenario, I incorporated a function that removes objects from the scene and disposes their material.map once the camera moves past them:
this.env_sprites[i].material.map.dispose();
this.env_sprites[i].material.dispose();
this.env_sprites[i].geometry.dispose();
this.scene.remove(this.env_sprites[i]);
this.env_sprites.splice(i,1);
This method effectively triggers garbage collection and releases memory. However, the challenge arises when moving back with the camera - the Sprites must be readded to the scene and the materials/textures loaded again, which poses a considerable strain on performance and seems inefficient.
Are there established techniques to address such a setup in terms of memory management and the process of removing and adding objects and textures (in the same location)?
I trust that I have sufficiently articulated the problem at hand.
Here is a visual representation of the "World" for reference: