유니티 SRP 셰이더 그래프 - 10

툰셰이더를 만들어봅시다(와아아아악!!!!)

 

1. NPR

2. 확 갈라지는 그림자

3. 아웃라인 - fresnel outline

1. NPR

Non Photo Realistic의 약자로, 사실적이지 않은 기법? 그런 셰이더라 보면 됩니다

그중에 뭐 툰셰이더도 껴있고 그런것이죠

뭐 이런거라던가(오브라딘 호의 귀환)

이런거처럼요(소울워커)

 

간단하게 하나 구현해봅시다

dither 라는 노드를 사용할건데, 이게 어떻게 생겨먹었느냐 보면

이렇게 점들이 박혀있는게 알아서 만들어져 있는 노드입니다

in에다가는 대충 점의 크기? 그런 역할을 하는 것 같고, 아래에는 스크린 포지션이라고해서 내가 보는 화면 자체를 uv로 사용해서 화면 제일 왼쪽 아래가 (0,0), 맨오른쪽위가 (1,1)인 벡터입니다

z, w값은 프리뷰로도 보고, negate한 걸로도 봤는데 그냥 까만거 보니까 0값인것 같더라고요(진짜로 안쓰던가, 아니면 다른데에서 써먹던가 하나봐요)

 

암튼 그래서 이걸 그대로 컬러에 연결시켜주면

이것처럼 평면처럼 저 점들이 찍히게 됩니다

그리고 스크린 포지션 기반이기 때문에 오브젝트에서 멀어지거나 가까워져도, 텍스쳐 크기는 똑같습니다

더 확실하게 보기 위해 약간 수정을 해보죠

uv 타일링을 했던것처럼 screen position을 곱해주는데, 우리는 저 점들을 더 크게보고싶으니까 한 0.1정도 넣어줍시다

그래서 결과를 보면

이런식으로 오브젝트가 화면상에서 멀어져도, 텍스쳐 크기는 그대로입니다

뭐 암튼 이걸 갖다가 위에 사진에서 나왔던 오브라딘 호의 귀환 비슷한 느낌을 낼 수도 있고 아니면..

이런식으로 만들어볼 수도 있죠(implosion)

(게임에선 화면 전체에 이 효과를 먹였지만 암튼요)

여기에서 흐르는 효과도 추가할 수 있고 말이죠

 

2. 확 갈라지는 그림자

그럼 본격적으로 툰셰이더를 만들어봅시다

툰셰이더라고 해서 딱 이거다 라고 정해진 건 없지만 그래도 일반적으로 생각하는 툰셰이더에는

단계가 확 갈라져있는 음영 / 아웃라인

이 2개가 특징이라고 볼 수 있죠. 이 두개를 한번 만들어봅시다

 

1 - 두단계로 가르기

2 - 여러단계로 가르기

3 - 스펙큘러에도 적용시키기

 

1 - 두단계로 가르기

먼저 이렇게 램버트를 만들어줍니다

두 단계로 갈라진다는건 0(검은색)과 1((하얀색)만 존재한다는 거겠죠

그 사이의 소수를 어떻게 할것이냐에 따라 자르는 위치가 달라집니다

순서대로 올림, 반올림, 내림입니다

올림은 0에서 0.0000001만 올라도 1로 쳐버리니까 0 바로 다음부터 하얀색이 찍히고,

반올림은 0.5 넘어가서부터 하얀색, 그 아래는 검은색이 되고

내림은 1 미만은 다 내려쳐버리기 때문에 검은색이 되죠

한번 올림한 결과물을 봐봅시다

잘 나옵니다

근데 더 쉬운 방법이 있어요

이 step 이라는 노드인데, in에 값을 넣고 edge에 기준값을 넣으면

기준값 이상인 곳은 1, 아래인 곳은 0으로 처리해서 반환해주는 노드입니다

위처럼 0으로 놓으면 0을 넘어가는 값은 다 1로, 0아래의 값들은 다 0으로 처리한다는것이죠

그럼 저 edge에 0.5를 넣으면 어떻게될까요

램버트 결과물에서 딱 0.5인 부분부터 1로(하얗게) 나오는 걸 볼 수 있습니다

 

뭐 이렇게 해서 저 하얀 부분을 마스킹 영역으로 사용해서

이런식으로 만들 수 있고

one minus를 사용하면

이런식으로 그림자부분도 색을 넣을 수 있죠

색 뿐만 아니라 텍스쳐를 곱하면 텍스쳐도 넣을 수 있을것이고요

 

2 - 여러단계로 가르기

2단계로 갈라봤으니 이제 여러단계로 갈라봅시다

 

먼저 step으로 만드는 방법입니다

step을 여러개 해서 다 더합니다

그럼 이런식으로 나누기 전의 값은 이런식으로 0~4의 값을 가지고 있겠죠

이걸 이제 범위를 0~1로 좁히기 위해 4를 나눠줍니다

그럼 이런식으로 여러단계로 갈라지도록 만들 수 있습니다

(step 쓰는 방법중에 더 간단한 방법이 있을것같긴 한데 일단은 넘어가겠습니다)

 

두번째는 ceiling을 사용하는 방법인데

1. 0~1에 4를 곱해서 0~4로 확장

2. 0~4에서 확 갈라질 수 있도록 소수점을 제거(올림/반올림/내림, 여기서는 올림인 ceiling을 사용)

3. 0 1 2 3 4로 딱 나눠진 범위를 0~1로 다시 압축하기 위해 4로 나눔

그러면 위와 똑같은 결과물이 나오게 됩니다

 

3 - 스펙큘러에도 적용시키기

스펙큘러도 비슷합니다

step에 넣고 edge값을 조절시키면 스펙큘러 범위를 조절할 수 있죠

 

3. 아웃라인 - fresnel outline

딱 갈라지는 음영은 어느정도 됬으니 이번엔 아웃라인을 만들어봅시다

fresnel 노드로 만들어볼건데요

구현은 간단합니다 그냥 fresnel 꺼내서 step에 연결시키면 끝입니다

다만, 아웃라인을 검정색으로 만들 것이기 때문에 이번엔 edge에 fresnel을 넣고, in에 기준값을 넣어줍니다

이러면 edge쪽이 더 클때 0(검정색)이 되서 바로 검정색 아웃라인을 뽑아낼 수 있습니다

 

이제 이걸 램버트와 합칩니다

아웃라인은 하얀색은 버리고 검정색을 쓸 것이기 때문에 곱연산을 해줍니다

이런식으로 램버트나 스펙큘러처럼 하얀색을 살리려면 add, 검은색 아웃라인과 같이 검은색을 살리려면 multiply를 사용합니다

Lambert + Specular + Outline의 결과물입니다

 

노말맵입히는건 이전에 계속 설명했으니 이번엔 생략을..

(마찬가지로 그냥 노말벡터를 넣어야 할 곳에 월드스페이스로 변환한 노말맵을 연결시키면 됩니다)