toxicFork
commented
7 years ago I am wondering if it's the browser somehow not cleaning a WebGL context properly... Or slightly less worse, threejs not cleaning up properly, or in best case a bug in react three renderer which I can fix :D
If you have a link to the project I can help identify what's going on. I'd try to find out what the exact types of the objects are that are growing.
Try to find out if you do any creation or deletion of components or anything else during the animation callback or within render.
On Tue, 4 Oct 2016, 23:39 Oliver Ortlieb, notifications@github.com wrote:
I'm using react-three-renderer to create an app that positions and rotates a number of 3D geometries. Each "session" with the app has a list of models that are downloaded and added to the scene as resources. Each geometry is then included in a mesh one or more times, depending on the requirements of the session. After the user completes the necessary operations, they leave the page.
I'm running into an issue where, the longer the app is running on the page, the longer it takes to unload the component when the user navigates away. The offending call seems to be the loseContext() call in the React3 unmount function. Below is a screenshot of a JS timeline of a user leaving the page:
[image: screenshot from 2016-10-04 18-15-27] https://cloud.githubusercontent.com/assets/3278489/19094725/aba9e980-8a5f-11e6-88e5-2cdaf05199e3.png
I've dug around a bit in the profiler, and have discovered what looks like a three.js or react-three-renderer object that keeps growing with time, whether or not the user is interacting with the app. These two snapshots were taken one after another with no user interaction with the app in between:
1: [image: image] https://cloud.githubusercontent.com/assets/3278489/19094981/43b82e20-8a61-11e6-89b8-783296d5c1be.png
2: [image: image] https://cloud.githubusercontent.com/assets/3278489/19094993/57ff38ba-8a61-11e6-96d2-a87e469e9812.png
Notice how the selected object has grown by ~7MB (the difference between the reported sizes of the two snapshots) and that those 7MB appear to belong to the @4317461 https://github.com/toxicFork/react-three-renderer/commit/4317461 object, which is filled with objects and attributes relating to three/webgl.
It's a bit of a blocker for this project -- any ideas on fixes, or about how to diagnose things from here?
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/toxicFork/react-three-renderer/issues/113, or mute the thread https://github.com/notifications/unsubscribe-auth/AA0iLUfO927CF-aetby9X-rXIKZqFl5Jks5qwtWNgaJpZM4KOPLu .
oortlieb
I'm using react-three-renderer to create an app that positions and rotates a number of 3D geometries. Each "session" with the app has a list of models that are downloaded and added to the scene as resources. Each geometry is then included in a mesh one or more times, depending on the requirements of the session. After the user completes the necessary operations, they leave the page.
I'm running into an issue where, the longer the app is running on the page, the longer it takes to unload the component when the user navigates away. The offending call seems to be the loseContext() call in the React3 unmount function. Below is a screenshot of a JS timeline of a user leaving the page:
I've dug around a bit in the profiler, and have discovered what looks like a three.js or react-three-renderer object that keeps growing with time, whether or not the user is interacting with the app. These two snapshots were taken one after another with no user interaction with the app in between:
1:
2:
Notice how the selected object has grown by ~7MB (the difference between the reported sizes of the two snapshots) and that those 7MB appear to belong to the @4317461 object, which is filled with objects and attributes relating to three/webgl.
It's a bit of a blocker for this project -- any ideas on fixes, or about how to diagnose things from here?