WebGLRenderer: Improve offscreen rendering in WebXR.

examples/jsm/postprocessing/EffectComposer.js

@@ -9,6 +9,8 @@ import { ShaderPass } from './ShaderPass.js';
 import { MaskPass } from './MaskPass.js';
 import { ClearMaskPass } from './MaskPass.js';
 
+const size = /* @__PURE__ */ new Vector2();
+
 class EffectComposer {
 
 	constructor( renderer, renderTarget ) {
@@ -19,7 +21,7 @@ class EffectComposer {
 
 		if ( renderTarget === undefined ) {
 
-			const size = renderer.getSize( new Vector2() );
+			renderer.getSize( size );
 			this._width = size.width;
 			this._height = size.height;
 
@@ -48,6 +50,22 @@ class EffectComposer {
 
 		this.clock = new Clock();
 
+		this.onSessionStateChange = this.onSessionStateChange.bind( this );
+		this.renderer.xr.addEventListener( 'sessionstart', this.onSessionStateChange );
+		this.renderer.xr.addEventListener( 'sessionend', this.onSessionStateChange );
+
+	}
+
+	onSessionStateChange() {
+
+		this.renderer.getSize( size );
+		this._width = size.width;
+		this._height = size.height;
+
+		this._pixelRatio = this.renderer.xr.isPresenting ? 1 : this.renderer.getPixelRatio();
+
+		this.setSize( this._width, this._height );
+
 	}
 
 	swapBuffers() {
@@ -168,7 +186,7 @@ class EffectComposer {
 
 		if ( renderTarget === undefined ) {
 
-			const size = this.renderer.getSize( new Vector2() );
+			this.renderer.getSize( size );
 			this._pixelRatio = this.renderer.getPixelRatio();
 			this._width = size.width;
 			this._height = size.height;
@@ -222,6 +240,9 @@ class EffectComposer {
 
 		this.copyPass.dispose();
 
+		this.renderer.xr.removeEventListener( 'sessionstart', this.onSessionStateChange );
+		this.renderer.xr.removeEventListener( 'sessionend', this.onSessionStateChange );
+
 	}
 
 }

examples/jsm/postprocessing/Pass.js

@@ -63,7 +63,13 @@ class FullScreenQuad {
 
 	render( renderer ) {
 
+		// Disable XR projection for fullscreen effects
+		// https://github.com/mrdoob/three.js/pull/18846
+		const xrEnabled = renderer.xr.enabled;
+
+		renderer.xr.enabled = false;
 		renderer.render( this._mesh, _camera );
+		renderer.xr.enabled = xrEnabled;
 
 	}
 

src/renderers/WebGLRenderer.js

@@ -2068,6 +2068,13 @@ class WebGLRenderer {
 
 		this.setRenderTarget = function ( renderTarget, activeCubeFace = 0, activeMipmapLevel = 0 ) {
 
+			// Render to base layer instead of canvas in WebXR
+			if ( renderTarget === null && this.xr.isPresenting ) {
+
+				renderTarget = this.xr.getRenderTarget();
+
+			}
+
 			_currentRenderTarget = renderTarget;
 			_currentActiveCubeFace = activeCubeFace;
 			_currentActiveMipmapLevel = activeMipmapLevel;

src/renderers/webxr/WebXRManager.js

@@ -1,6 +1,7 @@
 import { ArrayCamera } from '../../cameras/ArrayCamera.js';
 import { EventDispatcher } from '../../core/EventDispatcher.js';
 import { PerspectiveCamera } from '../../cameras/PerspectiveCamera.js';
+import { Vector2 } from '../../math/Vector2.js';
 import { Vector3 } from '../../math/Vector3.js';
 import { Vector4 } from '../../math/Vector4.js';
 import { RAD2DEG } from '../../math/MathUtils.js';
@@ -40,6 +41,9 @@ class WebXRManager extends EventDispatcher {
 		const controllers = [];
 		const controllerInputSources = [];
 
+		const currentSize = new Vector2();
+		let currentPixelRatio = null;
+
 		//
 
 		let userCamera = null;
@@ -182,6 +186,8 @@ class WebXRManager extends EventDispatcher {
 
 			//
 
+			renderer.setDrawingBufferSize( currentSize.width, currentSize.height, currentPixelRatio );
+
 			animation.stop();
 
 			scope.isPresenting = false;
@@ -238,6 +244,12 @@ class WebXRManager extends EventDispatcher {
 
 		};
 
+		this.getRenderTarget = function () {
+
+			return newRenderTarget;
+
+		};
+
 		this.getFrame = function () {
 
 			return xrFrame;
@@ -286,6 +298,7 @@ class WebXRManager extends EventDispatcher {
 					glBaseLayer = new XRWebGLLayer( session, gl, layerInit );
 
 					session.updateRenderState( { baseLayer: glBaseLayer } );
+					renderer.setDrawingBufferSize( glBaseLayer.framebufferWidth, glBaseLayer.framebufferHeight, 1 );
 
 					newRenderTarget = new WebGLRenderTarget(
 						glBaseLayer.framebufferWidth,
@@ -323,6 +336,7 @@ class WebXRManager extends EventDispatcher {
 					glProjLayer = glBinding.createProjectionLayer( projectionlayerInit );
 
 					session.updateRenderState( { layers: [ glProjLayer ] } );
+					renderer.setDrawingBufferSize( glProjLayer.textureWidth, glProjLayer.textureHeight, 1 );
 
 					newRenderTarget = new WebGLRenderTarget(
 						glProjLayer.textureWidth,
@@ -348,6 +362,9 @@ class WebXRManager extends EventDispatcher {
 				customReferenceSpace = null;
 				referenceSpace = await session.requestReferenceSpace( referenceSpaceType );
 
+				currentPixelRatio = renderer.getPixelRatio();
+				renderer.getDrawingBufferSize( currentSize );
+
 				animation.setContext( session );
 				animation.start();