troika icon indicating copy to clipboard operation
troika copied to clipboard

Memory Issue with troika-three-text

Open TimJJTing opened this issue 1 year ago • 5 comments

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.

TimJJTing avatar Jan 29 '24 08:01 TimJJTing

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 avatar Jan 29 '24 15:01 lojjic

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?

lojjic avatar Jan 29 '24 16:01 lojjic

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.

TimJJTing avatar Jan 29 '24 17:01 TimJJTing

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 avatar May 23 '24 20:05 BenLune

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

BenLune avatar May 23 '24 20:05 BenLune