Examples: More sRGB and color management fixes. (#26090)

* Examples: More sRGB and color correction fixes.

* Examples: Update screenshots.

* Examples: Update screenshots.

examples/jsm/cameras/CinematicCamera.js

@@ -9,8 +9,7 @@ import {
 	WebGLRenderTarget
 } from 'three';
 
-import { BokehShader } from '../shaders/BokehShader2.js';
-import { BokehDepthShader } from '../shaders/BokehShader2.js';
+import { BokehShader, BokehDepthShader } from '../shaders/BokehShader2.js';
 
 class CinematicCamera extends PerspectiveCamera {
 

examples/jsm/loaders/PDBLoader.js

@@ -2,7 +2,8 @@ import {
 	BufferGeometry,
 	FileLoader,
 	Float32BufferAttribute,
-	Loader
+	Loader,
+	Color
 } from 'three';
 
 class PDBLoader extends Loader {
@@ -114,6 +115,8 @@ class PDBLoader extends Loader {
 
 			// atoms
 
+			const c = new Color();
+
 			for ( let i = 0, l = atoms.length; i < l; i ++ ) {
 
 				const atom = atoms[ i ];
@@ -128,7 +131,9 @@ class PDBLoader extends Loader {
 				const g = atom[ 3 ][ 1 ] / 255;
 				const b = atom[ 3 ][ 2 ] / 255;
 
-				colorsAtoms.push( r, g, b );
+				c.set( r, g, b ).convertSRGBToLinear();
+
+				colorsAtoms.push( c.r, c.g, c.b );
 
 			}
 

examples/jsm/misc/VolumeSlice.js

@@ -5,7 +5,8 @@ import {
 	Mesh,
 	MeshBasicMaterial,
 	PlaneGeometry,
-	Texture
+	Texture,
+	SRGBColorSpace
 } from 'three';
 
 /**
@@ -68,6 +69,7 @@ class VolumeSlice {
 		const canvasMap = new Texture( this.canvas );
 		canvasMap.minFilter = LinearFilter;
 		canvasMap.wrapS = canvasMap.wrapT = ClampToEdgeWrapping;
+		canvasMap.colorSpace = SRGBColorSpace;
 		const material = new MeshBasicMaterial( { map: canvasMap, side: DoubleSide, transparent: true } );
 		/**
 		 * @member {Mesh} mesh The mesh ready to get used in the scene

examples/jsm/shaders/BokehShader2.js

@@ -345,6 +345,9 @@ const BokehShader = {
 
 			gl_FragColor.rgb = col;
 			gl_FragColor.a = 1.0;
+
+			#include <tonemapping_fragment>
+			#include <encodings_fragment>
 		}`
 
 };

examples/webgl_camera_cinematic.html

@@ -43,8 +43,6 @@
 
 			import { CinematicCamera } from 'three/addons/cameras/CinematicCamera.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let camera, scene, raycaster, renderer, stats;
 
 			const mouse = new THREE.Vector2();

examples/webgl_loader_nrrd.html

@@ -38,8 +38,6 @@
 			import { NRRDLoader } from 'three/addons/loaders/NRRDLoader.js';
 			import { VTKLoader } from 'three/addons/loaders/VTKLoader.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let container,
 				stats,
 				camera,
@@ -157,7 +155,6 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 
 				container = document.createElement( 'div' );
 				document.body.appendChild( container );

examples/webgl_materials_normalmap.html

@@ -41,8 +41,6 @@
 			import { FXAAShader } from 'three/addons/shaders/FXAAShader.js';
 			import { GammaCorrectionShader } from 'three/addons/shaders/GammaCorrectionShader.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let container, stats, loader;
 
 			let camera, scene, renderer;
@@ -74,11 +72,11 @@
 				camera.position.z = 1200;
 
 				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x111111 );
+				scene.background = new THREE.Color( 0x494949 );
 
 				// LIGHTS
 
-				ambientLight = new THREE.AmbientLight( 0x444444 );
+				ambientLight = new THREE.AmbientLight( 0x8d8d8d );
 				scene.add( ambientLight );
 
 				pointLight = new THREE.PointLight( 0xffffff, 2, 1000 );
@@ -101,7 +99,7 @@
 				const normalMap = textureLoader.load( 'models/gltf/LeePerrySmith/Infinite-Level_02_Tangent_SmoothUV.jpg' );
 
 				const material = new THREE.MeshPhongMaterial( {
-					color: 0xdddddd,
+					color: 0xefefef,
 					specular: 0x222222,
 					shininess: 35,
 					map: diffuseMap,

examples/webgl_postprocessing_dof2.html

@@ -97,6 +97,7 @@
 							 r + 'posz.jpg', r + 'negz.jpg' ];
 
 				const textureCube = new THREE.CubeTextureLoader().load( urls );
+				textureCube.colorSpace = THREE.SRGBColorSpace;
 
 				scene.background = textureCube;
 
@@ -190,7 +191,7 @@
 
 				// lights
 
-				scene.add( new THREE.AmbientLight( 0x222222 ) );
+				scene.add( new THREE.AmbientLight( 0x666666 ) );
 
 				const directionalLight1 = new THREE.DirectionalLight( 0xffffff, 2 );
 				directionalLight1.position.set( 2, 1.2, 10 ).normalize();

examples/webgl_postprocessing_fxaa.html

@@ -53,11 +53,9 @@
 			import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
 			import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
 			import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';
-			import { CopyShader } from 'three/addons/shaders/CopyShader.js';
+			import { ColorCorrectionShader } from 'three/addons/shaders/ColorCorrectionShader.js';
 			import { FXAAShader } from 'three/addons/shaders/FXAAShader.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let camera, scene, renderer, clock, group, container;
 
 			let composer1, composer2, fxaaPass;
@@ -78,7 +76,7 @@
 
 				//
 
-				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
+				const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x8d8d8d );
 				hemiLight.position.set( 0, 1000, 0 );
 				scene.add( hemiLight );
 
@@ -91,7 +89,7 @@
 				group = new THREE.Group();
 
 				const geometry = new THREE.TetrahedronGeometry( 10 );
-				const material = new THREE.MeshStandardMaterial( { color: 0xee0808, flatShading: true } );
+				const material = new THREE.MeshStandardMaterial( { color: 0xf73232, flatShading: true } );
 
 				for ( let i = 0; i < 100; i ++ ) {
 
@@ -131,11 +129,11 @@
 
 				fxaaPass = new ShaderPass( FXAAShader );
 
-				const copyPass = new ShaderPass( CopyShader );
+				const colorCorrectionPass = new ShaderPass( ColorCorrectionShader );
 
 				composer1 = new EffectComposer( renderer );
 				composer1.addPass( renderPass );
-				composer1.addPass( copyPass );
+				composer1.addPass( colorCorrectionPass );
 
 				//
 
@@ -146,6 +144,10 @@
 
 				composer2 = new EffectComposer( renderer );
 				composer2.addPass( renderPass );
+				composer2.addPass( colorCorrectionPass );
+
+				// FXAA is engineered to be applied towards the end of engine post processing after conversion to low dynamic range and conversion to the sRGB color space for display.´
+
 				composer2.addPass( fxaaPass );
 
 				//