[pull] dev from mrdoob:dev

examples/jsm/Addons.js

@@ -284,6 +284,7 @@ export * from './webxr/OculusHandModel.js';
 export * from './webxr/OculusHandPointerModel.js';
 export * from './webxr/Text2D.js';
 export * from './webxr/VRButton.js';
+export * from './webxr/WebGLXRFallback.js';
 export * from './webxr/XRButton.js';
 export * from './webxr/XRControllerModelFactory.js';
 export * from './webxr/XREstimatedLight.js';

examples/jsm/controls/TransformControls.js

@@ -289,6 +289,24 @@ class TransformControls extends Controls {
 		 */
 		defineProperty( 'showXZ', true );
 
+		/**
+		 * Whether the xyze rotation helper should be visible or not.
+		 *
+		 * @name TransformControls#showXYZE
+		 * @type {boolean}
+		 * @default true
+		 */
+		defineProperty( 'showXYZE', true );
+
+		/**
+		 * Whether the e rotation helper should be visible or not.
+		 *
+		 * @name TransformControls#showE
+		 * @type {boolean}
+		 * @default true
+		 */
+		defineProperty( 'showE', true );
+
 		/**
 		 * The minimum allowed X position during translation.
 		 *
@@ -1847,6 +1865,10 @@ class TransformControlsGizmo extends Object3D {
 			handle.visible = handle.visible && ( handle.name.indexOf( 'YZ' ) === - 1 || this.showYZ );
 			handle.visible = handle.visible && ( handle.name.indexOf( 'XZ' ) === - 1 || this.showXZ );
 
+			// Hide disabled rotation helpers
+			handle.visible = handle.visible && ( handle.name !== 'E' || this.showE );
+			handle.visible = handle.visible && ( handle.name !== 'XYZE' || this.showXYZE );
+
 			// highlight selected axis
 
 			handle.material._color = handle.material._color || handle.material.color.clone();

examples/jsm/webxr/WebGLXRFallback.js

@@ -0,0 +1,71 @@
+/**
+ * Sets up a construction-time WebGL fallback for WebGPU XR examples.
+ *
+ * @param {WebGPURenderer} renderer - The initial renderer.
+ * @param {Function} createFallbackRenderer - A function that returns a new renderer with a WebGL backend.
+ * @param {Function} onFallback - A function that installs the new renderer in the app.
+ */
+function setupWebGLXRFallback( renderer, createFallbackRenderer, onFallback = () => {} ) {
+
+	let currentRenderer = renderer;
+	const patchedRenderers = new WeakSet();
+
+	function patchRenderer( renderer ) {
+
+		if ( patchedRenderers.has( renderer ) ) return;
+
+		patchedRenderers.add( renderer );
+
+		const setSession = renderer.xr.setSession.bind( renderer.xr );
+
+		renderer.xr.setSession = async function ( session ) {
+
+			if ( renderer !== currentRenderer ) {
+
+				return currentRenderer.xr.setSession( session );
+
+			}
+
+			try {
+
+				return await setSession( session );
+
+			} catch ( error ) {
+
+				if ( session === null || renderer.backend.isWebGPUBackend !== true ) {
+
+					throw error;
+
+				}
+
+				const fallbackRenderer = createFallbackRenderer( renderer );
+
+				if ( fallbackRenderer.backend.isWebGLBackend !== true ) {
+
+					throw new Error( 'WebGLXRFallback: createFallbackRenderer() must return a renderer with a WebGL backend.' );
+
+				}
+
+				fallbackRenderer.xr.enabled = renderer.xr.enabled;
+				fallbackRenderer.xr.cameraAutoUpdate = renderer.xr.cameraAutoUpdate;
+				fallbackRenderer.xr.setFramebufferScaleFactor( renderer.xr.getFramebufferScaleFactor() );
+				fallbackRenderer.xr.setReferenceSpaceType( renderer.xr.getReferenceSpaceType() );
+
+				await onFallback( fallbackRenderer, renderer );
+
+				currentRenderer = fallbackRenderer;
+				patchRenderer( fallbackRenderer );
+
+				return fallbackRenderer.xr.setSession( session );
+
+			}
+
+		};
+
+	}
+
+	patchRenderer( renderer );
+
+}
+
+export { setupWebGLXRFallback };

examples/webgpu_xr_cubes.html

@@ -34,10 +34,14 @@
 			import { BoxLineGeometry } from 'three/addons/geometries/BoxLineGeometry.js';
 			import { XRButton } from 'three/addons/webxr/XRButton.js';
 			import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
+			import { setupWebGLXRFallback } from 'three/addons/webxr/WebGLXRFallback.js';
 
 			const timer = new THREE.Timer();
 			timer.connect( document );
 
+			const rendererParameters = { antialias: true, outputBufferType: THREE.UnsignedByteType, multiview: true };
+			const controllerModelFactory = new XRControllerModelFactory();
+
 			let container;
 			let camera, scene, raycaster, renderer;
 
@@ -101,27 +105,59 @@
 
 				raycaster = new THREE.Raycaster();
 
-				renderer = new THREE.WebGPURenderer( { antialias: true, forceWebGL: true, outputBufferType: THREE.UnsignedByteType, multiview: true } );
+				renderer = createRenderer();
+				setRenderer( renderer );
+				setupWebGLXRFallback( renderer, () => createRenderer( true ), setRenderer );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize );
+
+				//
+
+				document.body.appendChild( XRButton.createButton( renderer ) );
+
+			}
+
+			function createRenderer( forceWebGL = false ) {
+
+				const parameters = { ...rendererParameters };
+
+				if ( forceWebGL === true ) parameters.forceWebGL = true;
+
+				const renderer = new THREE.WebGPURenderer( parameters );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setAnimationLoop( animate );
 				renderer.xr.enabled = true;
-				container.appendChild( renderer.domElement );
 
-				//
+				return renderer;
+
+			}
 
-				function onSelectStart() {
+			function setRenderer( newRenderer, oldRenderer = null ) {
 
-					this.userData.isSelecting = true;
+				if ( controller !== undefined ) scene.remove( controller );
+				if ( controllerGrip !== undefined ) scene.remove( controllerGrip );
 
-				}
+				if ( oldRenderer === null ) {
 
-				function onSelectEnd() {
+					container.appendChild( newRenderer.domElement );
 
-					this.userData.isSelecting = false;
+				} else {
+
+					container.replaceChild( newRenderer.domElement, oldRenderer.domElement );
+					oldRenderer.dispose();
 
 				}
 
+				renderer = newRenderer;
+				setupControllers();
+
+			}
+
+			function setupControllers() {
+
 				controller = renderer.xr.getController( 0 );
 				controller.addEventListener( 'selectstart', onSelectStart );
 				controller.addEventListener( 'selectend', onSelectEnd );
@@ -143,17 +179,21 @@
 				} );
 				scene.add( controller );
 
-				const controllerModelFactory = new XRControllerModelFactory();
-
 				controllerGrip = renderer.xr.getControllerGrip( 0 );
 				controllerGrip.add( controllerModelFactory.createControllerModel( controllerGrip ) );
 				scene.add( controllerGrip );
 
-				window.addEventListener( 'resize', onWindowResize );
+			}
 
-				//
+			function onSelectStart() {
 
-				document.body.appendChild( XRButton.createButton( renderer ) );
+				this.userData.isSelecting = true;
+
+			}
+
+			function onSelectEnd() {
+
+				this.userData.isSelecting = false;
 
 			}
 

examples/webgpu_xr_native_layers.html

@@ -188,9 +188,9 @@
 				renderer = new THREE.WebGPURenderer( { antialias: true, forceWebGL: true, outputBufferType: THREE.UnsignedByteType, multiview: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
+				document.body.appendChild( renderer.domElement );
 				renderer.setAnimationLoop( render );
 				renderer.xr.enabled = true;
-				document.body.appendChild( renderer.domElement );
 
 				//
 

examples/webgpu_xr_rollercoaster.html

@@ -33,21 +33,55 @@
 				SkyGeometry
 			} from 'three/addons/misc/RollerCoaster.js';
 			import { VRButton } from 'three/addons/webxr/VRButton.js';
+			import { setupWebGLXRFallback } from 'three/addons/webxr/WebGLXRFallback.js';
 
 			let mesh, material, geometry;
+			let renderer;
 
-			const renderer = new THREE.WebGPURenderer( { antialias: true, forceWebGL: true, outputBufferType: THREE.UnsignedByteType, multiview: false } );
-			renderer.setPixelRatio( window.devicePixelRatio );
-			renderer.setSize( window.innerWidth, window.innerHeight );
-			renderer.setAnimationLoop( animate );
-			renderer.xr.enabled = true;
-			renderer.xr.setReferenceSpaceType( 'local' );
-			document.body.appendChild( renderer.domElement );
+			const rendererParameters = { antialias: true, outputBufferType: THREE.UnsignedByteType, multiview: false };
+
+			renderer = createRenderer();
+			setRenderer( renderer );
+			setupWebGLXRFallback( renderer, () => createRenderer( true ), setRenderer );
 
 			document.body.appendChild( VRButton.createButton( renderer ) );
 
 			//
 
+			function createRenderer( forceWebGL = false ) {
+
+				const parameters = { ...rendererParameters };
+
+				if ( forceWebGL === true ) parameters.forceWebGL = true;
+
+				const renderer = new THREE.WebGPURenderer( parameters );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setAnimationLoop( animate );
+				renderer.xr.enabled = true;
+				renderer.xr.setReferenceSpaceType( 'local' );
+
+				return renderer;
+
+			}
+
+			function setRenderer( newRenderer, oldRenderer = null ) {
+
+				if ( oldRenderer === null ) {
+
+					document.body.appendChild( newRenderer.domElement );
+
+				} else {
+
+					document.body.replaceChild( newRenderer.domElement, oldRenderer.domElement );
+					oldRenderer.dispose();
+
+				}
+
+				renderer = newRenderer;
+
+			}
+
 			const scene = new THREE.Scene();
 			scene.background = new THREE.Color( 0xf0f0ff );
 
@@ -254,7 +288,7 @@
 
 				let headingChange = Math.atan2( tangent2.x, tangent2.z ) - Math.atan2( tangent1.x, tangent1.z );
 				if ( headingChange > Math.PI ) headingChange -= Math.PI * 2;
-				if ( headingChange < -Math.PI ) headingChange += Math.PI * 2;
+				if ( headingChange < - Math.PI ) headingChange += Math.PI * 2;
 
 				train.up.set( 0, 1, 0 );
 				bankQuaternion.setFromAxisAngle( tangent, - Math.atan( headingChange * 8 ) * 0.5 );