[ue5] Toon shader 툰쉐이더

일단 머티리얼 하나 새로 만든다음 

 바탕화면 클릭후  Material > Material Domain 에서 Post process선택.

 

 SceneTexture 노드추가한다음  역시 디테일패널에서

postprocessInput0 을 선택해줌 

그리고 연결연결

디새츄레이션 desaturation 노드 추가추가

그리고 다시 배경 더블클릭후 디테일패널의 

PostProcess Material 패널에서 > Blendable Location을  Before Tonemapping으로 바꿔줌.

 

톤맵핑 전에 포스트프로세싱 처리하란의미인가? 

원래 기본값은ㄴ After Tonemapping이었음.

 

그리고나서 방금 만든 머티리얼의 인스턴스 머티리얼을 만들어준다음 

이 인스턴스 머티리얼을 씬에 적용해야함.'

 

 

 

콘첸츠 추가> volumes> post process volume선택

포스트프로세스 볼륨 아웃라이너에서 선택후

디테일패널에서

Post Process Material을 찾는다 .. 여기서부터 온다 감이 온다

 

+ 버튼 add element를 누르고

choose에서 Asset reference 선택

그리고 아까 만든 머티리얼인스턴스선택~

 

포스트프로세스 볼륨 큐브 안으로 들어와보면 이렇게 모든것이 회색으로 보인다..

잘 적용되었다는 뜻!

이제 포스트 프로세스 볼륨 세팅으로들어가서

Infinite extend(unbound) 에 체크해줌.

포스트프로세스를 경계없이 씬 전체에 적용하겠다는 뜻.

큐브 내부 뿐만이 아닌 씬 전체에 포스트 프로세스 볼륨이 적용되어  회색으로 보이게된다.

 

이제 본격적으로 툰쉐이더를 만들어보자

 

아까 만든 툰쉐이더 머티리얼을 더블클릭한다음 SceneTexture를 복사해준다.

복사한 씬 텍스쳐를 더블클릭한후 Scene Texture ID를 Basecolor(as stored in GBuffer)선택.

 

그리고 color 결과값을 emissive에 연결

라이트 버퍼정보값을 가져와 쉐이딩으로 사용한다는것같은데

블렌더에서 툰쉐이딩 만들때를 생각해보면 조금 이해가 가는것같기도?

 

apply한뒤 씨을 살펴보면 ..

nolit 모드처럼 빛 정보없이 걍 컬러값만 있는것을 볼수있음

,

자 다시 작업ㄱㄱ...

두 노드를 divide노드로 엮어준다음 결과값에 saturate 노드 넣어줌.

 이때 saturate값은 0과 1사이어야함.

 

component mask추가해줌.,  근데 기본으로 r,g가 선택되어있는데

우리는 결과값 하나만있으니까

rg 선택되어있는것중에 g 체크해제.. R만 남겨줌

그리고 그 결과값을 다시 emissivㄷ에 넣어주고 저장> 씬 확인해보면

 

ㅇ

ㅇㅗ~

빛을 좀더 줘보면

 

좀더 극단적인..

암튼 다시ㅏ 머티이러노드로돌아가서

step 노드 힘있게 추가

 

x값에 방금 만든 마스크 r 결과값을 넣어주고 

파라미터 추가> light shadow threshold  이름해주고   default 를 0.5로 넣어줌.

이렇게해서 언리얼에서 x값 1, y값0으로 치환해서 사용함

헷갈리지만 암튼 빛을 많이받는 부분은 1 안받는부분은 0이된다고함

0.5이상 받으면 1,  0.5이하 받으면 0이되는것. 

그 값으로 흑백 값을 정해주는것.   like 반올림~

 

 

이대로 저장하고 apply해보면 씬은

오..... 아까보다 훨씬 분명한 흑백이 되었다.

 

다시 머티리얼로 돌아와 light shadow threshold 노드를 복사한다음 이름변경

>Light shadow transition size.

흑백 색깔 두개뿐이라 너무 극단적이라서 좀더 부드러운 그라데이션을 주는데 사용할것이다

default값은 0.2로 주자.

0에서 1사이의 값중에서 0.5 를 기준으로 흑과 백으로 나눠진다고하면

위아래로  전환값(transition size)  +0.2  -0.2만큼의 그라데이션이 들어간다는 의미.

그림으로보니 좀더 알것같다

How to Make a Toon Shader in UE5 - YouTube

이분의 설명을 참고했다

 

점점 알쏭달쏭하지만  smoothstep 추가 . 이것이 우리가 필요한것이라고함

기존의 step노드 버려~! 너무 극단적이니까.

multiply노드 추가한다음 b값에 0.5넣어줌

오........

subtract와 add를 저렇게.. 추가..

기절..

복잡해보이지면 add 값은 max로

subtract값은 min으로

그리고 value값은  앞서뽑아준 라이팅 정보값을 넣어주면됨...

정리정리

흠... 뭔가 바뀌었나? 좀더 부드러워졌나? (잘모르겠음)

 

만약 다시 극단적인 흑백효과를원한다면

Light shadow transition size를 0.2에서 0.0으로 바꿔주면 됨

좀더 부드러운 전환을 원한다면? 0.2보다 더 높은 값을주면 되겠지

왜냐면 그라데이션 부분이 넓을수록 부드럽고 자연스럽게 전환되는 효과가 생길테니까

v를 눌러서 벡터인풋 파라미터 만들어준다 두개!

shadow tint/ light tint

이름에서 알다시피 그림자색과 라이트 색임.

이것을 lerp (linear interpolate) 보간 노드를 사용하여 섞어줄거임~

눈치껏~ alpha값은 ㅇ파서만든 smoothstep의 결과값이 들어간다.

알파라는 ㅣㅇ름에서 알다시피 흑백 정보를 받아 들어가서  

검은 부분은 shadow tint 값이,  하얀부분은 light tint 값이 들어간다고 이해하면됨.

 

배우면 배울수록 블렌더 툰쉐이딩과 같은원리군!

 

이렇게 머티리얼을 만들어놓고  

 

인스턴스 머티리얼을 사용해서 색상을 변경하면된다

이렇게하면다양한색상의 툰쉐이더로 만들수있음

 

 

오근데 여기서 문제점이 생김

 

 

ㅏ

카메라 구도 변환할때마다 뭔가.. 뭔가 결점이 보인다

Lumen이 너무 나대기때문임..

글로벌 일루미네이션때문이라고함.

project setting에서  global illumination 찹아서  none으로 바꿔줌. 

나는 굳이 루멘을 사용하겠다~ 조명이랑 불일치해도 상관없다~ 싶으면 그냥 둬도 됨.

그리고 앞서 만든 scene texture(as stored in gbuffer) 복사해서 하나 더 만든다음  

위의 lerp 값과 multiply해줌.

근데 에러가 나네? 

왜냐면.. multiply노드 a값은 컬러값(rgb)가 들어갔는데 

b값은 아니기떄문임

 

Component 마스크 사용해서 rgb값 다 사용체크한다음 넣ㄴ어주자

짠~~

 

 

하 근데 또 문제가있음

이 씬에다가 컬러 있는 조명을 넣어보면

조명이 걍 흰색임.. 컬러가 안나옴..  분명 파란 조명을 넣었는데?

 

그러니 다시 수정을하자

앞에 만든 scene texture post process volume복사  

 곱하기 (multiply)

base render blend amount 라는 파라미터 만들어서 ㄴ허어줌.  : 디폴트값 0.5

그 곱한값을.. 다시basecolor gbuffer 노드랑 더해줌.   툰쉐이더 ㅈ ㅓㄱ용되기 전에!

이게 뭔 으ㅏㅣ미냐면

툰쉐이더가 적용되기전 원래 색상을 정의할수있는것.

blend amount 값을 0으로하면 툰쉐이더에 원래 색상이 적용이 안되는것이고

1로하면 기본 색상을 모두 사용하고! 거기에 툰쉐이더를 입히는것

blend 0.5인모습

 

 

blend 1인 모습

blend 0인 모습

 

 

매우 ㅇ흥미롭...

 

 

이제 조명과 멀리 떨어진것은 툰쉐이더가 적용되지 않게할거임

왜냐면 앞서 우리는 infinity post process volume을 만들어버려서

지금 모든곳에 툰쉐이더가 적용되고있음 

파라미터 노드추가> effect max distance라고 이름짓고

default value: 500000 으로 크게크게 잡아줌

하늘에는 포스트프로세스볼륨 적용안되게 할거니까

씬의 깊이를 얻을수있는? scene depth  노드추가하고

단계적으로 적용할거니까 step ㄴ ㅗ드추가

이것이 무슨말이냐면..

max distance보다 멀리 있는 씬의 경우 step노드가 1값을 반환함

거리내에 있으면 0 반환

 

 

이제 언리얼에게 0값을 반환하는 경우에만 쉐이더를 적용하겠다고 알려주면됨

불린노드쓰나? 했더니

Lerp노드 넣었음 

 l눌러서 클릭해서 쉽게 추가가능.

A에는 쉐이더값을 넣고

B에는 scene texture postprocessinginput0 복사한것에 component mask연결하여 rgb값 뽑은것을 넣어줌. (툰쉐이더가 적용되기 전의 상태를 넣는것임 1의 경우엔 툰쉐이더 필요없으니까)