Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Memory Issue with troika-three-text #301

Open
TimJJTing opened this issue Jan 29, 2024 · 5 comments
Open

Memory Issue with troika-three-text #301

TimJJTing opened this issue Jan 29, 2024 · 5 comments

Comments

@TimJJTing
Copy link

TimJJTing commented Jan 29, 2024

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
Copy link
Collaborator

lojjic commented Jan 29, 2024

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
Copy link
Collaborator

lojjic commented Jan 29, 2024

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
Copy link
Author

TimJJTing commented Jan 29, 2024

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
Copy link

BenLune commented May 23, 2024

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
Copy link

BenLune commented May 23, 2024

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants