Examples: Move reflector/refractor demos to sRGB. (#26070)

* Examples: Move reflector/refractor demos to sRGB.

* Examples: Update screenshots.

examples/jsm/shaders/WaterRefractionShader.js

@@ -76,13 +76,16 @@ const WaterRefractionShader = {
 
 			// new uv coords
 
-		 vec4 uv = vec4( vUvRefraction );
-		 uv.xy += distortion;
+			vec4 uv = vec4( vUvRefraction );
+			uv.xy += distortion;
 
 			vec4 base = texture2DProj( tDiffuse, uv );
 
 			gl_FragColor = vec4( blendOverlay( base.rgb, color ), 1.0 );
 
+			#include <tonemapping_fragment>
+			#include <encodings_fragment>
+
 		}`
 
 };

examples/webgl_mirror.html

@@ -40,8 +40,6 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { Reflector } from 'three/addons/objects/Reflector.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let camera, scene, renderer;
 
 			let cameraControls;
@@ -59,7 +57,6 @@
 
 				// renderer
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -141,7 +138,7 @@
 				planeBottom.rotateX( - Math.PI / 2 );
 				scene.add( planeBottom );
 
-				const planeFront = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xbbbbfe } ) );
+				const planeFront = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0x7f7fff } ) );
 				planeFront.position.z = 50;
 				planeFront.position.y = 50;
 				planeFront.rotateY( Math.PI );

examples/webgl_refraction.html

@@ -42,8 +42,6 @@
 			import { Refractor } from 'three/addons/objects/Refractor.js';
 			import { WaterRefractionShader } from 'three/addons/shaders/WaterRefractionShader.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let camera, scene, renderer, clock;
 
 			let refractor, smallSphere;
@@ -58,7 +56,6 @@
 
 				// renderer
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
@@ -81,7 +78,7 @@
 				const refractorGeometry = new THREE.PlaneGeometry( 90, 90 );
 
 				refractor = new Refractor( refractorGeometry, {
-					color: 0x999999,
+					color: 0xcbcbcb,
 					textureWidth: 1024,
 					textureHeight: 1024,
 					shader: WaterRefractionShader