Examples: Updates for color management (pt3) (mrdoob#25889)

* LWOLoader: Updates for color management
* MMDLoader: Updates for color management
* Examples: Update more loader examples for color management

---------

Co-authored-by: Michael Herzog <michael.herzog@human-interactive.org>

Author: 2 people

examples/jsm/loaders/LWOLoader.js

@@ -35,6 +35,7 @@ import {
 	Points,
 	PointsMaterial,
 	RepeatWrapping,
+	SRGBColorSpace,
 	TextureLoader,
 	Vector2
 } from 'three';
@@ -464,17 +465,20 @@ class MaterialParser {
 
 				case 'Color':
 					maps.map = texture;
+					maps.map.colorSpace = SRGBColorSpace;
 					break;
 				case 'Roughness':
 					maps.roughnessMap = texture;
 					maps.roughness = 1;
 					break;
 				case 'Specular':
 					maps.specularMap = texture;
+					maps.specularMap.colorSpace = SRGBColorSpace;
 					maps.specular = 0xffffff;
 					break;
 				case 'Luminous':
 					maps.emissiveMap = texture;
+					maps.emissiveMap.colorSpace = SRGBColorSpace;
 					maps.emissive = 0x808080;
 					break;
 				case 'Luminous Color':
@@ -532,6 +536,7 @@ class MaterialParser {
 
 					case 'Color':
 						maps.map = texture;
+						maps.map.colorSpace = SRGBColorSpace;
 						break;
 					case 'Diffuse':
 						maps.aoMap = texture;
@@ -542,10 +547,12 @@ class MaterialParser {
 						break;
 					case 'Specular':
 						maps.specularMap = texture;
+						maps.specularMap.colorSpace = SRGBColorSpace;
 						maps.specular = 0xffffff;
 						break;
 					case 'Luminosity':
 						maps.emissiveMap = texture;
+						maps.emissiveMap.colorSpace = SRGBColorSpace;
 						maps.emissive = 0x808080;
 						break;
 					case 'Metallic':
@@ -581,7 +588,11 @@ class MaterialParser {
 
 			params.color = new Color().fromArray( attributes.Color.value );
 
-		} else params.color = new Color();
+		} else {
+
+			params.color = new Color();
+
+		}
 
 
 		if ( attributes.Transparency && attributes.Transparency.value !== 0 ) {

examples/jsm/loaders/MMDLoader.js

@@ -4,6 +4,7 @@ import {
 	Bone,
 	BufferGeometry,
 	Color,
+	ColorManagement,
 	CustomBlending,
 	TangentSpaceNormalMap,
 	DoubleSide,
@@ -1108,6 +1109,14 @@ 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.fog = true;

examples/screenshots/webgl_geometry_extrude_shapes2.jpg

@@ -38,8 +38,6 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Confirm correct color management.
-
 			// From d3-threeD.js
 			/* This Source Code Form is subject to the terms of the Mozilla Public
 			 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
@@ -443,7 +441,6 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				container.appendChild( renderer.domElement );
 
 				//

examples/screenshots/webgl_loader_lwo.jpg

@@ -34,8 +34,6 @@
 			import TWEEN from 'three/addons/libs/tween.module.js';
 			import { ColladaLoader } from 'three/addons/loaders/ColladaLoader.js';
 
-			THREE.ColorManagement.enabled = false; // TODO: Consider enabling color management.
-
 			let container, stats;
 
 			let camera, scene, renderer;
@@ -84,7 +82,7 @@
 
 				// Grid
 
-				const grid = new THREE.GridHelper( 20, 20, 0x888888, 0x444444 );
+				const grid = new THREE.GridHelper( 20, 20, 0xc1c1c1, 0x8d8d8d );
 				scene.add( grid );
 
 				// Add the COLLADA
@@ -96,7 +94,7 @@
 
 				// Lights
 
-				const light = new THREE.HemisphereLight( 0xffeeee, 0x111122 );
+				const light = new THREE.HemisphereLight( 0xfff7f7, 0x494966 );
 				scene.add( light );
 
 				const pointLight = new THREE.PointLight( 0xffffff, 0.3 );