Examples: Update games_fps and webgl_controls_fly for color management. (#25873)

* Examples: Update games_fps for color management.
* Examples: Update misc_controls_fly for color management.
* Examples: Add GammaCorrectionShader to misc_controls_fly.

examples/games_fps.html

@@ -42,8 +42,6 @@
 
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			const clock = new THREE.Clock();
 
 			const scene = new THREE.Scene();
@@ -53,7 +51,7 @@
 			const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
 			camera.rotation.order = 'YXZ';
 
-			const fillLight1 = new THREE.HemisphereLight( 0x4488bb, 0x002244, 0.5 );
+			const fillLight1 = new THREE.HemisphereLight( 0x8dc1de, 0x00668d, 0.5 );
 			fillLight1.position.set( 2, 1, 1 );
 			scene.add( fillLight1 );
 
@@ -95,7 +93,7 @@
 			const STEPS_PER_FRAME = 5;
 
 			const sphereGeometry = new THREE.IcosahedronGeometry( SPHERE_RADIUS, 5 );
-			const sphereMaterial = new THREE.MeshLambertMaterial( { color: 0xbbbb44 } );
+			const sphereMaterial = new THREE.MeshLambertMaterial( { color: 0xdede8d } );
 
 			const spheres = [];
 			let sphereIdx = 0;

examples/misc_controls_fly.html

@@ -50,8 +50,8 @@
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { FilmPass } from 'three/addons/postprocessing/FilmPass.js';
-
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
+			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
+			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
 
 			const radius = 6371;
 			const tilt = 0.41;
@@ -94,7 +94,7 @@
 
 				const materialNormalMap = new THREE.MeshPhongMaterial( {
 
-					specular: 0x333333,
+					specular: 0x7c7c7c,
 					shininess: 15,
 					map: textureLoader.load( 'textures/planets/earth_atmos_2048.jpg' ),
 					specularMap: textureLoader.load( 'textures/planets/earth_specular_2048.jpg' ),
@@ -104,6 +104,7 @@
 					normalScale: new THREE.Vector2( 0.85, - 0.85 )
 
 				} );
+				materialNormalMap.map.colorSpace = THREE.SRGBColorSpace;
 
 				// planet
 
@@ -122,6 +123,7 @@
 					transparent: true
 
 				} );
+				materialClouds.map.colorSpace = THREE.SRGBColorSpace;
 
 				meshClouds = new THREE.Mesh( geometry, materialClouds );
 				meshClouds.scale.set( cloudsScale, cloudsScale, cloudsScale );
@@ -135,6 +137,7 @@
 					map: textureLoader.load( 'textures/planets/moon_1024.jpg' )
 
 				} );
+				materialMoon.map.colorSpace = THREE.SRGBColorSpace;
 
 				meshMoon = new THREE.Mesh( geometry, materialMoon );
 				meshMoon.position.set( radius * 5, 0, 0 );
@@ -176,12 +179,12 @@
 				starsGeometry[ 1 ].setAttribute( 'position', new THREE.Float32BufferAttribute( vertices2, 3 ) );
 
 				const starsMaterials = [
-					new THREE.PointsMaterial( { color: 0x555555, size: 2, sizeAttenuation: false } ),
-					new THREE.PointsMaterial( { color: 0x555555, size: 1, sizeAttenuation: false } ),
-					new THREE.PointsMaterial( { color: 0x333333, size: 2, sizeAttenuation: false } ),
-					new THREE.PointsMaterial( { color: 0x3a3a3a, size: 1, sizeAttenuation: false } ),
-					new THREE.PointsMaterial( { color: 0x1a1a1a, size: 2, sizeAttenuation: false } ),
-					new THREE.PointsMaterial( { color: 0x1a1a1a, size: 1, sizeAttenuation: false } )
+					new THREE.PointsMaterial( { color: 0x9c9c9c, size: 2, sizeAttenuation: false } ),
+					new THREE.PointsMaterial( { color: 0x9c9c9c, size: 1, sizeAttenuation: false } ),
+					new THREE.PointsMaterial( { color: 0x7c7c7c, size: 2, sizeAttenuation: false } ),
+					new THREE.PointsMaterial( { color: 0x838383, size: 1, sizeAttenuation: false } ),
+					new THREE.PointsMaterial( { color: 0x5a5a5a, size: 2, sizeAttenuation: false } ),
+					new THREE.PointsMaterial( { color: 0x5a5a5a, size: 1, sizeAttenuation: false } )
 				];
 
 				for ( let i = 10; i < 30; i ++ ) {
@@ -226,11 +229,13 @@
 
 				const renderModel = new RenderPass( scene, camera );
 				const effectFilm = new FilmPass( 0.35, 0.75, 2048, false );
+				const gammaCorrection = new ShaderPass( GammaCorrectionShader );
 
 				composer = new EffectComposer( renderer );
 
 				composer.addPass( renderModel );
 				composer.addPass( effectFilm );
+				composer.addPass( gammaCorrection );
 
 			}