Memory leak caused by non disposed scene, when using routes

[fakedob]

Memory leak caused by non disposed scene, when using routes

[alvarosabu]

Thanks for raising this @fakedob I will take a look to it 🙏🏻

[alvarosabu]

@fakedob can you confirm for me this is only happening with 3D models? If you use geometries with textures you get the same result? Just to narrow down I'm doing some tests currently

[alvarosabu]

Hey @fakedob so we still investigating, we did some improvements but the issue of memory allocation not being released on route change is still there and it doesn't seem trivial. I will get back to you as soon we have news. Sorry

[Sea-DH1]

Hey @fakedob so we still investigating, we did some improvements but the issue of memory allocation not being released on route change is still there and it doesn't seem trivial. I will get back to you as soon we have news. Sorry

I think this method can be used to create a calling method inside the primitive and call it directly when the scene is destroyed.
https://threejs.org/manual/#en/cleanup

[fakedob]

Hey @alvarosabu sorry for delay, I wanted to be sure I test it properly before replying. I have loaded the test with the house and graves into a page for this test and went in and out using the router. The result is the same, basically, it loads the assets and does not dispose them upon leave, leading into 1.5mb left into memory.

I have checked the commit in the pull request and understood, that you are trying to dispose some of the objects while traversing the main one. Have you looked into this thread and proposed solution?

[alvarosabu]

Hey @fakedob I just tried the solution they provided but I am having trouble measuring the before and after, looking at the total allocated size remains similar but then looking for specific classes inside they are removed when dispose of.

How do you check if the geometries, materials, and textures have been properly disposed of and free out of memory?

[alvarosabu]

Investigating a little I saw this explanation @fakedob https://discourse.threejs.org/t/memory-usage-increases-upon-loading-model/58846/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.

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.
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.
Do not console log stuff when measuring the memory. References expanded in the console remain in-memory.

[alvarosabu]

Hi @yyx990803 thanks for offering your help. Just added you here for proper context

When using v-if on a component belonging to the Tres custom renderer, the remove method of the nodeOps.ts is called and the properties like geometry and material are disposed from GPU and removed from memory (CPU) https://github.com/Tresjs/tres/blob/bugfix/449-memory-management/src/core/nodeOps.ts#L184-L195

Memory.diposal.v-if.mp4

When navigating to a new route, remove method is not called (I guess that's expected) but the onUnmounted method of the <TresCanvas /> (the component responsible for rendering the tres custom renderer) is being called, however, for some reason by manual disposing of the scene (similar to what happens inside the remove method) doesn't seem to free the references of the properties on the memory.

Memory.disposal.vue-router.mp4

My rough guess is that they continue being referenced on the custom renderer and that's why the garbage collector cannot free them but I'm not sure of this. No idea how to "dispose" the custom render.

Here is a reproduction link https://stackblitz.com/edit/tresjs-basic-ejbcex?file=package.json,src%2Fmain.ts,src%2Fpages%2Findex.vue,src%2Fpages%2Fempty.vue,src%2Fstyle.css

To debug maybe is gonna be easier to clone https://github.com/Tresjs/tres/tree/bugfix/449-memory-management and run the playground npm run dev and go to /perf/ route.

Thanks again 🙏🏻

[fakedob]

Thank you so much for your help guys, I will try this method and hope it will do the trick. Temporarily, as a workaround, I am loading a separate page into an iframe and control it via post messages. It is very limiting approach, but at least it doesnt crash the web app on mobile.

I will let you know how does it behave when calling the cleanup method asap.