ColorManagement: Rename .legacyMode=false → .enabled=true (#24940)

* ColorManagement: Rename .legacyMode=false → .enabled=true

* Update 'webgl_mirror' to use ColorManagement.enabled = true

* ColorManagement: Add revision to rename warning.

* Update Editor

docs/manual/en/introduction/Color-management.html

@@ -158,11 +158,11 @@
 		each have an associated color space. Those not already in the Linear-sRGB working color
 		space must be converted, and textures be given the correct <i>texture.encoding</i> assignment.
 		Certain conversions (for hexadecimal and CSS colors in sRGB) can be made automatically if
-		the legacy color management mode is disabled before initializing colors:
+		the THREE.ColorManagement API is enabled before initializing colors:
 	</p>
 
 	<code>
-THREE.ColorManagement.legacyMode = false;
+THREE.ColorManagement.enabled = true;
 	</code>
 
 	<ul>
@@ -264,7 +264,7 @@ renderer.outputEncoding = THREE.sRGBEncoding; // optional with post-processing
 	</code>
 
 	<p>
-		With <i>ColorManagement.legacyMode = false</i> set (recommended), certain conversions
+		With <i>ColorManagement.enabled = true</i> set (recommended), certain conversions
 		are made automatically. Because hexadecimal and CSS colors are generally sRGB, [page:Color]
 		methods will automatically convert these inputs from sRGB to Linear-sRGB in setters, or
 		convert from Linear-sRGB to sRGB when returning hexadecimal or CSS output from getters.

docs/manual/fr/introduction/Color-management.html

@@ -162,7 +162,7 @@
 	</p>
 
 	<code>
-THREE.ColorManagement.legacyMode = false;
+THREE.ColorManagement.enabled = true;
 	</code>
 
 	<ul>
@@ -264,7 +264,7 @@ renderer.outputEncoding = THREE.sRGBEncoding; // optional with post-processing
 	</code>
 
 	<p>
-		Avec <i>ColorManagement.legacyMode = false</i> d'activé (recommandé), certaines conversions
+		Avec <i>ColorManagement.enabled = true</i> d'activé (recommandé), certaines conversions
 		sont faites automatiquement. Parce que l'héxadécimal et les couleurs CSS sont généralement en sRGB, les méthodes [page:Color]
 		vont automatiquement convertir ces entrées du sRGB au sRGB-Linéaire dans des setters, ou
 		convertir depuis du sRGB-Linéaire au sRGB lors du renvoi de valeurs héxadécimales ou CSS depuis les getters.

docs/manual/it/introduction/Color-management.html

@@ -195,7 +195,7 @@
 			colori:
 		</p>
 
-		<code> THREE.ColorManagement.legacyMode = false; </code>
+		<code> THREE.ColorManagement.enabled = true; </code>
 
 		<ul>
 			<li>
@@ -320,7 +320,7 @@
 		</code>
 
 		<p>
-			Con <i>ColorManagement.legacyMode = false</i> impostato (consigliato),
+			Con <i>ColorManagement.enabled = true</i> impostato (consigliato),
 			alcune conversioni vengono effettuate automaticamente. Poiché i colori
 			esadecimali e CSS sono generalmente sRGB, i metodi [page:Color]
 			convertiranno automaticamente questi input da sRGB a Linear-sRGB nei

docs/manual/pt-br/introduction/Color-management.html

@@ -162,7 +162,7 @@
 	</p>
 
 	<code>
-THREE.ColorManagement.legacyMode = false;
+THREE.ColorManagement.enabled = true;
 	</code>
 
 	<ul>
@@ -265,7 +265,7 @@ renderer.outputEncoding = THREE.sRGBEncoding; // optional with post-processing
 	</code>
 
 	<p>
-		Com <i>ColorManagement.legacyMode = false</i> definido (recomendado), determinadas conversões
+		Com <i>ColorManagement.enabled = true</i> definido (recomendado), determinadas conversões
 		são feitas automaticamente. Como as cores hexadecimais e CSS geralmente são sRGB, métodos [page:Color]
 		irão converter automaticamente essas entradas de sRGB para Linear-sRGB em setters, ou
 		converter de Linear-sRGB para sRGB ao retornar hexadecimal ou CSS de getters.

editor/js/Editor.js

@@ -7,7 +7,7 @@ import { Strings } from './Strings.js';
 import { Storage as _Storage } from './Storage.js';
 import { Selector } from './Viewport.Selector.js';
 
-THREE.ColorManagement.legacyMode = false;
+THREE.ColorManagement.enabled = true;
 
 var _DEFAULT_CAMERA = new THREE.PerspectiveCamera( 50, 1, 0.01, 1000 );
 _DEFAULT_CAMERA.name = 'Camera';

editor/js/libs/app/index.html

@@ -27,7 +27,7 @@
 			window.THREE = THREE; // Used by APP Scripts.
 			window.VRButton = VRButton; // Used by APP Scripts.
 
-			THREE.ColorManagement.legacyMode = false;
+			THREE.ColorManagement.enabled = true;
 
 			var loader = new THREE.FileLoader();
 			loader.load( 'app.json', function ( text ) {

examples/webgl_mirror.html

@@ -48,6 +48,8 @@
 
 			let groundMirror, verticalMirror;
 
+			THREE.ColorManagement.enabled = true;
+
 			init();
 			animate();
 
@@ -87,7 +89,7 @@
 					clipBias: 0.003,
 					textureWidth: window.innerWidth * window.devicePixelRatio,
 					textureHeight: window.innerHeight * window.devicePixelRatio,
-					color: 0x777777
+					color: 0xb5b5b5
 				} );
 				groundMirror.position.y = 0.5;
 				groundMirror.rotateX( - Math.PI / 2 );
@@ -98,7 +100,7 @@
 					clipBias: 0.003,
 					textureWidth: window.innerWidth * window.devicePixelRatio,
 					textureHeight: window.innerHeight * window.devicePixelRatio,
-					color: 0x889999
+					color: 0xc1cbcb
 				} );
 				verticalMirror.position.y = 50;
 				verticalMirror.position.z = - 50;
@@ -109,7 +111,7 @@
 				scene.add( sphereGroup );
 
 				geometry = new THREE.CylinderGeometry( 0.1, 15 * Math.cos( Math.PI / 180 * 30 ), 0.1, 24, 1 );
-				material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x444444 } );
+				material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x8d8d8d } );
 				const sphereCap = new THREE.Mesh( geometry, material );
 				sphereCap.position.y = - 15 * Math.sin( Math.PI / 180 * 30 ) - 0.05;
 				sphereCap.rotateX( - Math.PI );
@@ -124,7 +126,7 @@
 				sphereGroup.add( halfSphere );
 
 				geometry = new THREE.IcosahedronGeometry( 5, 0 );
-				material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x333333, flatShading: true } );
+				material = new THREE.MeshPhongMaterial( { color: 0xffffff, emissive: 0x7b7b7b, flatShading: true } );
 				smallSphere = new THREE.Mesh( geometry, material );
 				scene.add( smallSphere );
 
@@ -138,7 +140,7 @@
 				planeBottom.rotateX( - Math.PI / 2 );
 				scene.add( planeBottom );
 
-				const planeFront = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0x7f7fff } ) );
+				const planeFront = new THREE.Mesh( planeGeo, new THREE.MeshPhongMaterial( { color: 0xbbbbfe } ) );
 				planeFront.position.z = 50;
 				planeFront.position.y = 50;
 				planeFront.rotateY( Math.PI );
@@ -157,7 +159,7 @@
 				scene.add( planeLeft );
 
 				// lights
-				const mainLight = new THREE.PointLight( 0xcccccc, 1.5, 250 );
+				const mainLight = new THREE.PointLight( 0xe7e7e7, 1.5, 250 );
 				mainLight.position.y = 60;
 				scene.add( mainLight );
 
@@ -169,7 +171,7 @@
 				redLight.position.set( - 550, 50, 0 );
 				scene.add( redLight );
 
-				const blueLight = new THREE.PointLight( 0x7f7fff, 0.25, 1000 );
+				const blueLight = new THREE.PointLight( 0xbbbbfe, 0.25, 1000 );
 				blueLight.position.set( 0, 50, 550 );
 				scene.add( blueLight );
 

src/math/ColorManagement.js

@@ -12,8 +12,7 @@ export function LinearToSRGB( c ) {
 
 }
 
-// JavaScript RGB-to-RGB transforms, defined as
-// FN[InputColorSpace][OutputColorSpace] callback functions.
+// RGB-to-RGB transforms, defined as `FN[InputColorSpace][OutputColorSpace] → conversionFn`.
 const FN = {
 	[ SRGBColorSpace ]: { [ LinearSRGBColorSpace ]: SRGBToLinear },
 	[ LinearSRGBColorSpace ]: { [ SRGBColorSpace ]: LinearToSRGB },
@@ -21,7 +20,23 @@ const FN = {
 
 export const ColorManagement = {
 
-	legacyMode: true,
+	enabled: false,
+
+	get legacyMode() {
+
+		console.warn( 'THREE.ColorManagement: .legacyMode=false renamed to .enabled=true in r147.' );
+
+		return ! this.enabled;
+
+	},
+
+	set legacyMode( legacyMode ) {
+
+		console.warn( 'THREE.ColorManagement: .legacyMode=false renamed to .enabled=true in r147.' );
+
+		this.enabled = ! legacyMode;
+
+	},
 
 	get workingColorSpace() {
 
@@ -37,7 +52,7 @@ export const ColorManagement = {
 
 	convert: function ( color, sourceColorSpace, targetColorSpace ) {
 
-		if ( this.legacyMode || sourceColorSpace === targetColorSpace || ! sourceColorSpace || ! targetColorSpace ) {
+		if ( this.enabled === false || sourceColorSpace === targetColorSpace || ! sourceColorSpace || ! targetColorSpace ) {
 
 			return color;