URP Shader Graph에서 Saturation 없이 흑백 전환 만들기

Shader Graph를 만지다가 흑백 전환을 직접 한 번 만들어 보고 싶었다. 주제는 단순하다. 텍스처 한 장을 받아서 흑백과 컬러 사이를 슬라이더 하나로 오가게 만들기. Saturation 노드를 바로 써도 됐지만, 이번에는 굳이 풀어서 만들어 봤다.

문제

필요한 동작은 단순했다.

• 텍스처 입력 하나를 받는다.
• 슬라이더 값이 0이면 완전 흑백이 된다.
• 슬라이더 값이 1이면 원본 컬러가 그대로 나온다.
• 그 사이 값에서는 자연스럽게 보간된다.

이 정도면 Saturation 노드를 바로 써도 된다. 그래도 흑백 이미지가 실제로 어떻게 만들어지는지를 한 번 손으로 확인해 두고 싶었다.

이렇게 풀었다

구성은 두 단계면 끝난다.

1. 원본 컬러를 grayscale 값으로 한 번 바꾼다.
2. grayscale과 원본 컬러를 Lerp로 섞는다.

흑백 값은 보통 RGB를 똑같이 더하지 않는다. 눈에 조금 더 자연스럽게 보이도록 채널마다 가중치를 다르게 준다. 여기서는 아래 비율을 썼다.

gray = R * 0.21 + G * 0.71 + B * 0.07

이렇게 얻은 gray를 RGB 세 채널에 다시 펴 주면 그레이스케일 컬러가 된다. 그다음에는 익숙한 Lerp(A, B, T)만 붙이면 된다.

• A: grayscale
• B: 원본 컬러
• T: 0~1 슬라이더 값

실제로 셰이더 쪽 개념만 적으면 아래 한 줄에 가깝다.

result = lerp(grayscaleColor, originalColor, t)

왜 이렇게 했나

좋았던 점은 구조가 단순해서 디버깅하기 쉽다는 데 있다.

• 흑백 변환이 잘못됐는지
• 보간 값이 잘못됐는지
• 최종 출력이 잘못됐는지

세 부분을 따로 떼어 볼 수 있다. Saturation 노드를 바로 쓰면 더 빠를 수는 있지만, 한 번 직접 풀어 보면 흑백 전환이 결국 그레이스케일 생성 + 보간이라는 게 더 또렷하게 보인다.

메모

여기서 남는 건 복잡한 기법보다 사고방식 쪽이다. 이런 간단한 효과는 노드 하나를 외우는 것보다 원본 값을 어떤 형태로 바꾸고, 그 둘을 어떻게 섞는가로 이해하는 편이 오래 남는다.

비슷한 효과를 만들 때는 아래 순서로 생각하면 된다.

• 먼저 원하는 중간 표현을 만든다. 여기서는 grayscale이다.
• 그다음 원본과 결과를 Lerp로 섞는다.
• 마지막에 슬라이더나 마스크로 제어 범위를 붙인다.

---