Out of control memory when updating position of lines within animate function

Hello, I was wondering if the following problem is a result of user error or if it is a bug. When updating the position of fat lines from the Three.js examples in the onAnimate callback, memory usage in Firefox constantly increases before eventually crashing the tab. This occurs even if only a single line’s position is updated and if the position is never actually changed. Adding more lines increases the rate of memory usage accordingly. Here is a JsFiddle demonstrating the problem:
https://jsfiddle.net/IdreesInc/8xgyf1tm/8/
In Chrome the tab does not crash, but the memory still reacts oddly. It will quickly increase until it reaches a point before jumping back down again and repeating the process. This reminded me of how the Java garbage collector responds to an excessive amount of objects being created and destroyed consistently, eventually needing to run a “stop the world” collection. I’m not sure how JavaScript garbage collection works, but if it is similar then perhaps too many objects are being created when the position changes?
Am I meant to be doing something different in this instance, such as updating object positions outside of the animation loop? The reason I want to update the positions so often is because I am using fat lines to connect moving points. I appreciate any guidance, and let me know if I should provide more information!

EDIT:
I’ve now found that even updating the position of normal lines causes the memory to runaway, meaning that I am most likely doing this incorrectly. JSFiddle here: https://jsfiddle.net/IdreesInc/L8gm01s3/3/
If anybody knows why my setup is causing memory to grow out of control, I’d appreciate any pointers!

You constantly create new objects in the animate function.


 // Commenting out this line prevents the memory from increasing
      renderedLine.geometry.setFromPoints([new THREE.Vector3(0, 0, 0), new THREE.Vector3(10, 0, 10)]);

You can reuse a Vector3 by assigning new component values x, y, z.

renderedLine.geometry.setFromPoints([{x:0,y:0,z:0},{x:10,y:0,z:10}]);

That’s how .setPositions() works: three.js/LineSegmentsGeometry.js at 380f0f63e27753f7a34ef2be836db09f1f9963f4 · mrdoob/three.js · GitHub
It doesn’t update the existing attributes, it creates new ones.

A quick example, with updating of positions: Three.js Fat Line Runaway Memory - JSFiddle - Code Playground

1 Like

Thank you all! Never would’ve guessed that it was the vector objects causing the memory growth, especially since “only” a few hundred were created every second. And thanks @prisoner849 for the jsfiddle demonstrating how to do things correctly!

1 Like