sRGB and Linear Color Space: Understanding Gamma Correction and Rendering Pipeline

Color Space Overview

In computer graphics, color spaces define how colors are represented. sRGB and linear are two common color spaces. sRGB is a nonlinear color space widely used in displays and image files; linear color space directly stores physical light intensity values for lighting calculations. Correctly handling the conversion between the two is crucial for realistic rendering.

Why Linear Color Space Is Needed

Physical lighting is linear: twice the light intensity produces twice the radiance. However, human perception of brightness is nonlinear, more sensitive to dark variations. Display devices (CRT, LCD) use gamma encoding to optimize perception, with output related nonlinearly to input voltage. The sRGB standard defines this nonlinear encoding, typically approximated as a gamma 2.2 curve.

If lighting calculations are performed directly in sRGB space, nonlinearity causes incorrect results in compositing and blending, leading to dark-area distortion and color shifts. Therefore, rendering pipelines typically use linear space for internal calculations and convert the final result to sRGB for display.

Gamma Correction and sRGB Conversion

Gamma correction refers to the process of converting between linear and sRGB. Typical formulas:

• Linear to sRGB: `C_srgb = C_linear^(1/2.2)` (approximate)
• sRGB to linear: `C_linear = C_srgb^2.2` (approximate)

The exact sRGB conversion uses a piecewise function, but approximation usually suffices. In the rendering pipeline:

1. Texture sampling: If a texture is stored in sRGB format (like a normal color map), it must be converted to linear space before lighting calculations. Engines can handle this automatically (e.g., marking textures as sRGB in Unity).
2. Lighting calculations: Performed in linear space.
3. Final output: Convert the result from linear to sRGB for framebuffer or display.

Implementation in Game Engines

**Unity**:

• In Player Settings, choose Color Space as Linear or Gamma. In Linear mode, the engine automatically handles sRGB texture decoding and output encoding.
• Texture assets can be marked as sRGB (default for color textures) or Linear (for data textures like normal maps, metallic maps).

**Unreal Engine**:

• Uses linear workflow by default; set sRGB option on texture import.
• Gamma can be adjusted in project settings.

Correct color space settings are particularly important for PBR rendering because PBR relies on physically correct lighting calculations.

Common Issues and Considerations

• **Incorrect texture marking**: If a normal map is marked as sRGB, it will be decoded incorrectly during sampling, causing wrong normal directions. Therefore, data textures (normal, metallic, roughness) should be marked as Linear.
• **Blending operations**: Blending colors in linear space is more accurate; blending in sRGB may cause edge artifacts.
• **UI elements**: UI typically uses sRGB colors directly and does not need linear conversion.
• **Mobile platforms**: Some mobile GPUs may not support linear rendering, requiring trade-offs.

FAQ

What is the difference between sRGB and linear color spaces?

sRGB is a nonlinear encoding for display and image storage; linear color space directly represents physical light intensity for lighting calculations. Rendering should compute in linear space and convert to sRGB for output.

Why should rendering use linear color space?

Because lighting is linear, computing in linear space ensures physical correctness and avoids darkening or color shifts. sRGB space calculations lead to incorrect lighting results.

What is gamma correction?

Gamma correction is the process of converting between linear and sRGB using power functions to adjust luminance encoding for human perception and display devices.

How do I know if a texture needs sRGB decoding?

Color textures (albedo, diffuse) need sRGB decoding; data textures (normal, metallic, roughness) do not and should be marked Linear.

How to switch to linear space in Unity?

In Player Settings > Other Settings > Color Space, select Linear, and ensure all texture sRGB flags are correct.