メインコンテンツまでスキップ

rgb2srgb: Linear RGB to sRGB Color Space Conversion

Linear Color to Display-Ready Transformation

The linear RGB to sRGB conversion transforms mathematically accurate color values to standard web color space for display. Linear RGB maintains proportional light intensity relationships, while sRGB applies gamma correction for optimal visual perception on standard displays.

The transformation follows a piecewise function:

For linear RGB values c[0,1]c \in [0, 1]:

sRGB={12.92cif c0.00313081.055c1/2.40.055if c>0.0031308\text{sRGB} = \begin{cases} 12.92 \cdot c & \text{if } c \leq 0.0031308 \\ 1.055 \cdot c^{1/2.4} - 0.055 & \text{if } c > 0.0031308 \end{cases}

The gamma exponent 1/2.40.41671/2.4 \approx 0.4167 applies perceptual correction above the linear threshold. Below 0.00313080.0031308, linear scaling prevents discontinuities near black values while maintaining precision in dark regions.

ライブエディター
const fragment = () => {
      const linear_color = vec3(uv.x.mul(uv.x), uv.y, iTime.sin().mul(0.5).add(0.5))
      const display_color = rgb2srgb(linear_color)
      const split_mask = uv.x.greaterThan(0.5)
      const result = linear_color.select(display_color, split_mask)
      return vec4(result, 1)
}

The conversion includes epsilon subtraction (101010^{-10}) to prevent edge case numerical issues and applies saturation clamping to ensure output values remain within the valid [0,1] range for display systems.

Linear RGB to sRGB conversion is essential for proper color display, ensuring that mathematically computed lighting and color operations appear correctly on standard monitors and web browsers that expect gamma-corrected color values.