xrCompatible attribute is not set for WebXR

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

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

Hardware Requirements (graphics card, VR Device, …)

[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.

[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.