[ThreeJs] 선형 색 공간(Linear color space) - sRGB 색보정

 

 

최신 버전의 Three.js에선 outputColorSpace가 기본적으로 sRGB이지만, 이전에는 linearColorSpace였다.

 

이번 글에선 어떻게 선형 색 공간 값을 sRGB에 맞게 보정할 수 있는지 알아보고자 한다.

 

먼저 왜 sRGB로 보정 해야할까?

 

왜냐하면 Chorme 이든 Firefox든, 기본적으로 sRGB 색 공간을 사용하고 있기 때문이다.

 

이전 글 들에서 fragment shader에서 dot 연산과 같은 연산들을 많이 했는데, 이 연산에 경우,

 

sRGB색공간에 대해 열려있다. dot연산의 결과값의 경우 linear color space(선형 색공간)값이기에, 이 값을 그대로 sRGB 공간에서 사

 

용할 경우, 크게 문제는 없지만, 살짝 부자연스러운 느낌을 준다.

 

 

다음과 같은 과정을 통해 sRGB 색으로 변환한다.

 

1. 선형 색 공간 상에서 모든 연산을 마친다.
2. 선형 색상을 감마 보정한다.
3. 감마 보정값을 sRGB값으로 변환한다.

 

float toSRGB(vec3 value){
  vec3 lt = vec3(lessThanEqual(value.rgb, vec3(0.0031308)));
  vec3 v1 = value * 12.92;
  vec3 v2 = pow(value.xyz, vec3(0.41666)) * 1.055 - vec3(0.055);
  return mex(v2 , v1 , lt);
}
float linearToSRGB(vec3 value){
  return vec3(toSRGB(value.x) , toSRGB(value.y) , toSRGB(value.z));
}