Three.js: xrCompatible attribute is not set for WebXR

[Artyom17]

xrCompatible GL context attribute is not set for WebXR

There is an attempt to set it in WebGLRenderer.js:

        var contextAttributes = {
            alpha: _alpha,
            depth: _depth,
            stencil: _stencil,
            antialias: _antialias,
            premultipliedAlpha: _premultipliedAlpha,
            preserveDrawingBuffer: _preserveDrawingBuffer,
            powerPreference: _powerPreference,
            failIfMajorPerformanceCaveat: _failIfMajorPerformanceCaveat,
            xrCompatible: true
        };

        // event listeners must be registered before WebGL context is created, see #12753

        _canvas.addEventListener( 'webglcontextlost', onContextLost, false );
        _canvas.addEventListener( 'webglcontextrestored', onContextRestore, false );

        _gl = _context || _canvas.getContext( 'webgl', contextAttributes ) || _canvas.getContext( 'experimental-webgl', contextAttributes );

HOWEVER, this 'contextAttributes' got completely ignored, since it gets here with the _context not null, and therefore the attribute is not set.

Instead of setting the attribute the context at creation time, you can make the context "XR compatible" by calling a makeXRCompatible method in WebXRManager.js, right before creation of the WebGLLayer:

      if ( gl.makeXRCompatible !== undefined ) {

         gl.makeXRCompatible();

      }

      // eslint-disable-next-line no-undef
            session.updateRenderState( { baseLayer: new XRWebGLLayer( session, gl ) } );

Three.js version

• [x ] Dev
• [x ] r109
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [x] All of them
• [ ] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[avaer]

Related: https://github.com/mozilla/hubs/issues/1714

[Mugen87]

To clarify, this issue only occurs if the user passes in a custom WebGL rendering context to WebGLRenderer and does not set xrCompatible to true for this context, right?

[mrdoob]

@Artyom17 I guess if we do gl.makeXRCompatible() in WebXRManager we no longer need to pass xrCompatible to the context?

@toji Does this sound good to you?

[toji]

makeXRCompatible() may force a context loss/restore on some devices, so it's best if you can set the xrCompatible flag during context creation when you're actually responsible for creating the context.

[mrdoob]

I see. So the correct solution here is for Hubs to pass xrCompatible: true here then.

@Artyom17 were you trying to solve https://github.com/mozilla/hubs/issues/1714 or was a different case?

[Artyom17]

@mrdoob No, I am working on adding "final" WebXR support in Oculus Browser and just tried to use 3js examples with WebXR. So, this issue should be solved for your examples as well.

[mrdoob]

@Artyom17 I understand but, as far as I understand, all the examples should already have xrCompatible: true (except the webgl2_ ones because the context is currently being created outside WebGLRenderer).

[Artyom17]

Hey @mrdoob, I don't quite understand how that happens then. I am on latest 'dev' branch now and all I can see is an attempt of setting xrCompatible : true in WebGLRenderer. However, like I mention in the issue description - that contextAttributes gets completely ignored, since the '_context' is not null already.
I mean, I don't see ANY of the webvr_* examples setting 'xrCompatible:true' when WebGLRenderer is created. What am I missing here?

[Mugen87]

I mean, I don't see ANY of the webvr* examples setting 'xrCompatible:true' when WebGLRenderer is created. What am I missing here?

I think we have to distinguish the two cases. When creating WebGLRenderer like so:

var renderer = new THREE.WebGLRenderer();

the renderer will internally create a rendering context with the respective context parameters. The XR examples do not set xrCompatible to true because the renderer does this internally.

However, if you create WebGLRenderer like so:

var renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );

you have to set xrCompatible to true on application level when creating the rendering context. In this case the internal context attributes get ignored since the context from the constructor parameter is used. This happens when using WebGL 2 like Mozilla Hubs does.

I hope this makes it more clear now.

[mrdoob]

Exactly. For Hubs, they have to set xrCompatible: true here.