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

* Examples: More sRGB and color management usage.

* Examples: Update screenshots.

examples/jsm/objects/Water.js

@@ -181,7 +181,8 @@ class Water extends Mesh {
 					gl_FragColor = vec4( outgoingLight, alpha );
 
 					#include <tonemapping_fragment>
-					#include <fog_fragment>
+					#include <encodings_fragment>
+					#include <fog_fragment>	
 				}`
 
 		};

examples/jsm/shaders/ToonShader.js

@@ -78,7 +78,9 @@ const ToonShader1 = {
 
 				gl_FragColor = vec4( 1.0 - 2.0 * ( 1.0 - intensity ) * ( 1.0 - uBaseColor ), 1.0 );
 
-		}
+			}
+
+			#include <encodings_fragment>
 
 		}`
 
@@ -146,6 +148,8 @@ const ToonShader2 = {
 
 			}
 
+			#include <encodings_fragment>
+
 		}`
 
 };
@@ -240,6 +244,8 @@ const ToonShaderHatching = {
 
 			}
 
+			#include <encodings_fragment>
+
 		}`
 
 };
@@ -286,12 +292,12 @@ const ToonShaderDotted = {
 
 		void main() {
 
-		float directionalLightWeighting = max( dot( normalize(vNormal), uDirLightPos ), 0.0);
-		vec3 lightWeighting = uAmbientLightColor + uDirLightColor * directionalLightWeighting;
+			float directionalLightWeighting = max( dot( normalize(vNormal), uDirLightPos ), 0.0);
+			vec3 lightWeighting = uAmbientLightColor + uDirLightColor * directionalLightWeighting;
 
-		gl_FragColor = vec4( uBaseColor, 1.0 );
+			gl_FragColor = vec4( uBaseColor, 1.0 );
 
-		if ( length(lightWeighting) < 1.00 ) {
+			if ( length(lightWeighting) < 1.00 ) {
 
 				if ( ( mod(gl_FragCoord.x, 4.001) + mod(gl_FragCoord.y, 4.0) ) > 6.00 ) {
 
@@ -311,6 +317,8 @@ const ToonShaderDotted = {
 
 			}
 
+			#include <encodings_fragment>
+
 		}`
 
 };

examples/webgl_gpgpu_birds.html

@@ -319,8 +319,6 @@
 
 			import { GPUComputationRenderer } from 'three/addons/misc/GPUComputationRenderer.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			/* TEXTURE WIDTH FOR SIMULATION */
 			const WIDTH = 32;
 
@@ -398,7 +396,7 @@
 						const y = ~ ~ ( birdIndex / WIDTH ) / WIDTH;
 
 						const c = new THREE.Color(
-							0x444444 +
+							0x666666 +
 							~ ~ ( v / 9 ) / BIRDS * 0x666666
 						);
 

examples/webgl_marchingcubes.html

@@ -39,8 +39,6 @@
 		import { MarchingCubes } from 'three/addons/objects/MarchingCubes.js';
 		import { ToonShader1, ToonShader2, ToonShaderHatching, ToonShaderDotted } from 'three/addons/shaders/ToonShader.js';
 
-		THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 		let container, stats;
 
 		let camera, scene, renderer;
@@ -80,11 +78,11 @@
 			light.position.set( 0.5, 0.5, 1 );
 			scene.add( light );
 
-			pointLight = new THREE.PointLight( 0xff3300 );
+			pointLight = new THREE.PointLight( 0xff7c00 );
 			pointLight.position.set( 0, 0, 100 );
 			scene.add( pointLight );
 
-			ambientLight = new THREE.AmbientLight( 0x080808 );
+			ambientLight = new THREE.AmbientLight( 0x323232 );
 			scene.add( ambientLight );
 
 			// MATERIALS
@@ -162,6 +160,9 @@
 			const refractionCube = cubeTextureLoader.load( urls );
 			refractionCube.mapping = THREE.CubeRefractionMapping;
 
+			reflectionCube.colorSpace = THREE.SRGBColorSpace;
+			refractionCube.colorSpace = THREE.SRGBColorSpace;
+
 			// toons
 
 			const toonMaterial1 = createShaderMaterial( ToonShader1, light, ambientLight );
@@ -172,17 +173,18 @@
 			const texture = new THREE.TextureLoader().load( 'textures/uv_grid_opengl.jpg' );
 			texture.wrapS = THREE.RepeatWrapping;
 			texture.wrapT = THREE.RepeatWrapping;
+			texture.colorSpace = THREE.SRGBColorSpace;
 
 			const materials = {
-				'shiny': new THREE.MeshStandardMaterial( { color: 0x550000, envMap: reflectionCube, roughness: 0.1, metalness: 1.0 } ),
+				'shiny': new THREE.MeshStandardMaterial( { color: 0x9c0000, envMap: reflectionCube, roughness: 0.1, metalness: 1.0 } ),
 				'chrome': new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: reflectionCube } ),
 				'liquid': new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: refractionCube, refractionRatio: 0.85 } ),
-				'matte': new THREE.MeshPhongMaterial( { specular: 0x111111, shininess: 1 } ),
+				'matte': new THREE.MeshPhongMaterial( { specular: 0x494949, shininess: 1 } ),
 				'flat': new THREE.MeshLambertMaterial( { /*TODO flatShading: true */ } ),
 				'textured': new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 1, map: texture } ),
 				'colors': new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 2, vertexColors: true } ),
 				'multiColors': new THREE.MeshPhongMaterial( { shininess: 2, vertexColors: true } ),
-				'plastic': new THREE.MeshPhongMaterial( { specular: 0x888888, shininess: 250 } ),
+				'plastic': new THREE.MeshPhongMaterial( { specular: 0xc1c1c1, shininess: 250 } ),
 				'toon1': toonMaterial1,
 				'toon2': toonMaterial2,
 				'hatching': hatchingMaterial,
@@ -286,12 +288,12 @@
 
 			const rainbow = [
 				new THREE.Color( 0xff0000 ),
-				new THREE.Color( 0xff7f00 ),
+				new THREE.Color( 0xffbb00 ),
 				new THREE.Color( 0xffff00 ),
 				new THREE.Color( 0x00ff00 ),
 				new THREE.Color( 0x0000ff ),
-				new THREE.Color( 0x4b0082 ),
-				new THREE.Color( 0x9400d3 )
+				new THREE.Color( 0x9400bd ),
+				new THREE.Color( 0xc800eb )
 			];
 			const subtract = 12;
 			const strength = 1.2 / ( ( Math.sqrt( numblobs ) - 1 ) / 4 + 1 );

examples/webgl_materials_subsurface_scattering.html

@@ -37,8 +37,6 @@
 		import { SubsurfaceScatteringShader } from 'three/addons/shaders/SubsurfaceScatteringShader.js';
 		import { FBXLoader } from 'three/addons/loaders/FBXLoader.js';
 
-		THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 		let container, stats;
 		let camera, scene, renderer;
 		let model;
@@ -58,21 +56,21 @@
 
 			// Lights
 
-			scene.add( new THREE.AmbientLight( 0x888888 ) );
+			scene.add( new THREE.AmbientLight( 0xc1c1c1 ) );
 
 			const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.03 );
 			directionalLight.position.set( 0.0, 0.5, 0.5 ).normalize();
 			scene.add( directionalLight );
 
-			const pointLight1 = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x888888 } ) );
-			pointLight1.add( new THREE.PointLight( 0x888888, 7.0, 300 ) );
+			const pointLight1 = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xc1c1c1 } ) );
+			pointLight1.add( new THREE.PointLight( 0xc1c1c1, 7.0, 300 ) );
 			scene.add( pointLight1 );
 			pointLight1.position.x = 0;
 			pointLight1.position.y = - 50;
 			pointLight1.position.z = 350;
 
-			const pointLight2 = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x888800 } ) );
-			pointLight2.add( new THREE.PointLight( 0x888800, 1.0, 500 ) );
+			const pointLight2 = new THREE.Mesh( new THREE.SphereGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xc1c100 } ) );
+			pointLight2.add( new THREE.PointLight( 0xc1c100, 1.0, 500 ) );
 			scene.add( pointLight2 );
 			pointLight2.position.x = - 100;
 			pointLight2.position.y = 20;
@@ -102,6 +100,8 @@
 
 			const loader = new THREE.TextureLoader();
 			const imgTexture = loader.load( 'models/fbx/white.jpg' );
+			imgTexture.colorSpace = THREE.SRGBColorSpace;
+
 			const thicknessTexture = loader.load( 'models/fbx/bunny_thickness.jpg' );
 			imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
 

examples/webgl_shaders_ocean.html

@@ -37,8 +37,6 @@
 			import { Water } from 'three/addons/objects/Water.js';
 			import { Sky } from 'three/addons/objects/Sky.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let container, stats;
 			let camera, scene, renderer;
 			let controls, water, sun, mesh;
@@ -55,8 +53,8 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.toneMapping = THREE.ACESFilmicToneMapping;
+				renderer.toneMappingExposure = 0.5;
 				container.appendChild( renderer.domElement );
 
 				//