Memory usage increases upon loading model

Questions
1

Hi,

I’m loading gltf models continuously when I check the memory usage by hovering the chrome tab it is very high.
I tried disposing of the objects by following the documentation but there is not much improvement.

memorysnapshot
memorysnapshot1920×977 71.9 KB

memory usage

The first image is the memory snapshots I took, the first snapshot is before reloading the page. the second is the memory usage. the last snapshot is after calling the dispose function.
the second image is memory usage of the chrome tab.
I am not sure whether these two images have any relation or this occurs from three.js but I wanted to check if anyone has any idea about this.

The disposal function is given below:

function disposeObject(object){
  object.traverse(mesh=>{
    if(mesh.isMesh || mesh.isLine || mesh.isCSS2DObject || mesh.isLight){
      mesh.geometry?.dispose()
      if(mesh.material?.length>0){
        mesh.material.forEach(item=>{
          item?.dispose()
        })
        mesh.map?.dispose()
      }else{
        mesh.material?.dispose()
      }
      mesh.clear()
    }
  })
}
function clearScene() {
  disposeObject(scene)
  disposeObject(model)
  disposeObject(camera)
  scene.clear()
  model.clear()
  controls.dispose()
  renderer.clear()
  model = undefined
}

my three.js version is 148. will updating the three.js version help?

Thanks,
Binoy

2

dispose disposes only the resources allocated on the GPU. You seem to be having a CPU memory leak - ie. you’re storing the references to loaded objects somewhere in the memory, preventing garbage collector from throwing them away. You can expand the trees in the memory snapshot to find the specific reason behind the memory leak.

(On a side-note - you can use dispose only after you remove the element from the scene. If you call dispose, but the objects are still in the scene - it won’t do anything.)

2 Likes
3

@mjurczyk Even after disposing of the geometries and materials after removing the meshes mesh objects with geometry and material remain.

image
image1530×630 53.2 KB

4

Disposal does not have anything to do with the memory you’re looking at. Dispose disposes assets from the GPU. The memory snapshots you’re sharing are CPU memory / JS heap stack.

  1. Make sure you’re not storing your meshes in any arrays, besides scene.children (I mean, you can and often need to, but you have to remember to remove the meshes from said arrays - otherwise they remain in memory forever.) Meshes stored in arrays that are used during the runtime will not be removed from memory until the mesh is removed from said array.
  2. Make sure you’re not assigning meshes as properties of other meshes / objects - ex. object.characterMeshRef = myMesh - this mesh will not disappear from the memory until you unassign it from that property - ex. object.characterMeshRef = null.
  3. Do not console log stuff when measuring the memory. References expanded in the console remain in-memory.
1 Like
5

@mjurczyk

  1. I had an array of meshes but I added it to the disposal function and set the length of the array to 0.
  2. Are you asking that if I am assigning the mesh to a variable?
  3. I have a warning for every mesh I load
THREE.GLTFLoader: Missing min/max properties for accessor POSITION.

other than that nothing is in the console.