Three.js: Difference between revisions

Line 33:

By default, three.js works in Linear color space. This means that input colors are converted from SRGB to linear before rendering, most color calculations happen in linear color space, the final color is converted to SRGB for display.

1. THREE.Color values are converted from SRGB to Linear color space on CPU at https://github.com/mrdoob/three.js/blob/0af9729d0c143a86a1d725d6e2c3ad83301f3f34/src/math/Color.js#L211

# THREE.Color values are converted from SRGB to Linear color space on CPU at https://github.com/mrdoob/three.js/blob/0af9729d0c143a86a1d725d6e2c3ad83301f3f34/src/math/Color.js#L211

2. Textures are converted from their source color space to linear. This is done by https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/unpackColorSpace.

# Textures are converted from their source color space to linear. This is done by https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/unpackColorSpace.

3. When rendering directly to canvas or XR, shaders output in SRGB. When rendering to a rendertarget, shaders output in linear. See https://github.com/mrdoob/three.js/blob/e04b9f7bd7f5b17103339d343168bfab2d6e0ace/src/renderers/WebGLRenderer.js#L2198 for the CPU side and https://github.com/mrdoob/three.js/blob/e04b9f7bd7f5b17103339d343168bfab2d6e0ace/src/renderers/shaders/ShaderChunk/colorspace_fragment.glsl.js for the GPU side.

# When rendering directly to canvas or XR, shaders output in SRGB. When rendering to a rendertarget, shaders output in linear. See https://github.com/mrdoob/three.js/blob/e04b9f7bd7f5b17103339d343168bfab2d6e0ace/src/renderers/WebGLRenderer.js#L2198 for the CPU side and https://github.com/mrdoob/three.js/blob/e04b9f7bd7f5b17103339d343168bfab2d6e0ace/src/renderers/shaders/ShaderChunk/colorspace_fragment.glsl.js for the GPU side.

4. If using postprocessing, make sure to use an Output pass to convert the linear render target into SRGB.

# If using postprocessing, make sure to use an Output pass to convert the linear render target into SRGB.

See https://discourse.threejs.org/t/updates-to-color-management-in-three-js-r152/50791

==References==

@@ Line 33: / Line 33: @@
 By default, three.js works in Linear color space. This means that input colors are converted from SRGB to linear before rendering, most color calculations happen in linear color space, the final color is converted to SRGB for display.
-. THREE.Color values are converted from SRGB to Linear color space on CPU at https://github.com/mrdoob/three.js/blob/0af9729d0c143a86a1d725d6e2c3ad83301f3f34/src/math/Color.js#L211
+# THREE.Color values are converted from SRGB to Linear color space on CPU at https://github.com/mrdoob/three.js/blob/0af9729d0c143a86a1d725d6e2c3ad83301f3f34/src/math/Color.js#L211
-. Textures are converted from their source color space to linear. This is done by https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/unpackColorSpace.
+# Textures are converted from their source color space to linear. This is done by https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/unpackColorSpace.
-. When rendering directly to canvas or XR, shaders output in SRGB. When rendering to a rendertarget, shaders output in linear. See https://github.com/mrdoob/three.js/blob/e04b9f7bd7f5b17103339d343168bfab2d6e0ace/src/renderers/WebGLRenderer.js#L2198 for the CPU side and https://github.com/mrdoob/three.js/blob/e04b9f7bd7f5b17103339d343168bfab2d6e0ace/src/renderers/shaders/ShaderChunk/colorspace_fragment.glsl.js for the GPU side.
+# When rendering directly to canvas or XR, shaders output in SRGB. When rendering to a rendertarget, shaders output in linear. See https://github.com/mrdoob/three.js/blob/e04b9f7bd7f5b17103339d343168bfab2d6e0ace/src/renderers/WebGLRenderer.js#L2198 for the CPU side and https://github.com/mrdoob/three.js/blob/e04b9f7bd7f5b17103339d343168bfab2d6e0ace/src/renderers/shaders/ShaderChunk/colorspace_fragment.glsl.js for the GPU side.
-. If using postprocessing, make sure to use an Output pass to convert the linear render target into SRGB.
+# If using postprocessing, make sure to use an Output pass to convert the linear render target into SRGB.
 See https://discourse.threejs.org/t/updates-to-color-management-in-three-js-r152/50791
 ==References==