protectwise / troika

A JavaScript framework for interactive 3D and 2D visualizations
MIT License
1.6k stars 117 forks source link

Memory Issue with troika-three-text #301

Open TimJJTing opened 6 months ago

TimJJTing commented 6 months ago

It seems like there might be a memory issue caused by changing the material of the Text.

I'm attempting to incorporate some post-effects into my project, and one of them involves selective blooming for Text meshes. The usual approach for selective blooming involves rendering the scene twice. In the first render, the non-blooming objects (Text in my case) are replaced with something dark, and in the second render, the original material is restored.

I suspect that the automatically created DerivedMaterial is not properly disposed of after setting a material because I've noticed that when trying to implement this with Text meshes, the memory consumption keeps increasing until the page crashes. To be specific, the automatically created DerivedMaterial from the first render are likely not disposed during the material restoration process in the second render.

Please see codesandbox for the issue. Post-processing parts are skipped for simplicity.

lojjic commented 6 months ago

Thanks, it seems likely you're correct about disposal.

How are you measuring the memory consumption? Is this JS heap memory or GPU memory, or both?

lojjic commented 6 months ago

Not to ignore the issue, but in your specific case couldn't you just temporarily change the color to black rather than replacing the whole material?

TimJJTing commented 6 months ago

Thanks, it seems likely you're correct about disposal.

How are you measuring the memory consumption? Is this JS heap memory or GPU memory, or both?

I measure JS allocated memory with the stats component. See the top left corner in the codesandbox, the memory consumption keeps rising. Not yet sure about GPU memory though.

Not to ignore the issue, but in your specific case couldn't you just temporarily change the color to black rather than replacing the whole material?

Yes, I think this will fix my problem.

BenLune commented 2 months ago

Hi, First of all, thanks and congrats for this great lib to render text with ThreeJS!

I also have a memory leak trouble with troika-three-text. Using Memory tab on Chrome Dev Tools, I can see the memory consumption increasing more and more when I display troika-three-text Text Component. If I don't add them to the scene, my memory consumption is stable.

I used a MatCapMaterial initially, I thought it could be due to that, then I decided to use a simple color instead, but I don't see any difference.

But I noticed that if I add the text on the scene without calling sync() function, it's ok, but I don't see anything. If I call sync() then I have memory issues.

The texts are created once only. I have 8 texts on the scene.

I'm on "three": 0.164.1 and "troika-three-text": 0.49.1

BenLune commented 2 months ago

I use an EffectComposer to render the scene, with a ReflectorForSSRPass. If I deactivate them, I don't have memory leaks anymore...