Configure Three.js Texture colorSpace for sRGB

Achieving color-accurate rendering in Three.js requires proper color space management, especially when dealing with web-standard sRGB textures. This article explains how to configure the colorSpace property on Three.js textures to ensure colors display correctly on screen. You will learn which textures require the sRGB color space, how to write the code to apply it, and how to configure your renderer for consistent end-to-end color accuracy.

The Importance of Color Space in Three.js

By default, Three.js performs lighting calculations in a linear color space to mimic the physics of light accurately. However, most digital images (like PNGs and JPEGs used for colors) are saved in the sRGB color space.

If you display sRGB textures without converting them, your 3D scene will appear washed out, dark, or incorrectly saturated. Configuring the colorSpace property tells Three.js to convert the texture’s colors into linear space for rendering calculations, and then back to sRGB for final display.

How to Set the Texture colorSpace

In modern versions of Three.js, the encoding property has been deprecated in favor of colorSpace. To configure a texture for sRGB correct rendering, set its colorSpace property to THREE.SRGBColorSpace.

Here is the direct code implementation:

import * as THREE from 'three';

// Initialize the texture loader
const textureLoader = new THREE.TextureLoader();

// Load your color texture
const colorTexture = textureLoader.load('path/to/color-map.jpg');

// Set the color space to sRGB
colorTexture.colorSpace = THREE.SRGBColorSpace;

// Apply the texture to a material
const material = new THREE.MeshStandardMaterial({
    map: colorTexture
});

Which Textures Need sRGB?

Not all textures in your scene should use the sRGB color space. Only textures that represent actual visual colors (what you see with your eyes) should be set to sRGB.

• Use THREE.SRGBColorSpace for:
  • Diffuse / Albedo maps (material.map)
  • Emissive maps (material.emissiveMap)
  • Specular color maps
• Use THREE.NoColorSpace (or default Linear) for:
  • Normal maps (material.normalMap)
  • Roughness maps (material.roughnessMap)
  • Metalness maps (material.metalnessMap)
  • Displacement maps
  • Ambient Occlusion (AO) maps

Data-centric maps contain mathematical vectors or scalar values rather than visual colors, so converting them to sRGB will distort the lighting calculations.

Configuring the WebGLRenderer

Setting the texture’s color space is only half of the process. You must also configure the renderer to output the final image in the correct sRGB color space so the user’s monitor displays it properly.

Configure your renderer with the following setting:

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);

// Set the output color space to sRGB
renderer.outputColorSpace = THREE.SRGBColorSpace;

document.body.appendChild(renderer.domElement);

By setting both the input texture’s colorSpace and the renderer’s outputColorSpace to THREE.SRGBColorSpace, Three.js handles the color conversions automatically, resulting in vibrant, realistic, and color-accurate 3D renders.