The upcoming release, r152, introduces significant updates to three.js that affect color and lighting by implementing a linear workflow by default for both physically-based and non-physically-based scenes.

This means that sRGB input colors (from textures, color pickers, CSS, and HTML) are automatically converted to a linear working color space for rendering and then converted back to sRGB for display. These changes improve lighting accuracy and image quality—but they also require that inputs like textures are assigned the correct color space.

The following property name changes have been made:

1. In THREE.WebGLRenderer, .outputEncoding is now renamed to .outputColorSpace
2. In THREE.Texture, .encoding is now renamed to .colorSpace
3. sRGBEncoding is now SRGBColorSpace
4. LinearEncoding is now LinearSRGBColorSpace

Default values have also been updated:

1. THREE.WebGLRenderer.outputColorSpace now defaults to sRGB (THREE.SRGBColorSpace)
2. THREE.ColorManagement.enabled now defaults to true

Below are the migration paths depending on your current setup:

─────────────────────────────
For users still using renderer.outputEncoding = LinearEncoding (the previous default):

• Expect minor differences in scene lighting with softer shading and smoother transitions.
• Recommended steps:
  1. Assign a color space to any material textures that contain color data, e.g., texture.colorSpace = THREE.SRGBColorSpace (note: this does not apply to non-color data like normal maps).
  2. Use THREE.LinearSRGBColorSpace for HDR textures (such as .exr or .hdr), which is already set by default.
  3. Ensure that any THREE.ShaderMaterial instances include tone mapping and output color space encoding after setting gl_FragColor:

GLSLCopied
#include <tonemapping_fragment>
#include <encodings_fragment>

4. For three.js-provided post-processing (not pmndrs/postprocessing), use the provided OutputPass instead of manually setting renderer.outputColorSpace = THREE.LinearSRGBColorSpace with a GammaCorrectionShader pass.

Be aware that input colors (like 0xFF0000) are automatically detected as sRGB, so manual conversion is typically unnecessary. If needed, specify the color space in color setters:

JAVASCRIPTCopied
material.color.setRGB( r, g, b, THREE.SRGBColorSpace );
material.color.setHSL( h, s, l, THREE.SRGBColorSpace );

─────────────────────────────
For users already using renderer.outputEncoding = sRGBEncoding:

• This migration is lossless; your scene appearance should remain unchanged.
• Update your code to use renderer.outputColorSpace and texture.colorSpace with the new values (SRGBColorSpace and LinearSRGBColorSpace).
• Non-color textures (like normal maps) should use NoColorSpace (the default).
• Remember that CSS and hexadecimal colors are now automatically converted to Linear-sRGB:

JAVASCRIPTCopied
// before
material.color.setHex( 0x112233 ).convertSRGBToLinear();

// after
material.color.setHex( 0x112233 );

If you didn’t previously call convertSRGBToLinear(), you may need to explicitly designate the color space for consistency:

JAVASCRIPTCopied
// before
material.color.setHex( 0x808080 );

// after (option 1)
material.color.setHex( 0x808080, THREE.LinearSRGBColorSpace );

// after (option 2)
material.color.setHex( 0xbbbbbb );

The THREE.Color API setters and getters accept a color space parameter to differentiate between Linear and sRGB values:

JAVASCRIPTCopied
color.setRGB( 0.5, 0.5, 0.5 );
console.log( color ); // → r = .5, g = .5, b = .5 (linear)

color.setRGB( 0.5, 0.5, 0.5, THREE.SRGBColorSpace ); // (srgb → linear)
console.log( color ); // → r = .22, g = .22, b = .22

color.getHex(); // → 0x808080 (linear → srgb)
color.getHex( THREE.LinearSRGBColorSpace ); // → 0x373737 (linear)

─────────────────────────────
You can opt out of the new default workflow if needed, though it is recommended for new projects:

JAVASCRIPTCopied
import * as THREE from 'three';

THREE.ColorManagement.enabled = false;
renderer.outputColorSpace = THREE.LinearSRGBColorSpace;

Note: This must be done before initializing any THREE.Color instances to prevent unintended color conversions.

If you’re using frameworks such as React Three Fiber, A-Frame, or Threlte, you’re likely using these defaults already—only property names have changed.

─────────────────────────────
Motivation for these changes centers on preparing three.js for wider support of high dynamic range (HDR) and wide-gamut color in future WebGL/WebGPU APIs and improving color accuracy. The new linear workflow fixes long-standing issues with the previous “plasticky CGI” look, delivering softer, more natural lighting and improved image quality.

For general questions, please reply to this thread. If you need help updating code, consider starting a new thread with full context and linking back here. For more details, refer to the color management guide.