Skip to content
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.

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

Editor: Set ColorManagement.legacyMode = false #25222

Merged
merged 2 commits into from
Jan 26, 2023

Conversation

donmccurdy
Copy link
Collaborator

@donmccurdy donmccurdy commented Jan 2, 2023

The <input type="color"> HTML element provides an sRGB color picker1, and the preview swatches shown in the picker reflect that, but the Editor does not. I think it would be best to account for the color space when working in the Editor. This allows, for example, setting #1A7FEB anywhere in the Editor and seeing the color consistently in the HTML picker, MeshBasicMaterial color, Fog color, and so on.

Related:


1 By default in Safari and Firefox, and with no other options in Chrome. The option to reach Linear-sRGB ("Rec. ITU-R BT.709-5") in Safari and Firefox is pretty hard to find, and I doubt we can expect users to do so. That option does not affect the value returned to the page, which appears to be sRGB in any case.

@donmccurdy
Copy link
Collaborator Author

donmccurdy commented Jan 3, 2023

Note that while setting #1A7FEB in the color picker is equivalent to setHex(0x1A7FEB) in a three.js project with legacyMode=false enabled, setting the RGB or HSL components individually in the HTML picker has a different effect than setRGB or setHSL. The HTML picker interprets those as sRGB and we interpret them as Linear-sRGB. Blender does the same as we do, and I think that is the best choice here.

An alternative would be to provide a color picker with proper support for other color spaces. I'm open to this, but don't know of one to recommend. If the HTML picker evolves to handle color spaces provided by CSS Color Module Level 4, that would also help a lot.

@donmccurdy
Copy link
Collaborator Author

Example, after assigning the same color to MeshBasicMaterial's color and Background in the editor. Note that the Sidebar's "Color" swatch does not match the material without this change:

before after
Screenshot 2023-01-02 at 7 06 13 PM Screenshot 2023-01-02 at 7 06 40 PM

@CodyJasonBennett
Copy link
Contributor

Is the editor updated in lockstep with three releases? Noting #24975 (comment), this will need to be updated alongside #24940.

@donmccurdy
Copy link
Collaborator Author

donmccurdy commented Jan 3, 2023

Is the editor updated in lockstep with three releases?

Generally, yes. Perhaps some exceptions for a patch.

I'd like to see both this and #24940 land, but I think they can land in separate releases without harm.

@Mugen87
Copy link
Collaborator

Mugen87 commented Jan 3, 2023

@Mugen87
Copy link
Collaborator

Mugen87 commented Jan 3, 2023

Published apps also need an enhancement so the colors look exactly like in the editor. You just have to add THREE.ColorManagement.legacyMode = false; in the following document:

https://github.com/mrdoob/three.js/blob/dev/editor/js/libs/app/index.html

@Mugen87 Mugen87 added this to the r149 milestone Jan 3, 2023
@donmccurdy
Copy link
Collaborator Author

Done, thanks!

@mrdoob mrdoob merged commit c50d742 into mrdoob:dev Jan 26, 2023
@donmccurdy donmccurdy deleted the editor/color-management branch February 8, 2023 02:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants