1 year ago

#309717

test-img

Stemkoski

A-Frame: what to do when WebGL context lost on Oculus Quest browser (in VR)

Sometimes when working with WebGL, we encounter the error WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost. There are many reasons why this may happen, and many people have written suggestions on how to reduce the possibilities of this happening. I am trying to figure out how to recover from this error when it occurs with A-Frame, when using the Oculus Quest browser. I am unable to find a complete practical example of how one can proceed.

I started with the following code in an A-Frame component:

    let canvas = document.querySelector(".a-canvas");

    canvas.addEventListener("webglcontextlost", function(event) {
        console.log("lost context");
        event.preventDefault();
        setTimeout( renderer.forceContextRestore, 1000 );

    }, false);

    canvas.addEventListener("webglcontextrestored", function(event) {
        console.log("restored context");
    }, false);

When in "flat-screen" mode on the Oculus Quest browser, one can use the code document.querySelector("a-scene").renderer.forceContextLoss(); to simulate a lost context, and the screen blanks out for a moment and then returns to its previous state, as expected. However, after a "naturally occurring" (not forced) lost context, I get the error THREE.WebGLRenderer: WEBGL_lose_context extension not supported.

I am at a loss how to proceed. After a normal context loss, how does one resume rendering graphics? What functions (in A-Frame or three.js) need to be called to restore the context on the canvas - for example, does one need to call canvas.getContext("webgl2") and assign it to some variable somewhere? Once the context is restored, how does one instruct A-Frame to re-process all the a-entity HTML-like content contained between the a-scene tags? (At the three.js level, do the child elements that were previously added to the scene need to be disposed of?) Does the A-Frame animation loop need to be restarted?

Additionally, for testing purposes, is there a reliable way to create an actual context loss (not a simulated one as produced by the forceContextLoss function)?

javascript

three.js

webgl

aframe

webgl2

0 Answers

Your Answer

Accepted video resources