supermedium / aframe-react

:atom: Build virtual reality experiences with A-Frame and React.
https://ngokevin.github.io/aframe-react-boilerplate/
MIT License
1.42k stars 152 forks source link

Free memory when a-scene is unmounted #110

Open ebhoren opened 6 years ago

ebhoren commented 6 years ago

I’m using AFRAME with react-aframe and i need to unmount scene at a certain time. Is there a way to free memory used by AFRAME after the scene as been unmounted?

Thanks

glidepro commented 6 years ago

@ebhoren probably way too late, but I was having a similar issue to you.

I am rendering 2 scenes, each displayed in a React Tab. I was able to switch between the scenes in the tabs without any apparent visual issue, but noticed that each time I switched to display/re-display the scene, a new WebGL context was created.

On the version of Chrome I'm using, after 16 contexts are created, Chrome warns you in the console that it's going to start dropping the oldest context when a new one is created. I also noticed that leaving the scene open in a tab for a long time eventually caused the browser to become slugglish.

The following code appears to clear these issues:

AFRAME.registerComponent('deallocate', {
  remove: function () {
    THREE.Cache.clear();
    this.el.renderer.forceContextLoss();
  },
});

and added it as an attribute to the Scene thus: <Scene deallocate>

While it doesn't tie into React's lifecycle events, as the Scene component is removed from the DOM, it triggers the A-Frame component's remove function and the clean-up happens there.

(Caveated by the fact that I'm not an expert with WebGL, Three or A-Frame)

ebhoren commented 6 years ago

@glidepro Yes, it's a bit too late but i really appreciate your solution. Thanks for sharing it to the world 👍