RGB의 이해 모니터의 색은 어떻게 표현될까?

RGB의 이해 모니터의 색은 어떻게 표현될까?

러프하게 크게크게 이해하면서 넘어가자.

 

우리가 알고있는 모니터에서 표현되는 색은

가산혼합으로 만들어진다.

 

가산 혼합이란 RGB로 이루어진 색을 더하면 더할수록 밝아지며,

모두 더하면 흰색이 되는 색의 체계이다.

그리고 모니터에 보여지는 1픽셀은

서브픽셀인 RGB로 이루어져있다.

 

실제로 프로그래밍 지식이 부족한

그래픽 아티스트는 쉐이더를 다루게 될 때

가장먼저 만나는 장벽이 바로 이부분

‘컬러를 숫자로 인식하는 부분이다’

이부분을 철저하게 훈련하고 정확히 이해해야 한다.

 

그래서 색을 표현할때 (R, G, B) 이렇게 표현하며

포토샵에서 (0~255, 0~255, 0~255) 로 표현된다.

 

만약 빨간색픽셀이면 (255,0,0) 이다

Percent로 나타내면 (100%,0%,0%)이다.

그리고 하나의 픽셀의 색을 코드로 표혀하는데

이를 픽셀 쉐이더(Pixel Shader)라고 부른다.

프로그래밍에선 위의 %를 소수점으로 적는다.

 

이름 부동소수점 Float이라는 단위라고 부른다.

255=100%=1f 이 공식이 성립된다

 

흰색을 Float으로 나타내면(255, 255, 255)= (100%, 100%, 100%) 이므로

(1.0, 1.0, 1.0)이 된다.

X/255로 계산해 주면 된다.

소수점은 무한히 늘어나지 ㅇ낳고 최대 6자리까지 표현한다.

>간단히 쓰기엔 크고, 정밀하게 쓰기엔 다소 부족한 정도?

로 이해하면된다.

유니티 쉐이더 그래프에선 편하게 1로도 사용한다.

 

 

예시로 부동소수점을 표현해보자면

 

흰색은 float3 (1.0, 1.0, 1.0)

회색은 float3 (0.5, 0.5, 0.5)

검은색은 float3 (0,0,0)

빨간색은 float3 (1.0, 0, 0)

노란색은 float3 (1.0 ,1.0, 0)

파란색은 float3 (0, 0, 1.0)

 

여기에 Alpha값까지 더해지면

빨간색 반투명 float4 (1.0, 0, 0, 0.5) 이 된다.

 

여기서 상당히 흥미로운건

RGB는 합쳐놓으면 컬러로 보이지만

따로따로 놓으면 흑백으로 표현표현되는 것

예를 들어 R값만 있고 나머지는 없다고 하면,

R값의 숫자는 더 이상 컬러를 나타내는 것이 아니라

R값의 강도만 표현하는 한 자리 숫자일 뿐이다

마치 붉은색 전구를 켜는데 필요한 전기의 힘 같은 느낌처럼

그 힘자체가 붉은 색을 나타내지는 않으므로

각 컬러의 채널을 따로 볼 때는 흑백으로 강도만 표현된다

그리고 그것은 알파 채널도 마찬가지다

투명도도 따로 떼어 놓고 보면 흑백의 강도일 뿐이다.

 

컬러의 연산

회색+회색은 무엇일까

float3 (0.5, 0.5, 0.5) + float3 (0.5, 0.5, 0.5) = float3 (1.0, 1.0, 1.0)

포토샵에서 회색 레이어 2장 만들고

Linear Dodge(Add) 모드로 바꾸면

두 이미지를 더하게 되며 결과는 흰색으로 나타난다.

 

노란색에 빨간색을 더하면 어떻게 될까?

float3 (1.0, 1.0, 0) + float3 (1.0, 0, 0)= float3 (2.0, 1.0, 0) 이므로 노란색이 나오게 된다

그리고 숫자는2.0이지만 시각적으로는 1.0과 동일하게 표현된다.

밝음의 끝인 1인 흰색이지만 흰색보다 더 밝은 영역이 존재한다

하지만 흰색으로 표현되는 한계이다.

 

실제 세상에서 태양을 보면 흰색보다

더 눈이 부시도록 하얗기때문에 태양의 흰색은 6.0정도 되려나?