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.
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!
Had the same problem, and still don’t know though If it’s possible to animate a line2 with more than 2 points, or even with a dynamically assigned new set of points each frame. It feels like this should be a basic feature but drawing a visible line on the screen that animates by growing, distorting, translating and changing width each frame seems to be impossible. Am I right?
Oh wow thanks for the quick response. Well the code is a bit big, but essencialy I’m creating a small particle system and I want to animate the field lines wich move them using some lines. I was initially following this known article Three ways to create 3D particle effects (with React Three Fiber) since my goal Is quite similar to what they did here Advance (move) a line. But MeshLine is a third party package that is even no longer supported, and in searching for the line width problem I discovered line2 hidden in threejs. So I did it, and It was beautiful, but then I realized the memory leak issue when my computer froze not long after. I tried various things to locate and then correct the problem but the latter with no success.
