셰이더 그래프 기초 Part 06 Shader Graph 기본 조작 - 분해와 재조립, 노드와 색상의 연산과 감마 코렉션

1. 노드의 값을 분해, 재조립(split, Combine)
2. 노드(숫자) 연산
3. Color의 연산과 감마 코렉션

1. 노드의 값을 분해하고 재조립

이러한 (1, 0, 0)의 붉은 공으로 시작함

이때 중간에서 split를 추가해줌

이렇게 Vector3값을 RGBA로 나눌 수 있음

이때 A값은 버려지는 값이 됨

 

이제 이렇게 나누어진 값을 다시 하나로 합칠 필요가 있음

이때 사용되는 것이 Combine 노드임

Out은 사용자가 결정할 수 있으며 출력시 (1, 0, 0)이 이상없이 출력됨을 알 수 있음

 

이러한 기능을 사용하여 여러가지 패턴을 만들어 낼 수 있음

이렇게 연결선읋 꼬아버릴 수 있는데 이를 스위즐링(Swizzling)이라고 함

 

이렇게 따로 노드가 존재함

 

2. 노드(숫자)의 연산

각 Vector3는 붉은색, 녹색, 회색임

 

2-1 덧셈

Add 노드를 사용함

이렇게 붉은색, 초록색으로 합연산을 통해서 노란색을 표현할 수 있음

다른 예시로는 회색 + 회색은 흰색이 됨

 

2-2 곱셈

Node의 곱은 Multiply Node를 사용함

예시

(0.5, 0.5, 0.5) * (0.5, 0.5, 0.5) = (0.25, 0.25, 0.25)가 됨

 

붉은색과 검은색을 곱연산 하여 어두운 붉은색을 만들어 낼 수 있음

 

2-3. 뺄셈과 나눗셈

뺄셈 = subtract, 나눗셈 = divide Node임

 

빼기와 나눗셈 연삼임

 

단, 나눗셈의 경우 연산이 느리다는 이유로, 곱셉을 사용한 나눗셈 연산을 더 많이 한다고 함

 

2-4. 노드의 반전

반전 연산 = 1 - X

이를 확인

 

subtract Node를 사용함 = 빼기 연산 사용

1 - (1, 0, 0)를 연산할 시 (0, 1, 1) = 하늘색이 됨

 

2-5. 0~1사이를 넘어가는 연산

만약 색깔의 속성이 (2, 0, 0)일시 어떻게 되는가? 에 대한 이야기

모니터에서는 최종점이 1이기 때문에 1을 넘어가는 순간 결국 1로 취급하게 됨

 

다만, HDR 상태 + Post Process 상태라면 1을 넘어가는 색에 살짝 bloom이 들어가게 됨 

큐브가 살짝 빛나는 것을 확인할 수 있음

 

2-6. 각종 블렌딩 연산

셰이더 그래프에서는 포토샵 같은 프로그렘에서 제공하는 블렌드를 제공함

이와 같이 여러 블랜드 옵션을 사용 가능함

 

3. Color의 연산과 감마 코렉션

Q. Vector과 Color는 같은 Node로 봐야 하는가?

A. 비슷하지만 다른것이다

위의 두 사진은 합연산을 실행한 결과이다

 

이때 눈여겨볼 영역은 회색 + 회색이다

Vector3와 비교할시,

• Vector3의 경우 흰색으로
• Color의 경우 회색으로

이하로 처리되는 것을 알 수 있음

 

이러한 색상 보정을 감마 코렉션이라 한다

 

감마 코렉션 = Gamma Correction

위의 그래프를 보면 파란색 선은 일정하게 올라가는데 반해 주황색 선은 곡선을 그린다

이러한 이유는 인간의 눈은 완벽하게 lerp된 그라데이션을 볼때 0.5에 해당하는 값이 자연스럽게 변하지 않는다고 느끼기 때문에 이를 보정하기 때문이다

 

즉, 셰이더에서 Color는 Gamma의 영역이기 때문에 0.5에 해당하는 값이 더욱 어두워진 값 = 인간의 눈에 더 자연스러운 그라데이션 회색이 나오는것이다

 

즉, Color로 무언가를 할려면 Colorspace Conversion을 사용해서

Linear -> RGB로 변경해서 사용한다

 

이는 곱셉도 마찬가지이니 참고할 요소이다