[UE5] 블루아카이브 TPS게임 개발일지 (3) - 툰 쉐이딩

원작의 느낌을 살리기 위해 툰 쉐이딩을 적용해보았다.

툰 쉐이딩의 기본 원리는, 한 마디로 라이팅을 단순화하는 것이다.

 

유튜브에 좋은 튜토리얼이 있어 그대로 따라가보았다.

 

https://www.youtube.com/watch?v=mzydOmgN7mc&t=1555s&pp=ygUPdWU1IHRvb24gc2hhZGVy

 

 

 

 

완성된 Post Process의 그래프

밑에 따로 빼둔 것은 특정 액터에만 툰 쉐이더를 적용할 수 있게 해주는 그래프 파츠인데, 본 게임에서는 모든 사물이 툰 쉐이딩 되기를 바라므로 사용하지 않는다.

 

포스트 프로세스 머티리얼의 내용물은 화면의 각 픽셀에 대해서 병렬처리된다는 점을 기억하고, 아래 내용을 보면 좋을 것 같다.

영상의 아저씨가 한 것을 하나씩 살펴보자면, 먼저 SceneTexture를 2개 가져와서 Desaturation해주었다.

PostProcessInput0으로 가져온 것은 화면을 그대로 가져온 것이고,

BaseColor로 가져온 것은 말 그대로 BaseColor만 가져온 것이다. (Unlit으로 가져온 것과 같음)

Desaturation을 해주는 것은 화면을 흑백으로 만드는 것과 같다.

 

이런 식으로 각각 가져온 2개의 화면을 Desaturation하여 Divide를 해주면, 컬러 정보는 삭제한 채 라이팅 정보만 추출할 수 있다.

화면을 lit 버전과 unlit 버전으로 각각 가져와 컬러를 빼준 후, (lit 버전) / (unlit 버전)을 해준 것과 같다.

 

그리고 그 결과물을 다시 Saturate해줬는데, 이건 컬러 값을 0과 1 사이로 clamp 해주는 기능이다.

이렇게 얻은 라이팅 정보는 RGB 3채널의 형태로 저장되어있는데, 흑백 화면을 가지고 연산을 했으므로 R, G, B 값은 모두 같다. 그래서 이 중 아무거나 하나인 R 채널을 가져와 사용한다.

앞에서 라이팅 정보를 구했으므로, 그걸 이용해 일정량 이상 빛을 받는 부분은 쨍 하고 밝게, 그 미만으로 빛을 받는 부분은 확 어둡게 만들어준다.

한 마디로 라이팅을 극단적으로 만들어주는 것이다.

위 그래프는 SmoothStep의 범위를 [0.4, 0.6]으로 정해주고 있다.

픽셀의 밝기 값이 0.4 미만이면 시커멓게, 0.6 초과면 바로 최대밝기로, 

[0.4, 0.6] 구간 안이면 자연스럽게 처리해주려는 것이다.

이렇게 함으로써 툰 쉐이딩 느낌을 내면서도 그림자가 너무 거칠지 않게 된다.

그렇다고 그림자가 진 부분을 완전히 시커멓게 처리하는 것도 과할 수 있다.

따라서 앞의 결과값을 그대로 사용하지 않고, Lerp를 이용해 자연스럽게 처리해준다.

Shadow Tint가 바로 그림자가 진 부분에 사용할, 완전한 검정색을 대신할 컬러이다.

완전히 어두운 부분은 Shadow Tint의 색을, 완전히 밝은 부분은 Light Tint의 색을 따라갈 것이다.

 

그리고 Multiply 노드를 통해 Lerp해준 결과물에 실제 색깔을 입혀주고 있다.

그냥 BaseColor만 가져와서 Multiply를 해주면 게임 내 PointLight 등의 색이 반영되지 않는 문제가 있기에(unlit 버전 화면을 가져오는거니까),

PostProcessInput0, 즉 라이팅을 포함한 컬러 정보를 그대로 가져와 0.5배 해서 더해주고 있다.

마지막 부분은 하늘과 같이 카메라에서 아주 멀리 떨어진 부분은 굳이 툰 쉐이딩을 하지 않게 하는 것이다.

Scene Depth는 각 픽셀의 깊이를 뱉어준다.

Step 노드는 이걸 받아들여서, 픽셀의 깊이가 500000 이상이면 1을, 그 미만이면 0을 뱉어줄 것이다.

Lerp 노드는 툰 쉐이딩이 적용된 화면을 A에, 날 것 그대로의 화면을 B에 담고있다.

이렇게 함으로써 가까이 있는 픽셀은 툰 쉐이딩을 적용하고, 멀리있는 픽셀은 툰 쉐이딩을 적용하지 않는 것이다.

 

 

재밌는 점은, 루멘을 사용하지 않아야 한다는 것이다. 루멘의 반사광과 간접광의 정밀한 실시간 계산으로 인해, 오히려 그림자가 들쭉날쭉하는 증상이 나타났다.

 

루멘 적용 시:

https://www.youtube.com/watch?v=yYkjnHhCvn8

 

루멘 미적용 시:

https://www.youtube.com/watch?v=dviL_oE1D0Q

 

별개로 루멘 기능을 끄니 확실히 비디오램을 덜 잡아먹는 것이 보였다.

 

 

https://www.youtube.com/watch?v=tBesd3QUPsQ

확실히 캐릭터가 더 보기 좋아진 것 같다.