WebXRManager: Revert support of `EffectComposer`. (#26904)

* Revert "Examples: Clean up. (#26901)"

This reverts commit 306fb93537008e53bd20d92c32ec78d88f04208b.

* Revert "Updated builds."

This reverts commit 7aba3d2cd15a987ec261b7d4837df36f948c21c8.

* Revert "WebGLRenderer: Improve offscreen rendering in WebXR. (#26160)"

This reverts commit afdfa33b357027b3ad545b179ee8b8bb698a4889.

build/three.cjs

@@ -26437,9 +26437,6 @@ class WebXRManager extends EventDispatcher {
 		const controllers = [];
 		const controllerInputSources = [];
 
-		const currentSize = new Vector2();
-		let currentPixelRatio = null;
-
 		//
 
 		const cameraL = new PerspectiveCamera();
@@ -26572,9 +26569,6 @@ class WebXRManager extends EventDispatcher {
 
 			//
 
-			renderer.setPixelRatio( currentPixelRatio );
-			renderer.setSize( currentSize.width, currentSize.height, false );
-
 			animation.stop();
 
 			scope.isPresenting = false;
@@ -26631,12 +26625,6 @@ class WebXRManager extends EventDispatcher {
 
 		};
 
-		this._getRenderTarget = function () {
-
-			return newRenderTarget;
-
-		};
-
 		this.getFrame = function () {
 
 			return xrFrame;
@@ -26686,9 +26674,6 @@ class WebXRManager extends EventDispatcher {
 
 					session.updateRenderState( { baseLayer: glBaseLayer } );
 
-					renderer.setPixelRatio( 1 );
-					renderer.setSize( glBaseLayer.framebufferWidth, glBaseLayer.framebufferHeight, false );
-
 					newRenderTarget = new WebGLRenderTarget(
 						glBaseLayer.framebufferWidth,
 						glBaseLayer.framebufferHeight,
@@ -26726,9 +26711,6 @@ class WebXRManager extends EventDispatcher {
 
 					session.updateRenderState( { layers: [ glProjLayer ] } );
 
-					renderer.setPixelRatio( 1 );
-					renderer.setSize( glProjLayer.textureWidth, glProjLayer.textureHeight, false );
-
 					newRenderTarget = new WebGLRenderTarget(
 						glProjLayer.textureWidth,
 						glProjLayer.textureHeight,
@@ -26753,9 +26735,6 @@ class WebXRManager extends EventDispatcher {
 				customReferenceSpace = null;
 				referenceSpace = await session.requestReferenceSpace( referenceSpaceType );
 
-				currentPixelRatio = renderer.getPixelRatio();
-				renderer.getSize( currentSize );
-
 				animation.setContext( session );
 				animation.start();
 
@@ -30148,13 +30127,6 @@ 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;

build/three.js

@@ -26442,9 +26442,6 @@ console.warn( 'Scripts "build/three.js" and "build/three.min.js" are deprecated
 			const controllers = [];
 			const controllerInputSources = [];
 
-			const currentSize = new Vector2();
-			let currentPixelRatio = null;
-
 			//
 
 			const cameraL = new PerspectiveCamera();
@@ -26577,9 +26574,6 @@ console.warn( 'Scripts "build/three.js" and "build/three.min.js" are deprecated
 
 				//
 
-				renderer.setPixelRatio( currentPixelRatio );
-				renderer.setSize( currentSize.width, currentSize.height, false );
-
 				animation.stop();
 
 				scope.isPresenting = false;
@@ -26636,12 +26630,6 @@ console.warn( 'Scripts "build/three.js" and "build/three.min.js" are deprecated
 
 			};
 
-			this._getRenderTarget = function () {
-
-				return newRenderTarget;
-
-			};
-
 			this.getFrame = function () {
 
 				return xrFrame;
@@ -26691,9 +26679,6 @@ console.warn( 'Scripts "build/three.js" and "build/three.min.js" are deprecated
 
 						session.updateRenderState( { baseLayer: glBaseLayer } );
 
-						renderer.setPixelRatio( 1 );
-						renderer.setSize( glBaseLayer.framebufferWidth, glBaseLayer.framebufferHeight, false );
-
 						newRenderTarget = new WebGLRenderTarget(
 							glBaseLayer.framebufferWidth,
 							glBaseLayer.framebufferHeight,
@@ -26731,9 +26716,6 @@ console.warn( 'Scripts "build/three.js" and "build/three.min.js" are deprecated
 
 						session.updateRenderState( { layers: [ glProjLayer ] } );
 
-						renderer.setPixelRatio( 1 );
-						renderer.setSize( glProjLayer.textureWidth, glProjLayer.textureHeight, false );
-
 						newRenderTarget = new WebGLRenderTarget(
 							glProjLayer.textureWidth,
 							glProjLayer.textureHeight,
@@ -26758,9 +26740,6 @@ console.warn( 'Scripts "build/three.js" and "build/three.min.js" are deprecated
 					customReferenceSpace = null;
 					referenceSpace = await session.requestReferenceSpace( referenceSpaceType );
 
-					currentPixelRatio = renderer.getPixelRatio();
-					renderer.getSize( currentSize );
-
 					animation.setContext( session );
 					animation.start();
 
@@ -30153,13 +30132,6 @@ console.warn( 'Scripts "build/three.js" and "build/three.min.js" are deprecated
 
 			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;

build/three.module.js

@@ -26435,9 +26435,6 @@ class WebXRManager extends EventDispatcher {
 		const controllers = [];
 		const controllerInputSources = [];
 
-		const currentSize = new Vector2();
-		let currentPixelRatio = null;
-
 		//
 
 		const cameraL = new PerspectiveCamera();
@@ -26570,9 +26567,6 @@ class WebXRManager extends EventDispatcher {
 
 			//
 
-			renderer.setPixelRatio( currentPixelRatio );
-			renderer.setSize( currentSize.width, currentSize.height, false );
-
 			animation.stop();
 
 			scope.isPresenting = false;
@@ -26629,12 +26623,6 @@ class WebXRManager extends EventDispatcher {
 
 		};
 
-		this._getRenderTarget = function () {
-
-			return newRenderTarget;
-
-		};
-
 		this.getFrame = function () {
 
 			return xrFrame;
@@ -26684,9 +26672,6 @@ class WebXRManager extends EventDispatcher {
 
 					session.updateRenderState( { baseLayer: glBaseLayer } );
 
-					renderer.setPixelRatio( 1 );
-					renderer.setSize( glBaseLayer.framebufferWidth, glBaseLayer.framebufferHeight, false );
-
 					newRenderTarget = new WebGLRenderTarget(
 						glBaseLayer.framebufferWidth,
 						glBaseLayer.framebufferHeight,
@@ -26724,9 +26709,6 @@ class WebXRManager extends EventDispatcher {
 
 					session.updateRenderState( { layers: [ glProjLayer ] } );
 
-					renderer.setPixelRatio( 1 );
-					renderer.setSize( glProjLayer.textureWidth, glProjLayer.textureHeight, false );
-
 					newRenderTarget = new WebGLRenderTarget(
 						glProjLayer.textureWidth,
 						glProjLayer.textureHeight,
@@ -26751,9 +26733,6 @@ class WebXRManager extends EventDispatcher {
 				customReferenceSpace = null;
 				referenceSpace = await session.requestReferenceSpace( referenceSpaceType );
 
-				currentPixelRatio = renderer.getPixelRatio();
-				renderer.getSize( currentSize );
-
 				animation.setContext( session );
 				animation.start();
 
@@ -30146,13 +30125,6 @@ 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;

examples/files.json

@@ -367,7 +367,6 @@
 		"webxr_vr_handinput_pressbutton",
 		"webxr_vr_layers",
 		"webxr_vr_panorama",
-		"webxr_vr_postprocessing",
 		"webxr_vr_panorama_depth",
 		"webxr_vr_rollercoaster",
 		"webxr_vr_sandbox",

examples/jsm/postprocessing/EffectComposer.js

@@ -10,8 +10,6 @@ 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 ) {
@@ -22,7 +20,7 @@ class EffectComposer {
 
 		if ( renderTarget === undefined ) {
 
-			renderer.getSize( size );
+			const size = renderer.getSize( new Vector2() );
 			this._width = size.width;
 			this._height = size.height;
 
@@ -52,22 +50,6 @@ 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() {
@@ -188,7 +170,7 @@ class EffectComposer {
 
 		if ( renderTarget === undefined ) {
 
-			this.renderer.getSize( size );
+			const size = this.renderer.getSize( new Vector2() );
 			this._pixelRatio = this.renderer.getPixelRatio();
 			this._width = size.width;
 			this._height = size.height;
@@ -242,9 +224,6 @@ 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,13 +63,7 @@ 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;
 
 	}
 

examples/webxr_vr_postprocessing.html

@@ -1,123 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js vr - postprocessing</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<link type="text/css" rel="stylesheet" href="main.css">
-		<style>
-			#info > * {
-				max-width: 650px;
-				margin-left: auto;
-				margin-right: auto;
-			}
-		</style>
-	</head>
-	<body>
-
-		<div id="container"></div>
-
-		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> VR - postprocessing<br/>
-			(Oculus Browser 15.1+)
-		</div>
-
-		<!-- Import maps polyfill -->
-		<!-- Remove this when import maps will be widely supported -->
-		<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
-
-		<script type="importmap">
-			{
-				"imports": {
-					"three": "../build/three.module.js",
-					"three/addons/": "./jsm/"
-				}
-			}
-		</script>
-
-		<script type="module">
-
-			import * as THREE from 'three';
-			import { VRButton } from 'three/addons/webxr/VRButton.js';
-			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
-			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
-			import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
-			import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
-
-			let renderer, camera, scene, composer;
-
-			init();
-			animate();
-
-			function init() {
-
-				renderer = new THREE.WebGLRenderer();
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.toneMapping = THREE.ACESFilmicToneMapping;
-				renderer.toneMappingExposure = 1;
-				renderer.xr.enabled = true;
-				document.body.appendChild( renderer.domElement );
-
-				document.body.appendChild( VRButton.createButton( renderer ) );
-
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight );
-
-				scene = new THREE.Scene();
-				scene.position.z = - 8; // XR camera starts at 0,0
-
-				const triangleGeometry = new THREE.BufferGeometry();
-
-				const triangleVertices = [ - 1, - 1, 1, 1, - 1, 1, 0, 1, 1 ];
-				triangleGeometry.setAttribute( 'position', new THREE.Float32BufferAttribute( triangleVertices, 3 ) );
-
-				const orangeMaterial = new THREE.MeshBasicMaterial( { color: 'orange', side: THREE.DoubleSide } );
-				const orange = new THREE.Mesh( triangleGeometry, orangeMaterial );
-				orange.position.x = - 3;
-				scene.add( orange );
-
-				const redMaterial = new THREE.MeshBasicMaterial( { color: 0xff2060, side: THREE.DoubleSide } );
-				const red = new THREE.Mesh( triangleGeometry, redMaterial );
-				scene.add( red );
-
-				const blueMaterial = new THREE.MeshBasicMaterial( { color: 'cyan', side: THREE.DoubleSide } );
-				const blue = new THREE.Mesh( triangleGeometry, blueMaterial );
-				blue.position.x = 3;
-				scene.add( blue );
-
-				composer = new EffectComposer( renderer );
-				composer.setSize( window.innerWidth, window.innerHeight );
-				composer.addPass( new RenderPass( scene, camera ) );
-				composer.addPass( new UnrealBloomPass( undefined, 0.5, 1, 0 ) );
-				composer.addPass( new OutputPass() );
-
-				window.addEventListener( 'resize', onWindowResize );
-
-			}
-
-			function onWindowResize() {
-
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				composer.setSize( window.innerWidth, window.innerHeight );
-
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
-
-			}
-
-			function animate() {
-
-				renderer.setAnimationLoop( render );
-
-			}
-
-			function render() {
-
-				composer.render();
-
-			}
-
-		</script>
-
-	</body>
-
-</html>

src/renderers/WebGLRenderer.js

@@ -2060,13 +2060,6 @@ 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,7 +1,6 @@
 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';
@@ -41,9 +40,6 @@ class WebXRManager extends EventDispatcher {
 		const controllers = [];
 		const controllerInputSources = [];
 
-		const currentSize = new Vector2();
-		let currentPixelRatio = null;
-
 		//
 
 		const cameraL = new PerspectiveCamera();
@@ -176,9 +172,6 @@ class WebXRManager extends EventDispatcher {
 
 			//
 
-			renderer.setPixelRatio( currentPixelRatio );
-			renderer.setSize( currentSize.width, currentSize.height, false );
-
 			animation.stop();
 
 			scope.isPresenting = false;
@@ -235,12 +228,6 @@ class WebXRManager extends EventDispatcher {
 
 		};
 
-		this._getRenderTarget = function () {
-
-			return newRenderTarget;
-
-		};
-
 		this.getFrame = function () {
 
 			return xrFrame;
@@ -290,9 +277,6 @@ class WebXRManager extends EventDispatcher {
 
 					session.updateRenderState( { baseLayer: glBaseLayer } );
 
-					renderer.setPixelRatio( 1 );
-					renderer.setSize( glBaseLayer.framebufferWidth, glBaseLayer.framebufferHeight, false );
-
 					newRenderTarget = new WebGLRenderTarget(
 						glBaseLayer.framebufferWidth,
 						glBaseLayer.framebufferHeight,
@@ -330,9 +314,6 @@ class WebXRManager extends EventDispatcher {
 
 					session.updateRenderState( { layers: [ glProjLayer ] } );
 
-					renderer.setPixelRatio( 1 );
-					renderer.setSize( glProjLayer.textureWidth, glProjLayer.textureHeight, false );
-
 					newRenderTarget = new WebGLRenderTarget(
 						glProjLayer.textureWidth,
 						glProjLayer.textureHeight,
@@ -357,9 +338,6 @@ class WebXRManager extends EventDispatcher {
 				customReferenceSpace = null;
 				referenceSpace = await session.requestReferenceSpace( referenceSpaceType );
 
-				currentPixelRatio = renderer.getPixelRatio();
-				renderer.getSize( currentSize );
-
 				animation.setContext( session );
 				animation.start();