Performance Issue Upon Clearing and Regenerating Scene (Heap Size, Event Listener, and Node Increase)

[c0d3ster]

Hello everyone, I have been working on a configurable audio reactive visualizer for a while now, and have come to the point where I have some issues with performance that I’ve yet to identify the cause of. The name of the application is Fractaleyez; all the code is open source and can be found here for reference. The application is integrated with React for all the UI elements to adjust the visualization. The data is taken from React state and fed to the three.js canvas on each animation frame. Most of these adjustments can be made in real time with minimal visual disruption to the scene; however, the Particle Config category requires that the scene be deleted and regenerated with entirely new particles. This is where I’m seeing the biggest performance hit. I ran the performance monitor Chrome tool on my production build over 15 seconds to illustrate various cases. The first 5 seconds always consisted of a fresh instance with no interaction. Every test case had Emancipator’s newest album, Mountain of Memory, playing in the background.

The first test consists of visuals running on their own in default mode with no interaction.

The second test consists of visuals running with adjustments to categories other than Particle Config.

The third test consists of changes to Presets only.

The fourth test consists of major adjustments to Particle Config.

The final test is a 60 second run where I was adjusting the Particle config more heavily.

As you can see, the performance oftentimes gets cleaned up by the garbage collector but there are times when the application will crash instead or perform poorly until restarted. You can also see that the number of nodes and heap size steadily increases despite any garbage collecting. I have attempted to clear the scene here and reset the visualization here, but I’m not sure if I’m doing everything properly. I would appreciate any help on this as I’ve spent a lot of time working on this project, but I am by no means an expert with Threejs. I’m open to questions or advice on any part of the application; my goal is to make this visualizer easy enough for anyone to pick up and use and flexible enough to create custom visual sets for more advanced VJs.

Thanks in advance for anyone who took the time to read and process all this info!

[Usnul]

Garbage collection is the answer. The more garbage you generate - the worse your performance will be. GC is not a magic bullet, it doesn’t just sit there and take care of your garbage quietly, it creates some of the worst FPS drops and performance degradation.

I have 0 knowledge of the linked library, so I don’t know where the allocations are being made. You might want to look into object pooling and into “hidden” allocations associated with using JS, such as “Array.map” function or nested functions, these are less obvious things. I am willing to bet, however, that your problems are much more obvious.

I find firefox tools to be much better for memory profiling.

[c0d3ster]

Hi Usnul, I appreciate the quick response. I will try to use Firefox tools to see if I can gain any new insights, but I’m mostly just having a hard time figuring out where those allocations do occur and if there’s a way to optimize them. It’s obvious to me that there is some problem with my scene regeneration code, but I haven’t deciphered where that memory leak occurs. The primary issues at hand during scene regeneration along with the questions I’m hoping to answer are:

1. The Heap size and # of Nodes increase greatly over time (is this normal or an indicator of a memory leak?)
2. Unnecessary duplication of click listeners that occurs when regenerating the scene from scratch (where is this occurring and why?)
3. Adjustments to the particle config cause a visual disturbance to the viewer (is there a way I can fade out the previous scene and fade in the new scene?)

I would think there are some threejs experts out there who could easily pick out where my mistake is by looking at the code and these performance profiles. Thanks again for taking the time to respond, any advice is helpful advice.

[indivisual]

dude!
what a nice idea!
i’ve done something like this also:

GitHub - indivisualvj/indivisual: indivisual - VJ-Synthesizer

even used it on 30-40 live gigs …

i also have major issues with fps drop when clearing a scene…

[c0d3ster]

oh dang, I love your project. I’m actually trying to get a logo config set up that would be similar to what you have. Shoot me an email @ cody.douglass@hotmail.com, we should link up and collaborate!