불러온 모델을 "툰 셰이더"로 조절해 보자

지금 글을 읽기 전 보고 오면 좋을 내용

MMD모델 유니티로불러오기

 

1. 툰 셰이더는 왜 사용하는가?

2.슬라이더를 이용한 간편(?)한 커스텀마이징 시스템 구축

 

1. 툰 셰이더와 사용 이유

툰 셰이더를 사용하는 첫 번째 이유는 작품의 기획과 그래픽 콘셉트 때문입니다.

게임의 그래픽 콘셉트를 설정할 때 반드시 현실적이고 사실적인 표현만을 선택할 필요는 없습니다. 만화나 셀 애니메이션과 같은 2D 스타일을 목표로 한다면, 일반적인 3D 셰이더만으로는 원화가 가진 시각적 특징을 충분히 표현하기 어렵습니다. 이때 3D 모델을 기획한 2D 그림체에 가깝게 표현하기 위해 툰 셰이더를 사용합니다.

두 번째 이유는 빛과 명암을 표현하는 방식에 있습니다.

 

일반적인 쉐이더와 툰쉐이더

유니티에서 사용하는 일반적인 3D 셰이더는 광원의 방향, 표면의 각도와 재질 등을 계산해 명암이 비교적 연속적으로 변하도록 표현합니다. 이러한 방식은 물체의 입체감과 재질을 사실적으로 보여주는 데 적합하지만, 셀 애니메이션 특유의 명확하게 분리된 색면을 표현하기에는 적합하지 않을 수 있습니다.

반면 툰 셰이더는 연속적인 명암을 일정한 기준에 따라 두세 단계로 나눕니다. 밝은 면과 어두운 면의 경계를 명확하게 만들고, 그림자의 색과 위치를 의도적으로 조절해 3D 모델을 셀 애니메이션의 한 장면처럼 보이게 합니다.

〈룩백〉의 장면에서도 인물의 피부, 머리카락과 의상은 사실적인 명암의 변화보다 선명하게 구분된 색면을 중심으로 표현됩니다. 작품 전체에는 회화적인 배경과 세부적인 색 변화도 사용되지만, 캐릭터의 형태를 전달하는 핵심적인 명암은 비교적 분명한 면으로 정리되어 있습니다. 이러한 표현은 캐릭터의 움직임과 감정을 빠르게 인식하게 하고, 선화와 실루엣을 더욱 돋보이게 합니다.

셀 애니메이션에서 제한된 수의 색과 명암을 사용한 것은 많은 프레임을 효율적으로 제작하기 위한 방법이기도 했습니다. 그러나 이러한 제작 방식은 오랜 시간 동안 반복되고 발전하면서 단순한 기술적 제약을 넘어 셀 애니메이션을 상징하는 하나의 시각적 문법으로 자리 잡았습니다.

오늘날에는 기술적으로 사실적인 명암을 표현할 수 있음에도 의도적으로 투 톤, 또는 많아도 쓰리 톤 정도로 명암을 제한합니다. 이는 그래픽 품질을 낮추기 위한 것이 아니라, 애니메이션 특유의 명확한 색면과 캐릭터성을 표현하기 위한 선택입니다.

툰 셰이더는 단순히 그림자를 두 단계로 나누는 기술에 그치지 않습니다. 캐릭터의 얼굴이 다양한 조명에서도 원화의 인상을 유지하도록 그림자를 보정하고, 머리카락과 의상의 명암 경계를 정리하며, 필요에 따라 외곽선이나 림라이트, 하이라이트도 함께 제어합니다.

이번 VR 프로젝트에서는 블루아카이브 쇼츠와 같은 콘텐츠를 VR 공간에서 구현하기 위해 툰 셰이더를 사용합니다.

목표는 캐릭터를 단순히 3D 공간에 배치하는 것이 아니라, 사용자가 여러 방향에서 바라보더라도 일본 셀 애니메이션풍의 인상과 색면이 유지되도록 만드는 것입니다.

결국 툰 셰이더를 사용하는 이유는 3D 모델을 무조건 평면적으로 만들기 위해서가 아닙니다.

작품이 목표로 하는 2D 그래픽의 규칙을 3D 공간에서도 유지하고, 물리적으로 정확한 빛보다 캐릭터의 디자인과 연출 의도를 우선하기 위해 사용하는 것입니다.

 

2. 슬라이더를 이용한 커스텀마이징 시스템 구축

출처: 아레스 공략카페

가장 쉽게 슬라이더 방식으로 캐릭터를 커스텀 마이징 할 수 있게 하는 것이 오늘의 목표입니다.

배경과 캐릭터를 불러왔습니다, 기본 모델링도 무척이나 훌륭하지만 이것만으로는 2D캐릭터의 매력도를 살리기 아쉽습니다

기본적으로 제공하는 2D 일러스트와 SD를 비교하면 가장 큰 차이점은 앞서 말했듯이 셀 그래픽의 큰 특징은

그라데이션 없는 투톤 및 쓰리톤 컬러링

이라 할 수 있습니다. 그렇다면 이걸 어떻게 구현해야 할까요?

이걸 구현하기위해 셰이더코드를 이용하는 것입니다.

셰이더는 여기서 중요한건 총 세가지 정도로 압축이 됩니다

1. 버텍스 와 행렬 (vertex & Matrix)
2. 프래그먼트(Fragment)

버텍스는 '점 덩어리'로 표현하곤 합니다. 그림에서 가장 기초는 점이고, 점이 모이면 선, 선이 모이면 면이 됩니다. 버텍스는 그 형태를 이루는 점들이 화면 어디에 찍힐지 계산하는 단계입니다. 3D 공간에 있는 물체를 2D 스크린에 투영해, 평면인 모니터가 입체처럼 보이게 만드는 것이죠. 그림에서 가장 먼저 요구되는 기술이 부피감과 입체감을 살리는 소묘인데, 버텍스는 그 입체를 수학적으로 계산해 화면에 얹는 단계입니다. 공간.

행렬은 유니티 기준 4×4를 씁니다. 여기 들어가는 숫자의 의미는 물체가 어디에 있고 어느 방향을 보고 있는가입니다. 모델이 놓인 위치와 회전, 그리고 카메라가 그것을 어떤 앵글로 2D 화면에 담을지를 계산합니다. 예를 들어 (0, 10, 0)에 PointLight가 있고 모델이 원점 (0, 0, 0)에 있으면 빛을 정수리로 받습니다. 이 모델이 (5, 0, 0)으로 이동하면 전구가 왼쪽 위에 놓이게 되므로, 왼쪽 면이 밝고 오른쪽 면이 그늘집니다. 이 위치를 결정하는 것이 행렬이고, 그 위치를 받아 실제 밝기를 계산하는 것은 프래그먼트입니다. 여기서 화면에서 어디서 찍힐지 정리 공간을 변한시켜 저리

프래그먼트가 툰 셰이더의 핵심입니다. 쉽게 말해 중간색을 제거하는 방식입니다. 그라데이션의 기본은 중간색 표현으로, A에서 B로 넘어가는 색 단계를 보여주는 상태인데 이것이 URP Lit입니다. 셀 셰이더는 이 중간 단계를 과감히 없앱니다. 빛을 받는 각도를 기준으로 2단계화해서, 받으면 A·안 받으면 B로 단순화한 것입니다.

1. 그래서 유니티에서는 어떻게 썼는가

앞까지가 원리입니다, 여기서부터는 이 프로젝트에서 실제로 어떻게 썼는지입니다.

셰이더 코드에 숫자를 박아 두면 값 하나 바꿀 때마다 저장하고 컴파일을 기다려야 합니다, 그런데 명암 경계를 어디에 둘지, 얼마나 날카롭게 할지는 계산으로 나오는 값이 아니라 캐릭터를 보면서 맞춰야 하는 값입니다, 보는 곳과 고치는 곳이 떨어져 있으면 맞출 수가 없습니다.

그래서 프래그먼트에서 쓰는 값을 전부 머티리얼 프로퍼티로 빼서 인스펙터 슬라이더로 올렸습니다.

• Shadow Threshold : 밝은 면과 어두운 면을 가르는 경계의 위치
• Shadow Feather : 그 경계를 얼마나 흐릴지
• Enable 3rd Tone / Deep Shadow Threshold : 어두운 면을 한 단계 더 쪼개 쓰리 톤으로
• Outline Width : 외곽선 굵기

처음은 Shadow Feather 0.35, 경계가 흐려서 명암이 연속적으로 변하는 상태입니다, 앞에서 말한 URP Lit의 그라데이션과 같습니다, 이 값을 0.01까지 좁히면 중간색이 사라지면서 색면이 둘로 갈라집니다, 중간색을 제거한다는 것이 화면에서는 이 움직임입니다.

경계 위치를 올리면 어두운 면이 넓어지고, 내리면 밝은 면이 넓어집니다

얼굴은 밝게 두고 옷은 그늘을 넉넉히 주는 식으로 부위마다 다르게 잡았으며 투 톤만으로 부족한 곳은 3톤을 켜서 어두운 면을 한 번 더 쪼갭니다.

2. 같은 방식을 표정에도

표정도 같은 문제였습니다. 얼굴은 블렌드셰이프(모프)로 움직이는데 이 모델에는 쓸 수 있는 모프가 46개 있고, MMD 표준 이름을 그대로 씁니다(笑い, 困る, ワ大 …). 표정 하나는 그 중 여럿의 조합이라, 활짝웃음을 만들려면 눈·눈썹·입을 동시에 건드려야 합니다, 어떤 조합이 좋은지는 역시 보면서 맞출 수밖에 없습니다.

그래서 셰이더에 한 것과 같은 방식을 얼굴에도 적용했습니다, 믹서 모드를 켜면 모프가 눈썹·눈·입 그룹으로 나뉘어 0~100 슬라이더로 나옵니다.

위 화면은 믹서를 전부 0으로 둔 빈 얼굴에서 시작해 눈썹의 にこり, 눈의 笑い, 입의 ワ大를 차례로 올린 것입니다. 슬라이더를 움직이면 얼굴이 곧바로 따라옵니다. 이렇게 맞춘 뒤 이 조합을 표정으로 저장을 누르면 새 프리셋이 되고, 반대로 저장해 둔 표정을 고르고 현재 표정 불러오기를 하면 그 값이 슬라이더로 올라와 손볼 수 있습니다.

이렇게 만들어 둔 표정이 지금 12개입니다. (기본, 미소, 활짝웃음, 무표정, 곤란, 놀람, 화남, 장난, 슬픔, 노려봄, 또 사고친 표정)

정리하면 셀 셰이딩이든 표정이든 방법은 같습니다, 보면서 맞춰야 하는 값은 코드에서 빼 슬라이더로 올리고, 맞춘 결과를 프리셋으로 저장합니다.

3. 같은 모델, 같은 텍스처, 다른 셰이더

마지막으로 차이를 봅니다. 아래는 같은 캐릭터를 같은 앵글에서 셰이더만 바꿔 찍은 것입니다. 모델도 텍스처도 씬의 조명도 그대로입니다.

왼쪽 URP Lit은 씬에 있는 빛을 그대로 받습니다. 이 거리는 건물 그늘이 지고 하늘빛이 푸르기 때문에, 피부와 머리카락이 전부 그 색으로 끌려가며 물리적으로는 맞는 결과입니다. 다만 원화의 인상은 남지 않습니다.

오른쪽 툰 셰이더는 그 빛을 따르지 않고 캐릭터 전용 광원을 따로 두고 환경광의 영향을 낮춰서, 캐릭터가 어디에 서 있든 얼굴이 일정하게 밝도록 했습니다. 거기에 명암을 두세 단계로 끊고 외곽선을 더한 것이 오른쪽입니다.

같은 데이터로 만든 두 그림입니다. 차이는 전부 프래그먼트에서 색을 어떻게 결정하느냐에서 나옵니다. 물리적으로 정확한 빛을 포기하고 캐릭터의 디자인을 택한 결과가 오른쪽이고, 이 프로젝트가 택한 쪽도 오른쪽입니다.

---

PS, 10월에 초고 썼다가, 11월에 마무리합니다 언제 마무리하나 했다가 지금 마무리해서 속이시원ㅎㅎ