[Dev] UE5 Toon Shading - Custom Shading Model (언리얼 커스텀 셰이딩 모델)

 

 

개인 프로젝트에 사용할 캐릭터와 커스텀 셰이딩 모델을 적용한 모습. (아직 모델링은 미완성)

 

 

셰이더 목표 설정

 

언리얼에서 툰 스타일의 셰이더를 제작하려면 몇가지 방법이 있습니다.

그 중 가장 많이 사용되는 방법을 적어보자면...

 

1. 실시간 그림자를 무시하고 Unlit 기반으로 심플하게 만든다. 

2. Lit기반으로 완전 툰이 아닌 Stylized 스타일로 만든다. (일본 애니메이션 스타일이 아닌 발로란트나 오버와치같은 느낌의 아트 스타일)

3. 엔진에 커스텀 셰이더를 추가하여 많은 부분을 뜯어고친다.

 

 

3번이 실시간 그림자를 받는 일본풍 애니메이션 스타일의 툰 셰이더를 만들때 적합하다고 생각되어 개인 프로젝트과 포트폴리오 겸사겸사 만드는데 그동안의 공부했던 것들과 삽질들을 하면서 만든 과정을 적어봤습니다.

 

 

 

---

Toon Shading Model 모델 추가

 

커스텀 셰이딩 모델을 추가하고 사용하기 위해서는 C++를 수정해야합니다.

엔진쪽은 많이 복잡해서 한개한개의 함수는 대충 알겠지만 전체로 보면 워낙 방대하고 뭔가 새로운 것을 추가하려면

전문 엔진 프로그래머가 아니면 쉽지않습니다.

저도 해외 블로그를 보면서 추가를 했습니다. 

 

두가지 커스텀 셰이딩 모델을 추가한 모습

툰 모델을 추가하고,

나중에 반실사에 사용해볼 모델 Stylized도 하는 김에 추가해서 2개를 추가했습니다.

 

머티리얼의 핀도 이름도 변경하고, 비활성화 되있던 핀들도 사용할게 있으면 활성화해줍니다.

이미지는 초기 설정이라 불필요한 핀과 데이터들은 정리가 필요하지만, 만들다보면 추가적으로 필요한게 생기기도 하고,

필요없어지는 것들도 있어서 2차로 정리는 필요합니다.

 

 

 

---

본격적인 셰이더 코드 수정

#1 Ramp 텍스쳐 추가 및 적용

 

아마 가장 많이 사용하는 일반적인 방법으로 NoL을 이용한 방법으로 0~1까지 나온 값을 램프 텍스쳐의 UV에 넣어 셰이딩을 하는 방법입니다. 이 방법은 언리얼의 기본 머티리얼 에디터에서도 제작할수는 있지만 실시간 그림자는 처리를 할수가 없습니다.

 

램프 텍스쳐 샘플링할때 그림자 값을 넣어서 처리하려고 하는데 머티리얼 에디터안에서는 그림자의 값을 가져올수가 없습니다.

셰이더 코드에서 처리를 해줘야하는데 하다보니 또 난관이 생깁니다.

텍스쳐를 셰이더에서 처리하려고 하면 엔진 컨텐츠로 넣어서 처리를 해야됩니다.

 

이래저래 커스텀 셰이딩 모델을 추가하고 이런 저런 수정을 해야됩니다.

 

엔진을 사용하다보면 기본적으로 엔진 시작하자마자 볼수있는 텍스쳐들

엔진 컨텐츠 폴더의 EngineMaterials 폴더를 보면 가장 많이 볼수있는 텍스쳐들과 머티리얼들이 있는데,

 

 

이 텍스쳐가 있는데 제가 기억하는게 맞다면 이 텍스쳐는 정확히 제가 원하는 방식으로 처리를 하는 것이라

이것과 똑같은 방법으로 텍스쳐를 셰이더로 넘기면 될거라고 생각해서 참고해서 추가 하기 시작했습니다.

 

그.런.데

 

우리가 흔히 보는 툰 방식의 Ramp 텍스쳐들은 대부분 포토샵에서 제작을 하는데, 대체로 아틀라스 방식으로 많이 만듭니다.

원신같은 경우는 램프 텍스쳐를 캐릭터별로 각자 사용하는 것 같았는데, 각자 장단점이 있지만

작은 사이즈의 여러개 텍스쳐를 사용하는 것보다는 아틀라스 형식으로 묶어서 POT로 만들어서 압축을 걸어 사용하는 것이

저는 좀 더 낫다고 생각하는데,

단점이라면 아틀라스를 포토샵에서 제작할 경우,

한명이 작업을 하면 누군가는 대기를 해야되거나 둘이 같이 작업하게 되면 둘중 하나는 작업이 날아가는 경우가 생깁니다.

만약 조율하지않고 작업한 경우는 이전 작업이 덮어씌워져 날아가는 경우도 생기고요.

 

가장 큰 단점은 이쁘게 나왔는지를 확인하기 위해서 포토샵에서 저장을 하고 엔진에서 확인하는 시간이 너무나 불편하고

시간이 걸립니다.

 

그래서 찾다보니, 엔진에서 커브 아틀라스로 편하게 작업할수있는 방법이 나와있는 외국 블로그가 있더군요.

엔진 버젼이 많이 차이가 나서 다른 부분들이 있긴하지만 대충(?) 따라해서 추가를 해줍니다. 

 

엔진에 추가한 컬러 커브 아틀라스

이렇게 커브로 Ramp 텍스쳐용을 제작하면,

 

Ramp 텍스쳐로 사용할 커브 아틀라스, 추가한 이미지

 

이렇게 편하게 추가를 하고 바로바로 엔진에서 적용이 가능하며, 컬러 커브가 분리되어있으니 각자 작업자마다 작업할수있습니다.

 

 

컬러 아틀라스를 커스텀 셰이더에 적용한 이미지

 

 

램프 텍스쳐를 이용한 셰이딩 테스트 이미지에서는 컬러가 Emissive처럼 나왔지만 실제로 컬러 적용은 여러가지 사항을 고려하면

어둡게 적용이 됩니다. 에너지 보존법칙인지 하는것도 있고 라이팅가 여러개일때 누적하는 함수들도 있고,

씬에서 기본적으로 낮일때라던지 기준이 될 밝기도 고려해야됩니다.

 

 

 

디렉셔널 라이트에 대한 램프 텍스쳐 처리 / Dynamic Shadow 실시간 그림자 받기 / Local Light 적용

 

 

 

---

이제 캐릭터를 만들어 적용해봅니다.

 

 

직접 제작한 캐릭터에 적용

모델러였던 시절을 떠올리며 즐겁게 만들어 툰 셰이더를 적용했습니다.

 

캐릭터 디자인 - 저

캐릭터 모델링 / 텍스쳐링 - 저

캐릭터 리깅 - 저

캐릭터 애니 - 저

 

아직 미완성이긴하지만 일단 시간관계상 여기까지....

 

실시간 그림자 적용

 

실시간 그림자도 적용이 잘됩니다.

 

 

 

 

 

 

만들면서 조금씩 디테일을 추가합니다.

뭔가 눈에 깊이감이 없는듯해서 추가를 해줬는데 언듯보면 알수없지만 비교를 해보면 개인적으로는 훨씬 자연스러워 보입니다.

헤어에 하이라이트 부분은 베이스컬러 텍스쳐의 알파값을 가지고 색수차를 추가해봤습니다.

이것 역시 저는 상당히 맘에 듭니다.