[📜일지] [17] 펭귄 게임 개발일지 - 툰 쉐이더

[Frustma..(youhk40)]

정말 오랜만에 개발일지 올리네!

그간 놀고 있던 건 아니야!

스마일게이트 퓨처랩에서 진행하는 인디게임 개발 장학팀에 선발돼서

스터디까지 겸하면서 개발 진행했는데, 스터디 내용을 허락없이 올리기엔 눈치가 보이더라구~

그래서 이번에 개발 장학 기간이 끝난 김에 개발일지 올리게 됐어.

이번 개발 주기에는 툰 쉐이더를 만들었어.

카툰 그래픽을 지향하는 프로젝트다 보니 툰 쉐이더에 대한 지식이

아무래도 필요할 것 같았거든.

툰 쉐이더는 처음 건드리다 보니 원신의 툰 쉐이더를 레퍼런스 삼아서

만들기로 했는데, 레퍼런스 자료가 많아서 참고하기 좋았어.

참고한 내용에 맞춰서 어떤 방식으로 툰 쉐이더를 만들었는지 알려줄게.

가장 먼저 미호요 공식 사이트에서 사용할 모델을 다운 받았어.

사용한 모델은 '엠버'라는 캐릭터야.

기본적인 텍스쳐들은 공식 사이트에서 같이 배포하고 있어서

단순히 적용만 시켜줘도 좋은 퀄리티의 모델이 나와.

여기서 눈 여겨볼 점은 이미 그림자가 텍스쳐에 칠해져 있다는 거야.

 

다음으로는 가장 기본적인 셀 쉐이딩을 적용해줬어.

그림자의 양상을 텍스쳐에서 받아오게 설정해줘서

단순하게 이 텍스쳐를 바꿔주는 걸로 다양한 효과를 연출할 수 있어.

위 사진은 쉐이딩 텍스쳐에 따른 그림자의 변화야.

다음으로는 Anisotrophic Hair와 Face Mask야.

Anisotrophic Hair는 위 두 사진과 같이 머릿결의 방향성을 효과로 주는 걸 말해.

위 텍스쳐처럼 머릿결에 해당하는 마스킹 텍스쳐를 따로 만들고, Fresnel 효과를 줬어.

Face mask는 얼굴에 지는 그림자를 NdotL과 같은 라이팅 모델이 아니라,

따로 만들어둔 텍스쳐를 따라 생기게 만드는 일종의 마스킹에 해당해.

확실히 위 방식으로 만들어야 애니메이션스러운 캐릭터가 나오더라구.

다음은 금속 재질에 대한 처리야.

이 경우에는 Matcap이라는 일종의 텍스쳐 베이킹 기법을 이용해 만들었어.

위 사진같이 미리 구워진 금속 재질의 텍스쳐를 사용해 빛 연산을 해주는 건데,

실제로 만들 때는, 위에서 설명한 ToonRamp 함수와 적절히 섞어서 사용했어.

마지막으로 Outline과 Edge Highlight를 포스트 프로세싱으로 구현해줬어.

이 부분이 생각보다 어려웠는데, URP 환경에서는 포스트 프로세싱을 구현해줄 때

결국 별도의 패스를 만들어서 Renderer Feature로 빼주는 게 가장 편하더라고.

구체적인 내용을 세팅하기에도 편하고, 순서를 정하기도 좋아서

결과적으로는 괜찮게 구현된 것 같아.

또, 나는 현재 Deffered Render Pipeline로 게임을 만들고 있어서

툰 쉐이더도 이에 맞춰서 만들어줄 필요가 있는데,

생각보다 어려웠던 점은 Unlit 쉐이더로 만든 객체를

위 파이프라인의 G-Buffer에 그릴 필요가 있더라고.

결과적으로는 G-Buffer에도 여타 다른 Lit 쉐이더 처럼 값들을 저장하게 하는데 성공했어.

이 G-Buffer에 저장된 값들을 사용해서 Outline이나 Edge Highlight를 만들었어.

결과적으로는 이런 느낌이 나는 모델을 만들 수 있었어.

결과적으로 이쁘게 나오는 건 확실히 원신 캐릭터 모델링과 텍스쳐가 크게 한 몫 하는 것 같아.

모아 놓고 보니까 단순히 게시글 하나로 설명하기에는 부족한 게 많아 보이네.

혹시나 궁금한 점 있으면 자유롭게 물어봐 줘!

알고 있는 선에서 답해줄게!

[해당 댓글은 삭제되었습니다.]

해당 댓글은 삭제되었습니다.

[Frustman(youhk40)]

헉 감사합니당! 개발 장학은 이제 끝났는데 유익했던 것 같아요! 네트워킹에도 괜찮고, 자잘한 지원도 많아서 다른 분들께도 추천드리고 싶네요

[익명(119.194)]

스마게 장학생이 되려면 이런걸 할 수 있어야하는구나 지원하지 않기를 잘했어 ㅋㅋㅋㅋㅋ

[에뚜(ssss4610)]

장학생의 품격 ㄷㄷ

[카퍠인(happys96)]

[oo(y826855)]

나무 모델은 어디서 구했음?

[Frustman(youhk40)]

직접 만들어서 쓰고있어 - dc App

[oo(y826855)]

원신에서 본거랑 똑같아서 물어봄ㅋㅋ 금손이시네요

[아이스말차라떼(icedmatchalatte)]

그래픽스 고수네여..

[고도희(godohee)]

와... 에셋스토어에 올리면 제가 사겠음