색상에 대한 글
개요
지난 포스트들에서는 색상들이 컴퓨터에서 어떻게 표현되는지, 색상의 구성 요소에는 어떠한 것들이 있는지 대략적으로 정리해 보았습니다.
이번 글에서는 포토샵 작업을 할 때나, 게임 엔진상에서 효과를 주거나 할 때 사용하는 블렌딩이 무엇인지, 블렌딩은 어떻게 이루어지는지에 대해서 다뤄보려고 합니다. 그리고 언리얼 엔진의 메테리얼 노드 그래프를 활용해서 더하기, 빼기, 곱하기, 투명도 등의 간단한 수식으로 이루어진 기초적인 블렌딩 모드들을 직접 만들어 보겠습니다! 😋
색상의 혼합, 블렌딩이란
사전적으로 블렌딩의 정의는, 어떤 한 색과 다른 한 색을 섞는 색의 혼합을 말합니다. 이러한 블렌딩은 당장 눈 앞에서도 일어나고 있는데, 지금 이 글의 배경색인 하얀색이 RGB의 세가지 색상이 혼합된 색입니다!
원론적인 이야기는 이렇게 넘어가고, 우리가 사용하는 블렌딩이란 주로 레이어와 다른 레이어를 겹쳐 여러 효과를 주는 것을 뜻합니다. 포토샵에서 불투명도를 조절해 배경의 레이어들과 현재 레이어가 섞이는 정도를 조절하는 것, 게임 엔진에서 이미지에 Additive 효과를 줘 이미지가 더 밝게 빛나 보이도록 만드는 것 등이 모두 '블렌딩'을 이용한 것이죠.
이러한 블렌딩은 아래에 깔린 레이어와 그 위에 올라오는 레이어의 혼합, 미시적으로 본다면 한 픽셀에서 아래 레이어의 픽셀 색상과 위 레이어의 픽셀 색상의 계산으로 이루어집니다.
블렌딩 모드는 이러한 블렌딩이 어떤 방식으로 이루어질지를 선택하는 것입니다.
블렌딩 모드 연산
그렇다면 레이어의 색상들이 어떻게 연산되는 걸까요?
디지털 색상과 수 에서 다뤘듯이, 컴퓨터는 색상을 R, G, B의 세가지 숫자 값으로 처리합니다. 블렌딩이 연산될 때 또한 RGB 숫자 값들을 어떻게 잘 버무려서 최종적으로는 하나의 색상(R,G,B)으로 만드는 것입니다.
이렇게 RGB라는 숫자 값들이 연산될 때는 벡터끼리 연산하는 것과 똑같이, 요소끼리 계산이 이루어집니다. 이게 무슨 말인가 하면, 아래 레이어의 RGB 값과 위 레이어의 RGB 값이 있을 때 같은 채널인 R끼리, G끼리, B끼리 계산된다는 것입니다. (바로 다음 단락인 더하기에서 조금 더 자세히 다뤄보겠습니다.)
이제 사칙연산과 약간의 함수를 이용한 기초적인 블렌딩 모드들이 어떻게 동작하는지 알아보겠습니다.
(편의상 아래에 깔리게 되는 레이어를 ⓐ, 위에 올라오는 레이어를 ⓑ 라고 지칭하겠습니다.)
더하기 (Add)
첫 번째 순서는 아주 간단한 연산이라 게임 엔진에서 블렌딩 모드를 조절할 때 단골로 등장하는 '더하기' 블렌딩 입니다. (포토샵에선 선형 닷지, Linear Dodge(Add), 게임 엔진에서는 보통 Additive)
이름에서 보이듯, ⓐ의 RGB 값과 ⓑ의 RGB 값을 더해주는 방식입니다. 이전 단락에서 잠깐 다뤘듯, 색상값의 계산은 같은 채널끼리 이루어지게 됩니다. 그렇게 더하기를 수식처럼 나타내면, 아래와 같이 표시할 수 있습니다.
더하기 블렌딩의 최종 RGB 값 = (ⓐ의 R값 + ⓑ의 R값, ⓐ의 G값 + ⓑ의 G값, ⓐ의 B값 + ⓑ의 B값)
이제 색상들로 더하기 블렌딩을 만들어 보겠습니다. Add 노드와 색상 노드 둘을 사용해 그래프를 구성해주면 됩니다.
첫 순서는 보기쉽게, RGB 값 (0.5, 0.5, 0.5) 의 회색에 같은 회색 값을 더해보겠습니다.
다음 순서는 빨간색 (1, 0, 0) 과 파란색 (0, 0, 1) 입니다. 빛의 3원색에서 보았던 마젠타 색 (1, 0, 1) 이 나타나네요.
이는 빛의 3원색 또한 더하기, 가산혼합으로 혼합되기 때문입니다.
예시를 통해서 보았듯, 더하기 블렌딩은 각 색상값들을 더해서 연산하기 때문에 최종 색상이 밝아지게 (색상값이 커지게) 됩니다. 다만 색상값은 (1, 1, 1) 이 최대치이기 때문에, 색상들을 더해도 하얀색 (1, 1, 1) 보다 더 밝아질 수는 없습니다.
빼기 (Subtract)
더하기 블렌딩 다음 차례는 뻔하지만 빼기 블렌딩 입니다.
수식도 더하기의 기호를 빼기로 바꿔주면 끝, 메테리얼 노드 구조도 Add 노드를 Subtract 노드로 바꿔주면 끝입니다.
빼기 블렌딩의 최종 RGB 값 = (ⓐ의 R값 - ⓑ의 R값, ··· G와 B도 동일 )
더하기 블렌딩과 동일한 색상들을 가지고 빼기 블렌딩 연산을 진행해보겠습니다.
RGB값이 (0.5, 0.5, 0.5) 인 동일한 회색들로 빼기 블렌딩을 했을 때, 최종 결과값은 RGB값이 (0, 0, 0) 인 검정색이 되는 모습을 확인할 수 있습니다.
그런데, 빨간색과 파란색의 빼기 블렌딩은 변화가 생기지 않습니다. 이는 아래 계산과 같이, 실질적으로 값이 변경되는 B 채널에서 0에서 1을 빼줘도 B채널의 최종 값은 0으로 동일하기 때문입니다.
빨간색과 파란색을 빼기 블렌딩한 최종 RGB 값
= (1 - 0, 0 - 0, 0 - 1)
= (1, 0, 0)
빼기 블렌딩도 더하기와 동일하게, 색상값의 최소치가 (0, 0, 0) 이기 때문에 빼기 블렌딩의 결과값은 검정색 (0, 0, 0) 보다 어두워질 수는 없습니다.
빼기 블렌딩은 더하기 블렌딩과 반대로, 최종 색상이 어두워지는 것을 볼 수 있습니다.
곱하기 (Multiply)
이제 대망의 곱하기 블렌딩 입니다. 곱하기 블렌딩은, 유니티에서 Image 의 Tint Color 가 반영될 때나 언리얼의 Image 에서 Color 값을 줄 때에 사용되는 블렌딩 방식입니다.
수식과 메테리얼 구조는 아래와 같습니다. 이전의 두 블렌딩 방식과 동일하게 사칙연산이기에, 연산 기호와 연산 노드만 변경해주면 됩니다. 곱하기도 동일한 색상으로 블렌딩 연산을 진행해보겠습니다.
곱하기 블렌딩의 최종 RGB 값 = (ⓐ의 R값 * ⓑ의 R값, ··· )
RGB값 (0.5, 0.5, 0.5) 의 회색들이 서로 곱해져 더 어두운 회색이 되고, 빨간색 (1, 0, 0) 과 파란색 (0, 0, 1) 을 곱한 결과는 검정색이 됩니다.
빨간색과 파란색을 곱하기 블렌딩한 최종 RGB 값
= (1 * 0, 0 * 0, 0 * 1)
= (0, 0, 0)
곱하기 블렌딩 또한 빼기 블렌딩처럼 결과값이 어두워지는 것 (RGB 값이 작아지는 것) 을 볼 수 있습니다. 잠깐, 왜 곱하기인데 색상값이 작아질까요? 일상에서 접하는 곱하기는 값이 커졌었는데요. (제가 그렇게 생각했었습니다 😵)
이는 당연하게도 RGB 값은 0~1 사이의 소숫점 값으로 이루어져 있기 때문입니다. ⓐ 값에 1 (하얀색) 을 곱하지 않는 이상, 대부분의 색상은 0.XXX... 의 숫자 값으로 되어 있고, 이를 곱하기 때문에 최종 결과값은 ⓐ의 색상값보다 작아지게 (어두워지게) 되는 것이죠.
투명도 (Transparency)
숨쉬듯 접하는 투명 (포토샵에서는 불투명도, Opacity) 또한 블렌딩 모드의 일종입니다. 투명 블렌딩에서는 ⓐ와 ⓑ의 색을 각각 어떤 비율로 섞을지 결정하게 됩니다. 위에 올라오는 ⓑ의 불투명도가 75%라면, 최종적으로 보여지는 색은 ⓐ와 ⓑ의 색상을 25:75 비율로 섞은 색상이 되는 것이죠.
이는 lerp() 라는 보간 함수를 통해서 계산됩니다. (OpenGL에선 mix() 라는 함수)
함수와 이를 풀어쓴 수식은 아래와 같습니다. lerp() 의 세번째 요소인 opacity 값은 위 그림의 밸브 역할로, 기존의 ⓐ 값에 ⓑ 값이 얼마나 섞일지를 조절해주는 값입니다. opacity 값은 0~1 사이의 값을 가질 수 있습니다.
lerp(a, b, opacity);최종 RGB 값 = (ⓐ의 R값 * (1 - opacity) + ⓑ의 R값 * opacity, ··· )
lerp() 함수에서 불투명도 값이 조절되는 정도에 따라서, ⓐ의 색이 주로 보여지는지, ⓑ의 색이 주로 보여지는지 결정되게 됩니다.
여담
글에서 다뤘던 블렌딩 모드 중 사칙연산에서 하나 빠진 게 있었죠. 바로 나누기 (Divide) 블렌딩입니다.
나누기 블렌딩은 제가 익숙하게 사용하지 않아서 패스했습니다. 👀
글을 쓰면서 찾아보니, 나누기 블렌딩은 아래 이미지처럼 사진에서 특정 색조를 빼줄 때 주로 사용한다고 하네요. 수식은 동일하게 기존 사칙연산의 부호를 나누기로 변경해주면 됩니다.
글에서 다룬 것 외의 블렌딩 모드들에 대해서 더 궁금하시다면, 위키백과 Blend modes 문서 와 아래 유튜브 영상들을 추천드립니다.
다음번 글에서는 조건식 if 가 들어간 고급 블렌딩 모드에 대해 정리해 보겠습니다.
Blend Modes
www.youtube.com
이미지 출처
블렌딩 베이스 이미지 - 크르카 강
ⓐ와 ⓑ를 비율로 혼합하는 투명도 블렌딩 그림 - The Book of Shaders
나누기 블렌딩 예시 이미지 - The Incredible Math Behind the "Divide" Blend Mode
'Graphics' 카테고리의 다른 글
| 색수차 효과 셰이더 만들기 (0) | 2023.12.30 |
|---|---|
| 셰이더에서의 Sin(time) 그래프의 이해 (0) | 2023.10.28 |
| SDF (Signed Distance Field) (0) | 2023.09.17 |
| 색체계와 색의 구성요소 (0) | 2023.07.15 |
| 디지털 색상과 수 (0) | 2023.06.25 |
