[blender node] 02. Mix Color (6) - RGB 3채널

---

[blender node] 02. Mix Color (6)

 

3채널 mix

지금까지는 0~1 값을 가지는 하나의 채널만 mix 했었는데, 3개 채널이라고 해도 특별히 다를 것은 없습니다. 1개 채널을 3개로 확장한 개념이죠. 다만 1개 채널은 마스크 합성을 위해 많이 쓰지만, 3개 채널은 색 블렌딩을 위해 많이 쓰죠. 그래서 색까지 디테일하게 조절하려다 보니 신경이 더 쓰이긴 하는 거 같습니다. 아무래도 색깔이 중요하죠.

 

 

컴퓨터는 사람과 다르게 색을 인식합니다. 우리는 노을 사진을 보고 아름답다고 느끼기도 하고, 옛날 사진들을 보면서 과거 기억을 떠올리기도 합니다. 하지만 컴퓨터는 그러지 못하죠. 사진을 데이터로 받아들입니다. 정말 낭만 없는 녀석입니다.

 

해안에 위치한 등대입니다. 노을 진 모습이 멋지네요.

 

 

일단 이해를 쉽게 하기 위해 이 이미지를 흑백의 1개 채널로 바꿨습니다. 그래도 우리는 이 사진을 보면서 아름답다거나, 잔잔하다거나 등등 각자의 감상을 느낍니다.

 

 

컴퓨터는 이 녀석을 0~1에 해당하는 데이터로 인식합니다. 밝은 곳은 1로, 어두운 곳은 0으로, 중간의 회색 값들은 그 밝기에 따라 0~1에 해당하는 수로 인식하죠. 아래 그림과 같습니다. 

 

 

그래서 이 이미지를 재질에 연결해 주면 각각의 노드에 따라 알맞은 데이터로 처리해서 표현해 줍니다.

 

이 흑백의 데이터를 Metallic에 연결해 주면 어두운 영역은 비금속처럼, 밝은 영역은 금속처럼 표현해 줍니다.

roughness에 연결해 주면 어두운 영역은 roughness를 0에 가깝게, 즉 매끈하게 표현해 줍니다. 밝은 영역은 1에 가깝게, 즉 거칠거칠하게 표현해 줍니다. 

아래 그림처럼 색이 밝았던 A 영역은 거칠거칠한 금속처럼, 색이 어두웠던 B 영역은 매끈한 비금속처럼 표현해 줍니다. 

 

 

이 한 장의 이미지가 컴퓨터에겐 0~1에 해당하는 정보일 뿐이죠. 이렇게 해석한 정보를 shader에 전달하면, shader에서 이 값을 입력받아 프로그램된 대로 화면에 보여주는 것입니다. 

mixColor의 factor에 연결해 주면, 아래 그림처럼 노란색과 분홍색을 섞어주는 기준으로 사용합니다.

 

 

사실 이미지라는 것은 컴퓨터보다 사람이 이용하기 위한 정보입니다. 컴퓨터는 이미지가 아니라 다른 어떤 방식을 사용하던 0~1까지의 정보를 받기만 하면 됩니다. 일일이 수작업으로 0~1까지 직접 써서 데이터를 만들던, 그림으로 그려서 주던, 다른 획기적인 방식으로 데이터를 전달해 주던, 컴퓨터는 데이터를 입력받기만 하면 됩니다. 그러면 그걸 사용해서 내장된 함수대로 계산해 줍니다. 문제는 데이터를 인식하는 사람이죠.

 

아래는 자갈들이 무수히 깔린 길바닥을 찍은 사진입니다. 이 바닥을 3d에서 구현한다고 할 때 이 데이터를 어떻게 컴퓨터에 전달할 건가요? 작은 픽셀 하나하나가 다 데이터인데, 그걸 사람이 일일이 여긴 0.7, 저긴 0.65 하면서 데이터를 입력해 줄 수는 없죠. 1000 x 1000 픽셀이면 1000000번 작업해야 합니다. 그래서 이미지의 형태로 표현하는 바를 나타내고 그걸 컴퓨터에 전달하는 겁니다.

 

 

 

하나의 채널은 0~1로 표현되는 하나의 데이터 덩어리입니다. 이걸 이미지의 형태로 보고, 사용하고, 전달하는 것이죠. 

(물론 우리가 앞에서 봤듯이 1을 넘어가는 데이터도 있습니다. 주로 빛이 그렇죠. 하지만 우리가 흔히 색으로 인식할 수 있도록 한 색 범위가 0~1까지이므로, 0~1로 표현하는 게 좋습니다.) 

 

1개의 채널은 그 밝기에 따라 흰색부터 검은색까지 표현할 수 있습니다. 컴퓨터는 이런 흑백 채널 3개로 컬러를 표현해 줍니다. 우리가 흔히 아는 RGB 세 개 채널입니다. 

R, G, B 각각의 채널은 0~1에 해당하는 흑백의 데이터 값을 가지고 있습니다. 

 

 

컴퓨터는 이 세 개의 정보 덩어리를 데이터 입력값으로 받아 색을 만듭니다.

 

우리가 흔히 말하는 빨주노초파남보의 색을 가시광선이라고 하죠. 이 빛이 합해지면 흰색, 없으면 검은색입니다. 그런데 모니터는 이 모든 색을 직접 만들지 않습니다. 자연에 존재하는 모든 색을 하나하나 만들기에는 너무나 많은 비용이 필요합니다. 

대신 모니터는 빨강, 초록, 파랑 이 세 개의 색을 만들어 합성하는 방식을 사용합니다. 

아래 주황색을 하나 만들었습니다. 

 

 

여기에 separate color를 달아주면 이 RGB를 이루는 채널 각각의 모습을 확인할 수 있습니다.

 

 

Ctrl + Shift + 마우스 왼 클릭으로 각각의 결괏값을 뷰포트에서 미리 보기 할 수 있죠?

결과가 아래와 같습니다. 

 

이 말은 즉, 주황색은 사실 주황색이라는 값을 가지는 게 아니라, R채널 0.88, G채널 0.12, B채널 0이라는 3개의 데이터 값을 가진 녀석입니다. 0~1에 해당하는 흑백의 값을 3개 가지는 것이죠.

이 정보를 모니터에 전해주는 겁니다. 'R은 0.88의 밝기로, G는 0.12의 밝기로, B는 0의 밝기로 모니터에 표현해 주세요'라고 말이죠. 모니터가 내보낼 수 있는 빨간빛을 밝기에 따라 0~1까지 세기로 표현해 줄 수 있는데, 그중 0.88의 밝기로, 초록(0.12), 파랑(0)도 이와 같은 방법으로 빛을 쏘아줍니다. 당연히 모니터는 이 모든 정보를 전기 신호로 받아 전압을 조절해 빛의 밝기를 조절하겠죠.

 

이렇게 만들어진 빛은 아주 빠른 속도로 우리 눈에 들어오고, 그러면 우리 눈은 각각의 세기로 오는 빨강, 파랑, 초록의 빛을 따로따로 인식하지 못하고 주황색이라고 느끼게 됩니다.

 

(우리 눈은 빨강, 파랑, 초록빛에 반응하는 세 가지 원뿔 세포를 가지고 있는데, 이 원뿔 세포가 빛에 반응하는 정도에 따라 색을 인식하게 됩니다. 예를 들어 자연에서 노을의 주황색이 눈에 들어오면 이게 빨간색 세포를 10, 초록 세포를 4의 강도로 자극해 우리가 주황색이라고 느낀다고 합니다. 반면 모니터는 빨간빛을 10, 초록빛을 4의 강도로 쏴주죠. 그래도 똑같이 빨간 세포를 10, 초록 세포를 4의 세기로 자극합니다. 그러면 우리는 마찬가지로 주황색이라고 느끼게 됩니다.

 

태양이 주황빛을 직접 만든다고 한다면, 모니터는 빨강, 파랑, 초록을 각각의 비율대로 만들어 마치 주황색인 것처럼 우리에게 보여줍니다. 사실은 빨강, 파랑, 초록 3개의 빛인데 말이죠. 그렇습니다. 우리는 지금까지 모니터에 속고 있었습니다.)

 

아무튼 중요한 것은 색깔 역시 RGB 3개로 대표되는 데이터이고, 각각을 0~1의 범위로 표현할 수 있다는 것입니다.

 

 

 

mix blending

add

아래 이미지를 주황색으로 add 블렌딩 해 보겠습니다. 

 

 

그러면 이미지가 전체적으로 주황색으로 보입니다.

 

아래처럼 각각의 R, G, B에서 연산이 일어났습니다. R에는 0.88에 해당하는 데이터를 더해줬으니 결과가 하얀색으로 많이 바뀌었습니다. G에는 0.12 큼의 색을 더해줬습니다. B는 0을 더해 색상 변화가 없습니다. 

 

이 세 개의 데이터 값을 컬러로 표현하면 아래처럼 나오는 겁니다. 결과적으로 빨간색 영역엔 값이 많이 더해지고, 초록색 영역 조금 더해줬습니다. 해서 주황색이 더해진 것으로 최종 블렌딩됩니다.

 

 

아래 그림처럼 각각의 색을 R, G, B로 떼서 각각 더하고, 다시 합쳐도 같은 결과가 나옵니다.

 

 

 

흑백의 값에서 살펴봤던 데이터 연산이 컬러에서도 동일하게 작동합니다. 

 

 

subtract

subtract도 마찬가지입니다.

아래 그림처럼 subtract 하면 빨간색은 많이 빠지고, 초록색은 조금 빠지겠죠. 결과적으로 주황색이 빠진 모양으로 블렌딩 됩니다.

 

 

 

아래 그림처럼 주황색이 빠지자 반대편의 파란색이 강하게 나오는게 보이시나요? 보라색 영역을 빼면 초록색이 강하게 나타나겠죠. 저 색 영역의 밝기를 나타내는 값이 빠졌으니까요.

 

 

 

 

Multifly

multifly 하면 아래처럼 블렌딩됩니다. 빨간색 영역은 차이가 거의 없습니다. 파란색 영역은 0으로 곱해준 결과라서 아예 파란 계열이 사라져 버렸습니다. 그러면 컬러 값에서도 빨간 영역은 원 정보 그대로, 초록 영역은 조금 더 어둡게, 파란 영역은 0의 밝기로 표현해 주겠죠. (빨간색 채널은 1이 아니라 0.88이라 아주 조금 어두워졌습니다.)

 

 

아래 그림처럼 주황색 톤을 입힌 것처럼 표현됩니다. 밝기도 전체적으로 어두워졌습니다.

빨간 밝기를 많이 가지고 있고, 초록 조금, 파란색 밝기는 가지고 있지 않은 이미지입니다.

 

multifly는 이런 식으로 이미지를 어둡게 만들면서 블렌딩해주는 색상을 띠게 됩니다.

 

 

 

Divide

그러면 divide는 multifly와는 반대로 특정 색을 제거해 주면서 밝게 만들어 주겠죠.

 

이 사진은 파란색이 많으니, 이번에는 알아보기 쉽게 파란색으로 나눠보겠습니다. 아래 그림처럼 이미지에서 파란색이 제거되면서 주황색으로 바뀌는 게 보이시나요? 톤은 전체적으로 밝아집니다. 초록색으로 divide 하면 이미지가 전체적으로 보라색으로 되겠죠.

 

 

 

근데 문제는 분모가 분자보다 작으면 나눈 값이 금세 1을 넘어갑니다. 0.8 / 0.2 = 4입니다. 1의 흰색 밝기를 금방 넘어가서 색의 디테일이 다 없어져 버립니다.

파란색 채널은 어차피 파란색으로 나눈 거라 색 변화가 거의 없지만, 빨간색 채널과 초록색 채널은 금세 divide한 결과가 흰색으로 나옵니다.

아래는 빨간색 채널이 divide 블렌딩된 결과인데... 이미지가 하얗게 변해 버렸습니다. 이러면 이 영역은 모두 빨간색 밝기가 가장 밝은 1이 되고, 결과적으로 빨간 영역의 디테일이 사라져 버리겠죠.

이렇게 표현된 이미지는 RGB 다 합쳐서 컬러로 봐도 이상하게 보이기 마련입니다.

 

 

그래서 divide로 특정 색을 제거하고 싶으실 때는 아래처럼 factor 값을 낮춰서 아주 조금만 블렌딩하는 걸 추천드립니다. 그래도 차이가 많이 납니다.

 

 

하늘색이 없어지면서 반대편의 주황색 빛이 조금 나타나게 됩니다.

 

 

근데 블렌더는 조금 지랄맞은 것이......

0으로 나눈 값을 블렌딩해주지 않습니다.

 

값을 0으로 나눌 수는 없습니다. 근데 0으로 가까워지는 값으로 나누면

 

0.8 / 0.1      = 8

0.8 / 0.01    = 80

0.8 / 0.001  = 800

...

 

무한히 커져 갑니다. 그래서 다른 많은 이미지 프로그램들은 0으로 divide 한 블렌딩 결과를 그 프로그램이 나타내 주는 색상의 가장 큰 값, 보통 1로 표현해 줍니다. 검은색으로 블렌딩하면 흰색으로 나온다는 거죠. 

근데 블렌더는 아래 보는 것처럼 검은색으로 divide 한 결과가 원본과 같습니다.

 

 

 

문제는 RGB 세 개 채널 중 어느 하나라도 0 값을 가지면 divide 결과가 이상해집니다.

아래 빨간 화살표를 따라 색상을 옮겨가다 보면, 파란색이 빠지고 주황색이 보이면서 divide가 잘 되는 것처럼 보입니다.

 

 

그러다 특정 채널 값이 완전히 0이 되면 색상 톤이 갑자기 이상하게 확 바뀌어 버립니다. 

 

 

R 채널 값이 조금이라도 있어야지, 아예 0이 돼버리면 R 채널은 divide 되지 않습니다. 

 

이 점 유의해서 사용하시면 됩니다.

 

[blender node] 02. Mix Color (6)

---

---

[blender node] 02. Mix Color (6)  - RGB 3채널 - 연결된 글입니다.

 

02. Mix Color (1)
02. Mix Color (2)
02. Mix Color (3)
02. Mix Color (4)
02. Mix Color (5)
02. Mix Color (6) - RGB 3채널

02. Mix Color (7) - 마스크를 이용한 이미지 합성

---