Enable post-processing in VR (#20)

* Update WebXRManager.js

* Update WebGLRenderer.js

* Update WebGLRenderer.js

deleted useless blank lines

* Update WebXRManager.js

- Deleted useless code and blank lines
- refectored _getRenderTarget to getRenderTarget

* Update WebGLRenderer.js

Reflect the refactoring of getRenderTarget function

Improve compatibility of Post-Processing with VR (#23)

* Update EffectComposer.js for better compatibility with VR

* Update Pass.js for better compatibility with VR

Author: enzofrancescaHM

examples/jsm/postprocessing/EffectComposer.js

@@ -9,6 +9,7 @@ import { CopyShader } from '../shaders/CopyShader.js';
 import { ShaderPass } from './ShaderPass.js';
 import { ClearMaskPass, MaskPass } from './MaskPass.js';
 
+<<<<<<< HEAD
 /**
  * Used to implement post-processing effects in three.js.
  * The class manages a chain of post-processing passes to produce the final visual result.
@@ -37,6 +38,10 @@ import { ClearMaskPass, MaskPass } from './MaskPass.js';
  * }
  * ```
  */
+=======
+const size = /* @__PURE__ */ new Vector2();
+
+>>>>>>> d575277f70 (Enable post-processing in VR (#20))
 class EffectComposer {
 
 	/**
@@ -60,7 +65,7 @@ class EffectComposer {
 
 		if ( renderTarget === undefined ) {
 
-			const size = renderer.getSize( new Vector2() );
+			renderer.getSize( size );
 			this._width = size.width;
 			this._height = size.height;
 
@@ -125,6 +130,22 @@ class EffectComposer {
 		 * @type {Clock}
 		 */
 		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 );
 
 	}
 
@@ -283,7 +304,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;
@@ -354,6 +375,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

@@ -163,8 +163,13 @@ class FullScreenQuad {
 	 */
 	render( renderer ) {
 
-		renderer.render( this._mesh, _camera );
+		// 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

@@ -2753,6 +2753,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

@@ -24,17 +24,13 @@ import { WebXRDepthSensing } from './WebXRDepthSensing.js';
  */
 class WebXRManager extends EventDispatcher {
 
-<<<<<<< HEAD
 	/**
 	 * Constructs a new WebGL renderer.
 	 *
 	 * @param {WebGLRenderer} renderer - The renderer.
 	 * @param {WebGL2RenderingContext} gl - The rendering context.
 	 */
-	constructor( renderer, gl ) {
-=======
 	constructor( renderer, gl, extensions, useMultiview ) {
->>>>>>> 1123347a27 (WebXR: Implement antialiased multiview using OCULUS_multiview (#15))
 
 		super();
 
@@ -250,6 +246,8 @@ class WebXRManager extends EventDispatcher {
 
 			// restore framebuffer/rendering state
 
+			scope.isPresenting = false;
+
 			renderer.setRenderTarget( initialRenderTarget );
 
 			glBaseLayer = null;
@@ -262,8 +260,6 @@ class WebXRManager extends EventDispatcher {
 
 			animation.stop();
 
-			scope.isPresenting = false;
-
 			renderer.setPixelRatio( currentPixelRatio );
 			renderer.setSize( currentSize.width, currentSize.height, false );
 
@@ -366,6 +362,12 @@ class WebXRManager extends EventDispatcher {
 
 		};
 
+		this.getRenderTarget = function () {
+
+			return newRenderTarget;
+
+		};
+
 		/**
 		 * Returns the current XR session.
 		 *