Examples: Clean up. (#26135)

* Examples: Clean up.

* Examples: Update screenshots.

* Examples: Clean up.

* VRMLLoader: Fix typo.

* Examples: Remove useless check.

* VRMLLoader: Fix colors one more time.

* Examples: Update screenshots.

Author: Mugen87

examples/jsm/loaders/MMDLoader.js

@@ -4,7 +4,6 @@ import {
 	Bone,
 	BufferGeometry,
 	Color,
-	ColorManagement,
 	CustomBlending,
 	TangentSpaceNormalMap,
 	DoubleSide,
@@ -1141,13 +1140,9 @@ class MaterialBuilder {
 			params.emissive = new Color().fromArray( material.ambient );
 			params.transparent = params.opacity !== 1.0;
 
-			if ( ColorManagement.enabled === true ) {
-
-				params.diffuse.convertSRGBToLinear();
-				params.specular.convertSRGBToLinear();
-				params.emissive.convertSRGBToLinear();
-
-			}
+			params.diffuse.convertSRGBToLinear();
+			params.specular.convertSRGBToLinear();
+			params.emissive.convertSRGBToLinear();
 
 			//
 

examples/jsm/loaders/VRMLLoader.js

@@ -919,6 +919,7 @@ class VRMLLoader extends Loader {
 				} else {
 
 					skyMaterial.color.setRGB( skyColor[ 0 ], skyColor[ 1 ], skyColor[ 2 ] );
+					skyMaterial.convertSRGBToLinear();
 
 				}
 
@@ -1224,18 +1225,21 @@ class VRMLLoader extends Loader {
 
 					case 'diffuseColor':
 						materialData.diffuseColor = new Color( fieldValues[ 0 ], fieldValues[ 1 ], fieldValues[ 2 ] );
+						materialData.diffuseColor.convertSRGBToLinear();
 						break;
 
 					case 'emissiveColor':
 						materialData.emissiveColor = new Color( fieldValues[ 0 ], fieldValues[ 1 ], fieldValues[ 2 ] );
+						materialData.emissiveColor.convertSRGBToLinear();
 						break;
 
 					case 'shininess':
 						materialData.shininess = fieldValues[ 0 ];
 						break;
 
 					case 'specularColor':
-						materialData.emissiveColor = new Color( fieldValues[ 0 ], fieldValues[ 1 ], fieldValues[ 2 ] );
+						materialData.specularColor = new Color( fieldValues[ 0 ], fieldValues[ 1 ], fieldValues[ 2 ] );
+						materialData.specularColor.convertSRGBToLinear();
 						break;
 
 					case 'transparency':

examples/jsm/math/Lut.js

@@ -1,5 +1,6 @@
 import {
 	Color,
+	LinearSRGBColorSpace,
 	MathUtils
 } from 'three';
 
@@ -75,8 +76,8 @@ class Lut {
 					const min = this.map[ j ][ 0 ];
 					const max = this.map[ j + 1 ][ 0 ];
 
-					minColor.set( this.map[ j ][ 1 ] );
-					maxColor.set( this.map[ j + 1 ][ 1 ] );
+					minColor.setHex( this.map[ j ][ 1 ], LinearSRGBColorSpace );
+					maxColor.setHex( this.map[ j + 1 ][ 1 ], LinearSRGBColorSpace );
 
 					const color = new Color().lerpColors( minColor, maxColor, ( alpha - min ) / ( max - min ) );
 
@@ -165,8 +166,8 @@ class Lut {
 					const min = this.map[ j - 1 ][ 0 ];
 					const max = this.map[ j ][ 0 ];
 
-					minColor.set( this.map[ j - 1 ][ 1 ] );
-					maxColor.set( this.map[ j ][ 1 ] );
+					minColor.setHex( this.map[ j - 1 ][ 1 ], LinearSRGBColorSpace );
+					maxColor.setHex( this.map[ j ][ 1 ], LinearSRGBColorSpace );
 
 					finalColor.lerpColors( minColor, maxColor, ( i - min ) / ( max - min ) );
 

examples/screenshots/webgl_geometry_colors_lookuptable.jpg

@@ -46,8 +46,6 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 			import { Lut } from 'three/addons/math/Lut.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			let container;
 
 			let perpCamera, orthoCamera, renderer, lut;
@@ -83,6 +81,7 @@
 				sprite = new THREE.Sprite( new THREE.SpriteMaterial( {
 					map: new THREE.CanvasTexture( lut.createCanvas() )
 				} ) );
+				sprite.material.map.colorSpace = THREE.SRGBColorSpace;
 				sprite.scale.x = 0.125;
 				uiScene.add( sprite );
 
@@ -102,7 +101,6 @@
 				perpCamera.add( pointLight );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.autoClear = false;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( width, height );
@@ -183,22 +181,15 @@
 				const geometry = mesh.geometry;
 				const pressures = geometry.attributes.pressure;
 				const colors = geometry.attributes.color;
+				const color = new THREE.Color();
 
 				for ( let i = 0; i < pressures.array.length; i ++ ) {
 
 					const colorValue = pressures.array[ i ];
 
-					const color = lut.getColor( colorValue );
-
-					if ( color === undefined ) {
-
-						console.log( 'Unable to determine color for value:', colorValue );
+					color.copy( lut.getColor( colorValue ) ).convertSRGBToLinear();
 
-					} else {
-
-						colors.setXYZ( i, color.r, color.g, color.b );
-
-					}
+					colors.setXYZ( i, color.r, color.g, color.b );
 
 				}