Examples: More sRGB and color management usage. (#26085)

* Examples: More sRGB and color management usage.

* Examples: Update screenshots.

examples/webgl_read_float_buffer.html

@@ -10,7 +10,7 @@
 
 		<div id="container"></div>
 		<div id="info">
-			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> read float pixels webgl example<br/>
+			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> read linear-srgb float pixel data<br/>
 			<span id="values"></span>
 		</div>
 
@@ -22,6 +22,7 @@
 			void main() {
 
 				gl_FragColor = texture2D( tDiffuse, vUv );
+				#include <encodings_fragment>
 
 			}
 
@@ -77,8 +78,6 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let container, stats;
 
 			let cameraRTT, sceneRTT, sceneScreen, renderer, zmesh1, zmesh2;
@@ -112,7 +111,7 @@
 				light.position.set( 0, 0, 1 ).normalize();
 				sceneRTT.add( light );
 
-				light = new THREE.DirectionalLight( 0xffaaaa, 1.5 );
+				light = new THREE.DirectionalLight( 0xffd5d5, 1.5 );
 				light.position.set( 0, 0, - 1 ).normalize();
 				sceneRTT.add( light );
 
@@ -144,8 +143,8 @@
 
 				const geometry = new THREE.TorusGeometry( 100, 25, 15, 30 );
 
-				const mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular: 0xffaa00, shininess: 5 } );
-				const mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular: 0xff2200, shininess: 5 } );
+				const mat1 = new THREE.MeshPhongMaterial( { color: 0x9c9c9c, specular: 0xffaa00, shininess: 5 } );
+				const mat2 = new THREE.MeshPhongMaterial( { color: 0x9c0000, specular: 0xff2200, shininess: 5 } );
 
 				zmesh1 = new THREE.Mesh( geometry, mat1 );
 				zmesh1.position.set( 0, 0, 100 );

examples/webgl_rtt.html

@@ -19,6 +19,7 @@
 			void main() {
 
 				gl_FragColor = texture2D( tDiffuse, vUv );
+				#include <encodings_fragment>
 
 			}
 
@@ -74,8 +75,6 @@
 
 			import Stats from 'three/addons/libs/stats.module.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let container, stats;
 
 			let cameraRTT, camera, sceneRTT, sceneScreen, scene, renderer, zmesh1, zmesh2;
@@ -112,7 +111,7 @@
 				light.position.set( 0, 0, 1 ).normalize();
 				sceneRTT.add( light );
 
-				light = new THREE.DirectionalLight( 0xffaaaa, 1.5 );
+				light = new THREE.DirectionalLight( 0xffd5d5, 1.5 );
 				light.position.set( 0, 0, - 1 ).normalize();
 				sceneRTT.add( light );
 
@@ -144,8 +143,8 @@
 
 				const torusGeometry = new THREE.TorusGeometry( 100, 25, 15, 30 );
 
-				const mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular: 0xffaa00, shininess: 5 } );
-				const mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular: 0xff2200, shininess: 5 } );
+				const mat1 = new THREE.MeshPhongMaterial( { color: 0x9c9c9c, specular: 0xffaa00, shininess: 5 } );
+				const mat2 = new THREE.MeshPhongMaterial( { color: 0x9c0000, specular: 0xff2200, shininess: 5 } );
 
 				zmesh1 = new THREE.Mesh( torusGeometry, mat1 );
 				zmesh1.position.set( 0, 0, 100 );
@@ -184,7 +183,6 @@
 				}
 
 				renderer = new THREE.WebGLRenderer();
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.autoClear = false;

examples/webgl_shadowmap_pcss.html

@@ -139,8 +139,6 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let stats;
 			let camera, scene, renderer;
 
@@ -175,9 +173,9 @@
 
 				// lights
 
-				scene.add( new THREE.AmbientLight( 0x666666 ) );
+				scene.add( new THREE.AmbientLight( 0xaaaaaa ) );
 
-				const light = new THREE.DirectionalLight( 0xdfebff, 1.75 );
+				const light = new THREE.DirectionalLight( 0xf0f6ff, 1.75 );
 				light.position.set( 2, 8, 4 );
 
 				light.castShadow = true;
@@ -215,7 +213,7 @@
 
 				// ground
 
-				const groundMaterial = new THREE.MeshPhongMaterial( { color: 0x404040, specular: 0x111111 } );
+				const groundMaterial = new THREE.MeshPhongMaterial( { color: 0x898989 } );
 
 				const ground = new THREE.Mesh( new THREE.PlaneGeometry( 20000, 20000, 8, 8 ), groundMaterial );
 				ground.rotation.x = - Math.PI / 2;

examples/webgl_simple_gi.html

@@ -31,8 +31,6 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			class GIMesh extends THREE.Mesh {
 
 				copy( source ) {
@@ -198,7 +196,6 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer.domElement );
 
 				new SimpleGI( renderer, scene );

examples/webgl_water.html

@@ -34,8 +34,6 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { Water } from 'three/addons/objects/Water2.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let scene, camera, clock, renderer, water;
 
 			let torusKnot;
@@ -91,6 +89,7 @@
 					map.wrapT = THREE.RepeatWrapping;
 					map.anisotropy = 16;
 					map.repeat.set( 4, 4 );
+					map.colorSpace = THREE.SRGBColorSpace;
 					groundMaterial.map = map;
 					groundMaterial.needsUpdate = true;
 
@@ -122,12 +121,13 @@
 					'posy.jpg', 'negy.jpg',
 					'posz.jpg', 'negz.jpg'
 				] );
+				cubeTexture.colorSpace = THREE.SRGBColorSpace;
 
 				scene.background = cubeTexture;
 
 				// light
 
-				const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
+				const ambientLight = new THREE.AmbientLight( 0xe7e7e7, 0.4 );
 				scene.add( ambientLight );
 
 				const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
@@ -139,7 +139,6 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer.domElement );
 
 				// gui

examples/webgl_water_flowmap.html

@@ -34,8 +34,6 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { Water } from 'three/addons/objects/Water2.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let scene, camera, renderer, water;
 
 			init();
@@ -56,7 +54,7 @@
 				// ground
 
 				const groundGeometry = new THREE.PlaneGeometry( 20, 20, 10, 10 );
-				const groundMaterial = new THREE.MeshBasicMaterial( { color: 0xcccccc } );
+				const groundMaterial = new THREE.MeshBasicMaterial( { color: 0xe7e7e7 } );
 				const ground = new THREE.Mesh( groundGeometry, groundMaterial );
 				ground.rotation.x = Math.PI * - 0.5;
 				scene.add( ground );
@@ -68,6 +66,7 @@
 					map.wrapT = THREE.RepeatWrapping;
 					map.anisotropy = 16;
 					map.repeat.set( 4, 4 );
+					map.colorSpace = THREE.SRGBColorSpace;
 					groundMaterial.map = map;
 					groundMaterial.needsUpdate = true;
 
@@ -104,7 +103,6 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer.domElement );
 
 				//