THREE.WebGLRenderer: Context Lost

Hello,

I’m using A-Frame 0.8.2 with Vue.js 2.5.13 on Chrome 69.

In my scene, I have entities using gltf-model component, and an a-sky to have a 360 image as a background. In various cases (like having 10 entities at the same time, destroying/creating entities with v-for, destroying/creating the scene with v-if ), I get this error : THREE.WebGLRenderer: Context Lost

The scene is broken, even reloading the tab doesn’t help. Only opening a new tab allows recovering.

I had a look at https://github.com/mrdoob/three.js/issues/11435 and tried to apply this to my case, with no success :

listening to the webglcontextlost event on the canvas property of A-Frame scene object : it is fired properly.
calling forceContextRestore on the renderer property of A-Frame scene object. Sometimes the scene object is undefined.
listening to the webglcontextrestored event on the canvas property of A-Frame scene object : it is never fired.
calling reload on the A-Frame scene object : I get the not a function error.

Do you plan to manage this error at A-Frame level ? Anyway, how can I handle this problem which makes the experience very unstable ? Thanks in advance 😃

A-Frame Version: 0.8.2
Platform / Device: Windows 10 on a laptop with a second display (which may trigger the error, as stated in the three.js issue mentionned above)
Reproducible Code Snippet or URL:

Issue Analytics

State:
Created 5 years ago
Comments:13 (2 by maintainers)

Top GitHub Comments

1reaction

florentpeyrardcommented, Apr 17, 2019

A fix is still needed to manage Context lost, which can have various reasons, not only models unloading/loading (see above for another one, maybe others exist).

Regarding the models loading/unloading : pooling is not sufficient if you have many models. You have a limited quantity of RAM available at any given point in time, so you have to dynamically load only what you need right now and unload the rest. As mentionned here, I posted some more in depth analysis about this here. TLDR : I’m using a workaround for the time being, which is unfortunately failing to fully release the memory, so my app is still being exposed to memory overflow.

Also, in a SPA, when you navigate between pages all having their own scene, each scene is destroyed/created each time, as the instance they live in is created/destroyed dynamically, so the idea of keeping the same scene throughout the user experience doesn’t work.

So far, I really enjoy programming with A-Frame but to me, memory management is the really big downside that makes the engine unreliable for building ambitious projects. Really hoping for enhancements.

0reactions

ngokevincommented, Apr 16, 2019

Can be summed up to memory overflow?

I think can be solved by not destroying / recreating scene.

And using object pooling. https://aframe.io/docs/0.9.0/components/pool.html