Color Space

What is a Color Space?

A color space is a standardized model used to describe how colors are represented across different media. It defines the range of color values and conversion rules through mapping functions, making it easier to convert colors between different devices or applications.

When rendering graphics, the choice of color space is often limited by device support. Most devices default to using the sRGB color space, which is suitable for web images, digital photography, and other applications. sRGB is designed based on the physiological characteristics of the human eye, particularly its higher sensitivity to dark color values compared to bright ones.

Human Perception and the sRGB Color Space

The human eye perceives light through rod cells and cone cells. Rod cells are highly sensitive to light and primarily function in low-light environments but cannot perceive color. Cone cells, on the other hand, are responsible for color perception and work mainly in bright environments. This division allows the human eye to adapt and perceive the environment under varying lighting conditions.

Why is the human eye more sensitive to low light?

In low-light environments, rod cells play a significant role. Their response to light is nonlinear, especially in their heightened sensitivity to changes in dark color values. This characteristic enables humans to distinguish subtle brightness differences in dim conditions.

For example, when observing a display, the brightness values interpolated linearly do not directly reflect human perception. As shown in the image below, in a linear gradient from black (0% brightness) to white (100% brightness), the human eye perceives changes after 50% brightness less strongly:

After gamma correction, the brightness changes align better with human perception, presenting a more natural gradient effect:

The gamma correction in the sRGB color space is designed based on this perceptual characteristic and includes additional optimizations for very dark values, making brightness and color transitions on displays appear more natural.

sRGB Textures

Textures support hardware-level sRGB color decoding, which improves rendering color accuracy while enhancing performance and reducing Shader coding complexity. When sRGB is enabled, the hardware automatically decodes textures to linear data during Shader sampling. Textures can be broadly categorized into two types:

• Color textures (e.g., base maps, emissive maps) should use the sRGB color space because these textures are typically created in the sRGB space on displays.
• Data textures (e.g., normal maps, metallic roughness maps) do not need to use the sRGB color space, as these non-color data are inherently stored in linear space.

Editor Usage

When uploading textures in the editor, the sRGB toggle is enabled by default. If uploading non-color data textures (e.g., normal maps), you can manually disable the sRGB toggle. For glTF assets, the editor automatically adapts the sRGB toggle based on the texture type (e.g., normal maps, base maps).

Script Usage

Loading textures uses the sRGB color space by default. If linear space is required, you can disable the sRGB setting via parameters:

// Load textures using Texture2DLoader
engine.resourceManager
  .load<Texture2D>({
    type: AssetType.Texture2D,
    url: "https://***.png",
    params: {
      isSRGBColorSpace: false // Disable sRGB, use linear space, e.g., for normal maps
    }
  });

When manually creating textures, you can also specify whether to use the sRGB color space via constructor parameters:

export declare class Texture2D extends Texture {
  /**
   * Create a Texture2D.
   * @param engine - Rendering engine instance
   * @param width - Texture width
   * @param height - Texture height
   * @param format - Texture format, default is `TextureFormat.R8G8B8A8`
   * @param mipmap - Whether to use mipmaps
   * @param isSRGBColorSpace - Whether to use the sRGB color space, default is `true`
   * @param usage - Texture usage
   */
  constructor(
    engine: Engine,
    width: number,
    height: number,
    format?: TextureFormat,
    mipmap?: boolean,
    isSRGBColorSpace?: boolean,
    usage?: TextureUsage
  );
}

By correctly managing the color space settings of textures, you can ensure rendering accuracy while improving performance.