Examples: Use color management in all WebXR demos. (#26094)

* Examples: Use color management in all WebXR demos.

* Examples: Update screenshots.

* Examples: Enable tone mapping in VR sandbox.

* Examples: Update screenshots.

* Examples: Update screenshots.

examples/webxr_vr_handinput.html

@@ -34,8 +34,6 @@
 			import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
 			import { XRHandModelFactory } from 'three/addons/webxr/XRHandModelFactory.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let container;
 			let camera, scene, renderer;
 			let hand1, hand2;
@@ -63,13 +61,13 @@
 				controls.update();
 
 				const floorGeometry = new THREE.PlaneGeometry( 4, 4 );
-				const floorMaterial = new THREE.MeshStandardMaterial( { color: 0x222222 } );
+				const floorMaterial = new THREE.MeshStandardMaterial( { color: 0x666666 } );
 				const floor = new THREE.Mesh( floorGeometry, floorMaterial );
 				floor.rotation.x = - Math.PI / 2;
 				floor.receiveShadow = true;
 				scene.add( floor );
 
-				scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );
+				scene.add( new THREE.HemisphereLight( 0xbcbcbc, 0xa5a5a5 ) );
 
 				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 6, 0 );

examples/webxr_vr_handinput_cubes.html

@@ -34,8 +34,6 @@
 			import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
 			import { XRHandModelFactory } from 'three/addons/webxr/XRHandModelFactory.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let container;
 			let camera, scene, renderer;
 			let hand1, hand2;
@@ -76,13 +74,13 @@
 				controls.update();
 
 				const floorGeometry = new THREE.PlaneGeometry( 4, 4 );
-				const floorMaterial = new THREE.MeshStandardMaterial( { color: 0x222222 } );
+				const floorMaterial = new THREE.MeshStandardMaterial( { color: 0x666666 } );
 				const floor = new THREE.Mesh( floorGeometry, floorMaterial );
 				floor.rotation.x = - Math.PI / 2;
 				floor.receiveShadow = true;
 				scene.add( floor );
 
-				scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );
+				scene.add( new THREE.HemisphereLight( 0xbcbcbc, 0xa5a5a5 ) );
 
 				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 6, 0 );

examples/webxr_vr_handinput_profiles.html

@@ -34,8 +34,6 @@
 			import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
 			import { XRHandModelFactory } from 'three/addons/webxr/XRHandModelFactory.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let container;
 			let camera, scene, renderer;
 			let hand1, hand2;
@@ -70,13 +68,13 @@
 				controls.update();
 
 				const floorGeometry = new THREE.PlaneGeometry( 4, 4 );
-				const floorMaterial = new THREE.MeshStandardMaterial( { color: 0x222222 } );
+				const floorMaterial = new THREE.MeshStandardMaterial( { color: 0x666666 } );
 				const floor = new THREE.Mesh( floorGeometry, floorMaterial );
 				floor.rotation.x = - Math.PI / 2;
 				floor.receiveShadow = true;
 				scene.add( floor );
 
-				scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );
+				scene.add( new THREE.HemisphereLight( 0xbcbcbc, 0xa5a5a5 ) );
 
 				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 6, 0 );

examples/webxr_vr_sandbox.html

@@ -36,8 +36,6 @@
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import Stats from 'three/addons/libs/stats.module.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let camera, scene, renderer;
 			let reflector;
 			let stats, statsMesh;
@@ -127,11 +125,12 @@
 				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.autoClear = false;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.xr.enabled = true;
+				renderer.toneMapping = THREE.ACESFilmicToneMapping;
+				renderer.toneMappingExposure = 1;
 				document.body.appendChild( renderer.domElement );
 
 				document.body.appendChild( VRButton.createButton( renderer ) );

examples/webxr_vr_teleport.html

@@ -33,8 +33,6 @@
 			import { VRButton } from 'three/addons/webxr/VRButton.js';
 			import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let camera, scene, raycaster, renderer;
 			let controller1, controller2;
 			let controllerGrip1, controllerGrip2;
@@ -57,11 +55,11 @@
 
 				room = new THREE.LineSegments(
 					new BoxLineGeometry( 6, 6, 6, 10, 10, 10 ).translate( 0, 3, 0 ),
-					new THREE.LineBasicMaterial( { color: 0x808080 } )
+					new THREE.LineBasicMaterial( { color: 0xbcbcbc } )
 				);
 				scene.add( room );
 
-				scene.add( new THREE.HemisphereLight( 0x606060, 0x404040 ) );
+				scene.add( new THREE.HemisphereLight( 0xa5a5a5, 0x898989 ) );
 
 				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 1, 1, 1 ).normalize();
@@ -69,13 +67,13 @@
 
 				marker = new THREE.Mesh(
 					new THREE.CircleGeometry( 0.25, 32 ).rotateX( - Math.PI / 2 ),
-					new THREE.MeshBasicMaterial( { color: 0x808080 } )
+					new THREE.MeshBasicMaterial( { color: 0xbcbcbc } )
 				);
 				scene.add( marker );
 
 				floor = new THREE.Mesh(
 					new THREE.PlaneGeometry( 4.8, 4.8, 2, 2 ).rotateX( - Math.PI / 2 ),
-					new THREE.MeshBasicMaterial( { color: 0x808080, transparent: true, opacity: 0.25 } )
+					new THREE.MeshBasicMaterial( { color: 0xbcbcbc, transparent: true, opacity: 0.25 } )
 				);
 				scene.add( floor );
 

examples/webxr_xr_cubes.html

@@ -33,8 +33,6 @@
 			import { XRButton } from 'three/addons/webxr/XRButton.js';
 			import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			const clock = new THREE.Clock();
 
 			let container;
@@ -63,11 +61,11 @@
 
 				room = new THREE.LineSegments(
 					new BoxLineGeometry( 6, 6, 6, 10, 10, 10 ).translate( 0, 3, 0 ),
-					new THREE.LineBasicMaterial( { color: 0x808080 } )
+					new THREE.LineBasicMaterial( { color: 0xbcbcbc } )
 				);
 				scene.add( room );
 
-				scene.add( new THREE.HemisphereLight( 0x606060, 0x404040 ) );
+				scene.add( new THREE.HemisphereLight( 0xa5a5a5, 0x898989 ) );
 
 				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 1, 1, 1 ).normalize();

examples/webxr_xr_dragging.html

@@ -32,8 +32,6 @@
 			import { XRButton } from 'three/addons/webxr/XRButton.js';
 			import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let container;
 			let camera, scene, renderer;
 			let controller1, controller2;
@@ -71,7 +69,7 @@
 				floor.receiveShadow = true;
 				scene.add( floor );
 
-				scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );
+				scene.add( new THREE.HemisphereLight( 0xbcbcbc, 0xa5a5a5 ) );
 
 				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 6, 0 );

examples/webxr_xr_haptics.html

@@ -32,8 +32,6 @@
 			import { XRButton } from 'three/addons/webxr/XRButton.js';
 			import { XRControllerModelFactory } from 'three/addons/webxr/XRControllerModelFactory.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let container;
 			let camera, scene, renderer;
 			let controller1, controller2;
@@ -98,7 +96,7 @@
 				floor.receiveShadow = true;
 				scene.add( floor );
 
-				scene.add( new THREE.HemisphereLight( 0x808080, 0x606060 ) );
+				scene.add( new THREE.HemisphereLight( 0xbcbcbc, 0xa5a5a5 ) );
 
 				const light = new THREE.DirectionalLight( 0xffffff );
 				light.position.set( 0, 6, 0 );