URP로 Toon Shader 만들기 -Three(Two) Tone Shading 1-

이번에는 카툰 렌더링의 필수 요소라고 할 수 있는

Three Tone Shading(혹은 Two Tone Shading)에 대해서 정리해보고자 한다

---

Three(Two) Tone Shading에 대해서

유니티짱 툰 쉐이더에서 발췌

Three(Two) Tone Shading이란 위의 그림에서 보이듯이 음영을 2~3단계로 나누는 것을 뜻한다

(개인적으로 2D 셀 애니메이션 풍을 쉐이딩에서 가장 필수적인 요소라고 생각함)

 

레거시 라이팅 모델과 비교하자면 Diffuse에 해당하지만,
음영이 단계적으로 나뉜다는 게 차이점이다

음영을 몇 단계로 나눌지는 정하기 나름이지만 여기서는 3단계를 기준으로 하고자 한다

---

Three(Two) Tone Shading의 개념

사실 Three(Two) Tone Shading을 구현하기 위한 개념은 단순하다

왼쪽(Diffuse)의 값을 오른쪽으로 바꾸기만 하면 된다

문제는…그 방법이 매우 다양하다는 것이다

---

Three(Two) Tone Shading 구현 방법들

실제로 이번에 과제하면서 구현한 방법은 아니지만
예전에 배웠거나 조사하다가 알게 된 방법을 간략하게 정리하려고 한다

1. LUT(LookUpTable) 텍스처 사용

룩 업 테이블 텍스처를 이용해서 N dot L의 값을 대응시키는 방법이다

N dot L의 값은 0~1이고, 텍스처의 uv값도 0~1이므로 텍스처로 컨트롤할 수 있다

반대로 LUT이 필수라는 게 단점이기도 하다

2. ceil() 혹은 floor() 함수 사용

float y(float x) {
  float ret = ceil(cos(x) * 4.0) / 4.0;
  return ret;
}

올림과 내림 함수인 ceil() 혹은 floor() 함수를 이용한 방법

위와 같이 사용하면 단계를 나눌 수 있다

3. step() 혹은 smoothstep() 함수 사용

왼쪽이 step(0.5, cos(x)); 오른쪽이 smoothstep(0.0, 1.0, cos(x));

step() 혹은 smoothstep() 함수를 이용하는 방법

step(x,y)은 x≤y 이면 1을 리턴하고, 그렇지 않으면 0을 리턴하는 함수로
음영의 경계를 컨트롤 할 수 있다

 

smoothstep() 함수는 step()와 비슷하지만 Hermite보간법으로 경계를 흐리게 해준다

왼쪽은 step()의 예시, 오른쪽은 smoothstep()의 예시

4. (Half)Lambert를 Power와 Feather로 컨트롤하는 방법

이 방법은 Power와 Feather란 프로퍼티 이용해서
(Half)Lambert의 영역과 경계를 컨트롤하는 방법이다

(참고한 우마무스메나 UTS에 사용된 방법도 이쪽으로 추측됨)

💡 참고로 Feather란 포토샵 등에서 선택 영역의 경계를 흐릿하게 만드는 옵션이다

이번에 구현한 것도 이 방법이다

자세한 내용은……분량 문제로 다음 글에 정리하고자 한다;;

---

참고 사이트

GLSL Grapher

GLSL Grapher