This tutorial does not work with Meta Quest Link

[tjsc0]

After running npm run dev, I could play the game find with Quest 3's built-in browser, but I got the following console error after clicking the Enter VR button when trying to load the game through Meta Quest Link with a link cable:

\WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost
three.module.js:29384 THREE.WebGLRenderer: Context Lost.
three.module.js:27335 Uncaught (in promise) InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable.Understand this errorAI
troika-three-text.esm.js:1939 Context Lost WebGLContextEvent
three.module.js:29392 THREE.WebGLRenderer: Context Restored.
three.module.js:23616 WebGL: INVALID_OPERATION: texSubImage2D: Can't upload a texture from a lost WebGL context.
troika-three-text.esm.js:1944 Context Restored WebGLContextEvent

while my Quest 3 displays this crashed page view with the page not responsive message on a dark background.

Actually all WebXR experiences built with Three.js (including threejs's official examples) do not load through Meta Quest Link, though the offcial WebXR samples work perfectly fine.

The key difference between Three.js and WebXR Samples is that the WebGL rendering context is created with xrCompatible: true initially in the WebXR Samples while Three.js calls the asynchronous makeXRCompatible method before entering an XR session. The latter is the recommended approach according to the spec, but it might potentially cause a lost context.

I suspect Meta Quest Link's runtime is not handling this correctly, see:

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext#xrcompatible
• https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/makeXRCompatible
• Don't blindly create WebGL contexts with { xrCompatible: true }. mrdoob/three.js#19275