Skip to content

Commit

Permalink
Color: Improve documentation about color management (#29545)
Browse files Browse the repository at this point in the history
  • Loading branch information
donmccurdy authored Oct 3, 2024
1 parent b13d1b1 commit ea86688
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 17 deletions.
68 changes: 51 additions & 17 deletions docs/api/en/math/Color.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,41 @@ <h1>[name]</h1>
<p class="desc">Class representing a color.</p>

<p>
Iterating through a [name] instance will yield its components (r, g, b) in
A Color instance is represented by RGB components in the linear <i>working
color space</i>, which defaults to `LinearSRGBColorSpace`. Inputs
conventionally using `SRGBColorSpace` (such as hexadecimals and CSS
strings) are converted to the working color space automatically.
</p>

<p>
<code>
// converted automically from SRGBColorSpace to LinearSRGBColorSpace
const color = new THREE.Color().setHex( 0x112233 );
</code>
</p>

<p>
Source color spaces may be specified explicitly, to ensure correct
conversions.
</p>

<p>
<code>
// assumed already LinearSRGBColorSpace; no conversion
const color = new THREE.Color().setRGB( 0.5, 0.5, 0.5 );

// converted explicitly from SRGBColorSpace to LinearSRGBColorSpace
const color = new THREE.Color().setRGB( 0.5, 0.5, 0.5, SRGBColorSpace );
</code>
</p>

<p>
If THREE.ColorManagement is disabled, no conversions occur. For details,
see <i>Color management</i>.
</p>

<p>
Iterating through a Color instance will yield its components (r, g, b) in
the corresponding order.
</p>

Expand Down Expand Up @@ -50,15 +84,15 @@ <h3>
[page:Color_Hex_or_String r] - (optional) If arguments [page:Float g] and
[page:Float b] are defined, the red component of the color. If they are
not defined, it can be a
[link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] (recommended),
[link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet] (recommended),
a CSS-style string, or another `Color` instance.<br />
[page:Float g] - (optional) If it is defined, the green component of the
color.<br />
[page:Float b] - (optional) If it is defined, the blue component of the
color.<br /><br />

Note that standard method of specifying color in three.js is with a
[link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet],
[link:https://en.wikipedia.org/wiki/Web_colors#Hex_triplet hexadecimal triplet],
and that method is used throughout the rest of the
documentation.<br /><br />

Expand Down Expand Up @@ -91,13 +125,13 @@ <h3>[property:Boolean isColor]</h3>
<p>Read-only flag to check if a given object is of type [name].</p>

<h3>[property:Float r]</h3>
<p>Red channel value between `0` and `1`. Default is `1`.</p>
<p>Red channel value between `0.0` and `1.0`. Default is `1`.</p>

<h3>[property:Float g]</h3>
<p>Green channel value between `0` and `1`. Default is `1`.</p>
<p>Green channel value between `0.0` and `1.0`. Default is `1`.</p>

<h3>[property:Float b]</h3>
<p>Blue channel value between `0` and `1`. Default is `1`.</p>
<p>Blue channel value between `0.0` and `1.0`. Default is `1`.</p>

<h2>Methods</h2>

Expand Down Expand Up @@ -134,25 +168,25 @@ <h3>[method:this copy]( [param:Color color] )</h3>
</p>

<h3>[method:this convertLinearToSRGB]()</h3>
<p>Converts this color from linear space to sRGB space.</p>
<p>Converts this color from `LinearSRGBColorSpace` to `SRGBColorSpace`.</p>

<h3>[method:this convertSRGBToLinear]()</h3>
<p>Converts this color from sRGB space to linear space.</p>
<p>Converts this color from `SRGBColorSpace` to `LinearSRGBColorSpace`.</p>

<h3>[method:this copyLinearToSRGB]( [param:Color color] )</h3>
<p>
[page:Color color] — Color to copy.<br />

Copies the given color into this color, and then converts this color from
linear space to sRGB space.
`LinearSRGBColorSpace` to `SRGBColorSpace`.
</p>

<h3>[method:this copySRGBToLinear]( [param:Color color] )</h3>
<p>
[page:Color color] — Color to copy.<br />

Copies the given color into this color, and then converts this color from
sRGB space to linear space.
`SRGBColorSpace` to `LinearSRGBColorSpace`.
</p>

<h3>[method:Boolean equals]( [param:Color color] )</h3>
Expand Down Expand Up @@ -208,11 +242,11 @@ <h3>
object of the form:

<code>
{
h: 0,
s: 0,
l: 0
}
{
h: 0,
s: 0,
l: 0
}
</code>
</p>

Expand Down Expand Up @@ -253,9 +287,9 @@ <h3>
[page:Float alpha] - interpolation factor, typically in the closed
interval `[0, 1]`.<br /><br />

Sets this color to be the color linearly interpolated between [page:Color color1]
Sets this color to be the color linearly interpolated between [page:Color color1]
and [page:Color color2] where alpha is the percent distance along
the line connecting the two colors - alpha = 0 will be [page:Color color1],
the line connecting the two colors - alpha = 0 will be [page:Color color1],
and alpha = 1 will be [page:Color color2].
</p>

Expand Down
4 changes: 4 additions & 0 deletions docs/manual/en/introduction/Color-management.html
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,10 @@ <h3>Input color space</h3>
THREE.ColorManagement.enabled = true;
</code>

<p>
THREE.ColorManagement is enabled by default.
</p>

<ul>
<li>
<b>Materials, lights, and shaders:</b> Colors in materials, lights, and shaders store
Expand Down

0 comments on commit ea86688

Please sign in to comment.