Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 6, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
352c361
ColorManagement: Rename .legacyMode=false → .enabled=true
donmccurdy Nov 12, 2022
7b3de95
Update 'webgl_mirror' to use ColorManagement.enabled = true
donmccurdy Nov 12, 2022
88a07fd
ColorManagement: Add revision to rename warning.
donmccurdy Nov 13, 2022
edd78bf
Update Editor
donmccurdy Feb 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/manual/en/introduction/Color-management.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,11 +158,11 @@ <h3>Input color space</h3>
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>
Expand Down Expand Up @@ -264,7 +264,7 @@ <h2>Working with THREE.Color instances</h2>
</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.
Expand Down
4 changes: 2 additions & 2 deletions docs/manual/fr/introduction/Color-management.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ <h3>Espaces colorimétriques d'entrée</h3>
</p>

<code>
THREE.ColorManagement.legacyMode = false;
THREE.ColorManagement.enabled = true;
</code>

<ul>
Expand Down Expand Up @@ -264,7 +264,7 @@ <h2>Utiliser des instances de THREE.Color</h2>
</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.
Expand Down
4 changes: 2 additions & 2 deletions docs/manual/it/introduction/Color-management.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ <h3>Input color space</h3>
colori:
</p>

<code> THREE.ColorManagement.legacyMode = false; </code>
<code> THREE.ColorManagement.enabled = true; </code>

<ul>
<li>
Expand Down Expand Up @@ -320,7 +320,7 @@ <h2>Lavorare con le istanze di THREE.Color</h2>
</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
Expand Down
4 changes: 2 additions & 2 deletions docs/manual/pt-br/introduction/Color-management.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,7 @@ <h3>Input do espaço de cores</h3>
</p>

<code>
THREE.ColorManagement.legacyMode = false;
THREE.ColorManagement.enabled = true;
</code>

<ul>
Expand Down Expand Up @@ -265,7 +265,7 @@ <h2>Trabalhando com instâncias THREE.Color</h2>
</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.
Expand Down
2 changes: 1 addition & 1 deletion editor/js/Editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
2 changes: 1 addition & 1 deletion editor/js/libs/app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ) {
Expand Down
16 changes: 9 additions & 7 deletions examples/webgl_mirror.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,8 @@

let groundMirror, verticalMirror;

THREE.ColorManagement.enabled = true;

init();
animate();

Expand Down Expand Up @@ -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 );
Expand All @@ -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;
Expand All @@ -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 );
Expand All @@ -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 );

Expand All @@ -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 );
Expand All @@ -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 );

Expand All @@ -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 );

Expand Down
23 changes: 19 additions & 4 deletions src/math/ColorManagement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,31 @@ 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 },
};

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() {

Expand All @@ -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;

Expand Down