WebXR: Added XRButton (#25781)

* Added XRButton.js

* Examples: Updated relevant examples using XRButton.

* WebXRManager: Added setSessionMode().

* WebGLRenderer: Force clear when sessionMode is 'immersive-ar'.

* Clean up.

* WebXRManager: Force alpha: true in layerInit.

* WebGLRenderer: Set state.buffers.color before calling clear() for 'immersive-ar'.

* Fix typo

* WebGLBackground: Handle WebXR sessions environmentBlendMode.

* WebXRManager: Removed setSessionMode().

* XRButton: Revert extra removal.

examples/files.json

@@ -357,14 +357,9 @@
 	],
 	"webxr": [
 		"webxr_ar_cones",
-		"webxr_ar_dragging",
 		"webxr_ar_hittest",
 		"webxr_ar_lighting",
-		"webxr_ar_paint",
 		"webxr_ar_plane_detection",
-		"webxr_vr_ballshooter",
-		"webxr_vr_cubes",
-		"webxr_vr_dragging",
 		"webxr_vr_handinput",
 		"webxr_vr_handinput_cubes",
 		"webxr_vr_handinput_profiles",
@@ -375,12 +370,15 @@
 		"webxr_vr_layers",
 		"webxr_vr_panorama",
 		"webxr_vr_panorama_depth",
-		"webxr_vr_paint",
 		"webxr_vr_rollercoaster",
 		"webxr_vr_sandbox",
-		"webxr_vr_sculpt",
 		"webxr_vr_teleport",
-		"webxr_vr_video"
+		"webxr_vr_video",
+		"webxr_xr_ballshooter",
+		"webxr_xr_cubes",
+		"webxr_xr_dragging",
+		"webxr_xr_paint",
+		"webxr_xr_sculpt"
 	],
 	"games": [
 		"games_fps"

examples/jsm/webxr/XRButton.js

@@ -0,0 +1,198 @@
+class XRButton {
+
+	static createButton( renderer ) {
+
+		const button = document.createElement( 'button' );
+
+		function showStartXR( mode ) {
+
+			let currentSession = null;
+
+			async function onSessionStarted( session ) {
+
+				session.addEventListener( 'end', onSessionEnded );
+
+				await renderer.xr.setSession( session );
+
+				button.textContent = 'STOP XR';
+
+				currentSession = session;
+
+			}
+
+			function onSessionEnded( /*event*/ ) {
+
+				currentSession.removeEventListener( 'end', onSessionEnded );
+
+				button.textContent = 'START XR';
+
+				currentSession = null;
+
+			}
+
+			//
+
+			button.style.display = '';
+
+			button.style.cursor = 'pointer';
+			button.style.left = 'calc(50% - 50px)';
+			button.style.width = '100px';
+
+			button.textContent = 'START XR';
+
+			button.onmouseenter = function () {
+
+				button.style.opacity = '1.0';
+
+			};
+
+			button.onmouseleave = function () {
+
+				button.style.opacity = '0.5';
+
+			};
+
+			button.onclick = function () {
+
+				if ( currentSession === null ) {
+
+					const sessionInit = {
+						optionalFeatures: [
+							'local-floor',
+							'bounded-floor',
+							'hand-tracking',
+							'layers'
+						]
+					};
+
+					navigator.xr.requestSession( mode, sessionInit )
+						.then( onSessionStarted );
+
+				} else {
+
+					currentSession.end();
+
+				}
+
+			};
+
+		}
+
+		function disableButton() {
+
+			button.style.display = '';
+
+			button.style.cursor = 'auto';
+			button.style.left = 'calc(50% - 75px)';
+			button.style.width = '150px';
+
+			button.onmouseenter = null;
+			button.onmouseleave = null;
+
+			button.onclick = null;
+
+		}
+
+		function showXRNotSupported() {
+
+			disableButton();
+
+			button.textContent = 'XR NOT SUPPORTED';
+
+		}
+
+		function showXRNotAllowed( exception ) {
+
+			disableButton();
+
+			console.warn( 'Exception when trying to call xr.isSessionSupported', exception );
+
+			button.textContent = 'XR NOT ALLOWED';
+
+		}
+
+		function stylizeElement( element ) {
+
+			element.style.position = 'absolute';
+			element.style.bottom = '20px';
+			element.style.padding = '12px 6px';
+			element.style.border = '1px solid #fff';
+			element.style.borderRadius = '4px';
+			element.style.background = 'rgba(0,0,0,0.1)';
+			element.style.color = '#fff';
+			element.style.font = 'normal 13px sans-serif';
+			element.style.textAlign = 'center';
+			element.style.opacity = '0.5';
+			element.style.outline = 'none';
+			element.style.zIndex = '999';
+
+		}
+
+		if ( 'xr' in navigator ) {
+
+			button.id = 'XRButton';
+			button.style.display = 'none';
+
+			stylizeElement( button );
+
+			navigator.xr.isSessionSupported( 'immersive-ar' )
+				.then( function ( supported ) {
+
+					if ( supported ) {
+
+						showStartXR( 'immersive-ar' );
+
+					} else {
+
+						navigator.xr.isSessionSupported( 'immersive-vr' )
+							.then( function ( supported ) {
+
+								if ( supported ) {
+
+									showStartXR( 'immersive-vr' );
+
+								} else {
+
+									showXRNotSupported();
+
+								}
+
+							} ).catch( showXRNotAllowed );
+
+					}
+
+				} ).catch( showXRNotAllowed );
+
+			return button;
+
+		} else {
+
+			const message = document.createElement( 'a' );
+
+			if ( window.isSecureContext === false ) {
+
+				message.href = document.location.href.replace( /^http:/, 'https:' );
+				message.innerHTML = 'WEBXR NEEDS HTTPS'; // TODO Improve message
+
+			} else {
+
+				message.href = 'https://immersiveweb.dev/';
+				message.innerHTML = 'WEBXR NOT AVAILABLE';
+
+			}
+
+			message.style.left = 'calc(50% - 90px)';
+			message.style.width = '180px';
+			message.style.textDecoration = 'none';
+
+			stylizeElement( message );
+
+			return message;
+
+		}
+
+	}
+
+}
+
+export { XRButton };

examples/webxr_ar_dragging.html

@@ -1,244 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js ar - dragging</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-		<link type="text/css" rel="stylesheet" href="main.css">
-	</head>
-	<body>
-
-		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> ar - dragging
-		</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 { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			import { ARButton } from 'three/addons/webxr/ARButton.js';
-
-			let container;
-			let camera, scene, renderer;
-			let controller1, controller2;
-
-			let raycaster;
-
-			const intersected = [];
-			const tempMatrix = new THREE.Matrix4();
-
-			let group;
-
-			init();
-			animate();
-
-			function init() {
-
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
-				scene = new THREE.Scene();
-
-				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
-				camera.position.set( 0, 0, 3 );
-
-				const controls = new OrbitControls( camera, container );
-				controls.minDistance = 0;
-				controls.maxDistance = 8;
-
-				scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );
-
-				const light = new THREE.DirectionalLight( 0xffffff );
-				light.position.set( 0, 6, 0 );
-				scene.add( light );
-
-				group = new THREE.Group();
-				scene.add( group );
-
-				const geometries = [
-					new THREE.BoxGeometry( 0.2, 0.2, 0.2 ),
-					new THREE.ConeGeometry( 0.2, 0.2, 64 ),
-					new THREE.CylinderGeometry( 0.2, 0.2, 0.2, 64 ),
-					new THREE.IcosahedronGeometry( 0.2, 8 ),
-					new THREE.TorusGeometry( 0.2, 0.04, 64, 32 )
-				];
-
-				for ( let i = 0; i < 50; i ++ ) {
-
-					const geometry = geometries[ Math.floor( Math.random() * geometries.length ) ];
-					const material = new THREE.MeshStandardMaterial( {
-						color: Math.random() * 0xffffff,
-						roughness: 0.7,
-						metalness: 0.0
-					} );
-
-					const object = new THREE.Mesh( geometry, material );
-
-					object.position.x = Math.random() * 4 - 2;
-					object.position.y = Math.random() * 4 - 2;
-					object.position.z = Math.random() * 4 - 2;
-
-					object.rotation.x = Math.random() * 2 * Math.PI;
-					object.rotation.y = Math.random() * 2 * Math.PI;
-					object.rotation.z = Math.random() * 2 * Math.PI;
-
-					object.scale.setScalar( Math.random() + 0.5 );
-
-					group.add( object );
-
-				}
-
-				//
-
-				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.SRGBColorSpace;
-				renderer.xr.enabled = true;
-				container.appendChild( renderer.domElement );
-
-				document.body.appendChild( ARButton.createButton( renderer ) );
-
-				// controllers
-
-				controller1 = renderer.xr.getController( 0 );
-				controller1.addEventListener( 'selectstart', onSelectStart );
-				controller1.addEventListener( 'selectend', onSelectEnd );
-				scene.add( controller1 );
-
-				controller2 = renderer.xr.getController( 1 );
-				controller2.addEventListener( 'selectstart', onSelectStart );
-				controller2.addEventListener( 'selectend', onSelectEnd );
-				scene.add( controller2 );
-
-				raycaster = new THREE.Raycaster();
-
-				//
-
-				window.addEventListener( 'resize', onWindowResize );
-
-			}
-
-			function onWindowResize() {
-
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
-
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
-			}
-
-			function onSelectStart( event ) {
-
-				const controller = event.target;
-
-				const intersections = getIntersections( controller );
-
-				if ( intersections.length > 0 ) {
-
-					const intersection = intersections[ 0 ];
-
-					const object = intersection.object;
-					object.material.emissive.b = 1;
-					controller.attach( object );
-
-					controller.userData.selected = object;
-
-				}
-
-			}
-
-			function onSelectEnd( event ) {
-
-				const controller = event.target;
-
-				if ( controller.userData.selected !== undefined ) {
-
-					const object = controller.userData.selected;
-					object.material.emissive.b = 0;
-					group.attach( object );
-
-					controller.userData.selected = undefined;
-
-				}
-
-
-			}
-
-			function getIntersections( controller ) {
-
-				tempMatrix.identity().extractRotation( controller.matrixWorld );
-
-				raycaster.ray.origin.setFromMatrixPosition( controller.matrixWorld );
-				raycaster.ray.direction.set( 0, 0, - 1 ).applyMatrix4( tempMatrix );
-
-				return raycaster.intersectObjects( group.children, false );
-
-			}
-
-			function intersectObjects( controller ) {
-
-				// Do not highlight when already selected
-
-				if ( controller.userData.selected !== undefined ) return;
-
-				const intersections = getIntersections( controller );
-
-				if ( intersections.length > 0 ) {
-
-					const intersection = intersections[ 0 ];
-
-					const object = intersection.object;
-					object.material.emissive.r = 1;
-					intersected.push( object );
-
-				}
-
-			}
-
-			function cleanIntersected() {
-
-				while ( intersected.length ) {
-
-					const object = intersected.pop();
-					object.material.emissive.r = 0;
-
-				}
-
-			}
-
-			//
-
-			function animate() {
-
-				renderer.setAnimationLoop( render );
-
-			}
-
-			function render() {
-
-				cleanIntersected();
-
-				intersectObjects( controller1 );
-				intersectObjects( controller2 );
-
-				renderer.render( scene, camera );
-
-			}
-
-		</script>
-	</body>
-</html>

examples/webxr_ar_paint.html

@@ -1,158 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<title>three.js ar - paint</title>
-		<meta charset="utf-8">
-		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-		<link type="text/css" rel="stylesheet" href="main.css">
-	</head>
-	<body>
-
-		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> ar - paint<br/>(Chrome Android 81+)
-		</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 { TubePainter } from 'three/addons/misc/TubePainter.js';
-			import { ARButton } from 'three/addons/webxr/ARButton.js';
-
-			let container;
-			let camera, scene, renderer;
-			let controller, painter;
-
-			const cursor = new THREE.Vector3();
-
-			init();
-			animate();
-
-			function init() {
-
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
-				scene = new THREE.Scene();
-
-				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 20 );
-
-				//
-
-				renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true } );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.xr.enabled = true;
-				container.appendChild( renderer.domElement );
-
-				//
-
-				document.body.appendChild( ARButton.createButton( renderer ) );
-
-				// model
-
-				const light = new THREE.HemisphereLight( 0xffffff, 0xbbbbff, 1 );
-				light.position.set( 0, 1, 0 );
-				scene.add( light );
-
-				//
-
-				painter = new TubePainter();
-				painter.setSize( 0.4 );
-				painter.mesh.material.side = THREE.DoubleSide;
-				scene.add( painter.mesh );
-
-				//
-
-				function onSelectStart() {
-
-					this.userData.isSelecting = true;
-					this.userData.skipFrames = 2;
-
-				}
-
-				function onSelectEnd() {
-
-					this.userData.isSelecting = false;
-
-				}
-
-				controller = renderer.xr.getController( 0 );
-				controller.addEventListener( 'selectstart', onSelectStart );
-				controller.addEventListener( 'selectend', onSelectEnd );
-				controller.userData.skipFrames = 0;
-				scene.add( controller );
-
-				//
-
-				window.addEventListener( 'resize', onWindowResize );
-
-			}
-
-			function onWindowResize() {
-
-				camera.aspect = window.innerWidth / window.innerHeight;
-				camera.updateProjectionMatrix();
-
-				renderer.setSize( window.innerWidth, window.innerHeight );
-
-			}
-
-			//
-
-			function handleController( controller ) {
-
-				const userData = controller.userData;
-
-				cursor.set( 0, 0, - 0.2 ).applyMatrix4( controller.matrixWorld );
-
-				if ( userData.isSelecting === true ) {
-
-					if ( userData.skipFrames >= 0 ) {
-
-						// TODO(mrdoob) Revisit this
-
-						userData.skipFrames --;
-
-						painter.moveTo( cursor );
-
-					} else {
-
-						painter.lineTo( cursor );
-						painter.update();
-
-					}
-
-				}
-
-			}
-
-			function animate() {
-
-				renderer.setAnimationLoop( render );
-
-			}
-
-			function render() {
-
-				handleController( controller );
-
-				renderer.render( scene, camera );
-
-			}
-
-		</script>
-	</body>
-</html>

examples/webxr_vr_ballshooter.html → examples/webxr_xr_ballshooter.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js vr - ball shooter</title>
+		<title>three.js xr - ball shooter</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 		<link type="text/css" rel="stylesheet" href="main.css">
@@ -30,7 +30,7 @@
 			import * as THREE from 'three';
 
 			import { BoxLineGeometry } from 'three/addons/geometries/BoxLineGeometry.js';
-			import { VRButton } from 'three/addons/webxr/VRButton.js';
+			import { XRButton } from 'three/addons/webxr/XRButton.js';
 			import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
 
 			let camera, scene, renderer;
@@ -100,7 +100,7 @@
 
 				//
 
-				document.body.appendChild( VRButton.createButton( renderer ) );
+				document.body.appendChild( XRButton.createButton( renderer ) );
 
 				// controllers
 

examples/webxr_vr_cubes.html → examples/webxr_xr_cubes.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js vr - cubes</title>
+		<title>three.js xr - cubes</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 		<link type="text/css" rel="stylesheet" href="main.css">
@@ -30,7 +30,7 @@
 			import * as THREE from 'three';
 
 			import { BoxLineGeometry } from 'three/addons/geometries/BoxLineGeometry.js';
-			import { VRButton } from 'three/addons/webxr/VRButton.js';
+			import { XRButton } from 'three/addons/webxr/XRButton.js';
 			import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
 
 			const clock = new THREE.Clock();
@@ -146,7 +146,7 @@
 
 				//
 
-				document.body.appendChild( VRButton.createButton( renderer ) );
+				document.body.appendChild( XRButton.createButton( renderer ) );
 
 			}
 

examples/webxr_vr_dragging.html → examples/webxr_xr_dragging.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js vr - dragging</title>
+		<title>three.js xr - dragging</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 		<link type="text/css" rel="stylesheet" href="main.css">
@@ -29,7 +29,7 @@
 
 			import * as THREE from 'three';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-			import { VRButton } from 'three/addons/webxr/VRButton.js';
+			import { XRButton } from 'three/addons/webxr/XRButton.js';
 			import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
 
 			let container;
@@ -134,7 +134,7 @@
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );
 
-				document.body.appendChild( VRButton.createButton( renderer ) );
+				document.body.appendChild( XRButton.createButton( renderer ) );
 
 				// controllers
 

examples/webxr_vr_paint.html → examples/webxr_xr_paint.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js vr - paint</title>
+		<title>three.js xr - paint</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 		<link type="text/css" rel="stylesheet" href="main.css">
@@ -30,7 +30,7 @@
 			import * as THREE from 'three';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { TubePainter } from 'three/addons/misc/TubePainter.js';
-			import { VRButton } from 'three/addons/webxr/VRButton.js';
+			import { XRButton } from 'three/addons/webxr/XRButton.js';
 
 			let camera, scene, renderer;
 			let controller1, controller2;
@@ -105,7 +105,7 @@
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );
 
-				document.body.appendChild( VRButton.createButton( renderer ) );
+				document.body.appendChild( XRButton.createButton( renderer ) );
 
 				// controllers
 

examples/webxr_vr_sculpt.html → examples/webxr_xr_sculpt.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
-		<title>three.js vr - sculpt</title>
+		<title>three.js xr - sculpt</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 		<link type="text/css" rel="stylesheet" href="main.css">
@@ -30,7 +30,7 @@
 			import * as THREE from 'three';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { MarchingCubes } from 'three/addons/objects/MarchingCubes.js';
-			import { VRButton } from 'three/addons/webxr/VRButton.js';
+			import { XRButton } from 'three/addons/webxr/XRButton.js';
 
 			let container;
 			let camera, scene, renderer;
@@ -99,7 +99,7 @@
 				renderer.xr.enabled = true;
 				container.appendChild( renderer.domElement );
 
-				document.body.appendChild( VRButton.createButton( renderer ) );
+				document.body.appendChild( XRButton.createButton( renderer ) );
 
 				// controllers
 

src/renderers/webgl/WebGLBackground.js

@@ -33,25 +33,38 @@ function WebGLBackground( renderer, cubemaps, cubeuvmaps, state, objects, alpha,
 
 		}
 
-		// Ignore background in AR
-		// TODO: Reconsider this.
+		if ( background === null ) {
 
-		const xr = renderer.xr;
-		const session = xr.getSession && xr.getSession();
+			setClear( clearColor, clearAlpha );
 
-		if ( session && session.environmentBlendMode === 'additive' ) {
+		} else if ( background && background.isColor ) {
 
-			background = null;
+			setClear( background, 1 );
+			forceClear = true;
 
 		}
 
-		if ( background === null ) {
+		const xr = renderer.xr;
+		const session = xr.getSession();
 
-			setClear( clearColor, clearAlpha );
+		if ( session !== null ) {
 
-		} else if ( background && background.isColor ) {
+			switch ( session.environmentBlendMode ) {
+
+				case 'additive':
+
+					state.buffers.color.setClear( 0, 0, 0, 1, premultipliedAlpha );
+
+					break;
+
+				case 'alpha-blend':
+
+					state.buffers.color.setClear( 0, 0, 0, 0, premultipliedAlpha );
+
+					break;
+
+			}
 
-			setClear( background, 1 );
 			forceClear = true;
 
 		}

src/renderers/webxr/WebXRManager.js

@@ -19,6 +19,7 @@ class WebXRManager extends EventDispatcher {
 		const scope = this;
 
 		let session = null;
+
 		let framebufferScaleFactor = 1.0;
 
 		let referenceSpace = null;
@@ -268,7 +269,7 @@ class WebXRManager extends EventDispatcher {
 
 					const layerInit = {
 						antialias: ( session.renderState.layers === undefined ) ? attributes.antialias : true,
-						alpha: attributes.alpha,
+						alpha: true,
 						depth: attributes.depth,
 						stencil: attributes.stencil,
 						framebufferScaleFactor: framebufferScaleFactor