Memory leak issue in chrome

Questions
, , , ,
1

I need to create a THREE.Group containing ~600 object. The objects inside this group need to be recreated with a high frequency. I’ve a method that propulate the group, and a method that reset the group. The method that reset the group is this:

reset(){
    for (var i = this.group.children.length - 1; i >= 0; i--) {
        this.group.children[i].material.map.dispose();
        this.group.children[i].geometry.dispose();
        this.group.children[i].material.dispose();
        this.group.remove(this.group.children[i]);
    }
    console.log(this.objects.length); 
    this.objects = [];
}

the generate method is something like this:

function generate(tot_petals, params){
    for (var i = 0; i< tot_petals; i++) {
        let strategy = this.strategy.get(params); // this method just return a material and a geometry
        let object = new THREE.Mesh(strategy.geometry, strategy.mat);
        strategy.geometry.dispose();
        strategy.mat.dispose();
        this.objects.push(object);
        this.group.add(this.objects[i]);
   }
}

the method this.strategy.get(params); is not creating a new geometry and a new material everytime it gets called, it is simply picking a material and a geometry from a materials array and geometries array, depending on certain conditions

In chrome I can see a memory leak

52

In Firefox it goes better, the memory it is increasing, but nor as regularly as in chrome, probably because of the differences in the garbage collector between the two browsers.

45

My question is, what is the proper way to dispose objects that are part of a group?
I had a look at this example, https://threejs.org/examples/#webgl_test_memory, but it did not solve my problem.

2

Is my question clear enough?

3

Your memory usage is very low - it’s possible that the garbage collection is just not being called until the memory usage gets higher. Does it keep increasing to the point that performance is affected?

4

Yes :wink: Actually it grows until 250 MB and even more if I keep the browser window open.

5

Do you see something wrong in the way I’m disposing the objects? I’m not removing the main group from the scene because I need to repopulate it with new objects (THREE.Mesh, to be precise) shortly after.

6

Is it possible you have other maps on mesh? You need to dispose of every last map that the mesh being disposed is using. This includes any bumpMap, envMap, metalnessMap, roughnessMap, aoMap, etc, etc. In other words, you can’t just use this.group.children[i].material.map.dispose(); if you have other maps beyond “map” (diffuse/color/albedo).

7

You should probably implement a pooling technique (reuse of objects, avoid new instances by calling “new”)

8

@Fyrestar I would have used object pooling, but I need to recreate a different geometry everytime generate gets called.
@FrankSilvaHM I’ve added the call to remove the other textures as you were suggesting (alphaMap, normalMap and specularMap). I think that there is some small improvement in firefox, where it looks like there is absolutely no memory leak

00

In chrome, the problem is still there.

55

9

By the way, have you tried with the latest dev version of three.js? There have been some reports of memory leaks on github recently which I think have been fixed.

10

good spot @looeee, I’m looking into this issue


probably version 0.87.1 fixes the problem. I will try this evening and let you know.
Is it possible to install the last dev version of threejs as an npm package? just to test it put quicly without changing the build

1 Like