Memory leak

[gitgitwhat]

I don't think this is a 3d-force-graph issue but probably more of an underlying three.js one however I'm hoping you can offer some advice. I notice that if I let my auto-updating graph run, eventually I run out of RAM. The browser memory footprint gets so large that it crashes. I've tested this in both Firefox and Edge. I know Javascript is supposed to have garbage collection but something is being held on to cause the memory to just increase. Any thoughts?

[vasturiano]

@gitgitwhat thanks for bringing this up. I think the issue is when removing objects from the scene, three.js doesn't fully liberate the memory. I've added a few dispose instructions when cleaning the scene which I believe will help with the GC.

Please try it (v1.31.1) and let me know if you notice an improvement.

[gitgitwhat]

There seems to be an improvement but still a leak. It takes a little longer to increase but it still steadily goes up. I'm curious if adding new objects to a group via .nodeThreeObject() is an issue. I'm going to do some tests and try to isolate the possible leak and let you know.

[vasturiano]

Ok, please let me know. I'd be curious to see if not using a group in nodeThreeObject affects this.

I've also tried running a series of update cycles with the scene.add statements commented out in three-forcegraph and the memory space appears to remain constant then, hinting to the pattern of adding/removing objects from the scene as the probable main source of the leak.

[gitgitwhat]

It seems that if you add anything to the group beyond the mesh then you have the leak. The more objects you add to the group causes the memory to increase faster. This seems to be the case with both Group and Object3D as the containers.

var sphere = new THREE.OctahedronGeometry(15, 0);
var lambert = new THREE.MeshLambertMaterial({ color: gUnc, transparent: true, opacity: 0.75 });
var mesh = new THREE.Mesh(sphere, lambert);

var sprite = new SpriteText(text);
sprite.color = gUnc;

var group = new THREE.Group();
group.add(mesh);
group.add(sprite);

[gitgitwhat]

I know you are busy @vasturiano but have you had any luck in figuring out this leak? My JS skills aren't that great and haven't been able to identify what's going on.

[vasturiano]

I haven't had the chance to look deeper into this @gitgitwhat. The object renderer is deallocating groups recursively here. I was hoping that would fix all the leaks, but it seems there's still something left, possibly internally to ThreeJS.
I might chase this down sometime, but can't say when I'll have the opportunity. Having said that, if you do get to the bottom of it, I'd be curious to know what's causing it. :)

[mys]

@gitgitwhat from my observations it is best to load all nodes/links at once. As You said every new addition does redraw rest of objects leaving some leaks.

Second; SpriteText allocates much memory itself. Eg. Group with SpriteText takes 3x more memory than without it.
To reduce this a little I have lowered down font resolution from 90 to 24 but it still eats much RAM.

[guangyan-zhou]

I was wondering if there is any good solution to the memory leak issue since then?

[benderlidze]

any updates on this?
when I use
Graph.graphData(newData);
it increases the memory heap twice. Any way to clear previous data?

[guangyan-zhou]

I have solved this issue by attaching my objects to node.__threeObj; using three.js syntax.

[benderlidze]

@zzggyy1 Hi, thanks for the answer.
But could you explain it? Any example?

[guangyan-zhou]

Iterate through nodes and attach a three.js object to each of them.

 var nodes_num = Graph.graphData().nodes.length
        for (var i = 0; i < nodes_num; i++) {
            var node = Graph.graphData().nodes[i];
            var obj = node.__threeObj;
            var material;
            var spritex;
                var path = '../resources/images/' + "balltl.png"
                var spritex = new THREE.TextureLoader().load(path);
                material = new THREE.SpriteMaterial({map: spritex, color: node.color, fog: true, alphaTest: 0.1,
                    opacity: node.opacity,
                    transparent: true});
                var spritez = new THREE.Sprite(material);
                spritez.scale.set(node.size * 0.8, node.size * 0.8, 1);
                spritez.position.normalize();
                spritez.position.multiplyScalar(32);
                obj.add(spritez);         
        }