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

* Examples: More sRGB and color correction fixes.

* Examples: Update screenshots.

* Examples: Update screenshots.

Author: Mugen87

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>
 		}`
 
 };