1 year ago
#309717
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