[Unity][Shader][UTS][URP] 원신 모델링을 사용한 유니티 툰쉐이더 실습

 
 

안녕하세요? 호아임입니다.🍪🐭

 
오늘을 원신 모델링을 통해 UTS( 유니티 툰 쉐이더) 실습을 해보려고 한다.
원신 모델링 불러오기.... 정말 쉽지 않았다.. 
 
Read me 파일도 ,, Texture 파일도 모두 중국어로 되어있어서 파파고 돌려가며 열심히 Meterial을 만들어줬다.

우쒸

 
PMX 파일 -> 블랜더 -> Fbx파일 -> 유니티로 오기까지의 과정은 꽤 길어서 다른 글 링크를 통해 보고오는 것이 좋겠다.

 
 
👇원신 모델링  -> 블랜더

[원신][Blender] 블랜더로 원신 모델링 가져오기

👇원신 모델링: 블랜더 -> 유니티

[원신][Unity][Blender] 원신 모델링을 블랜더에서 유니티로 가져오기

 
 

---

 
사실을 원래 유니티 짱을 들고와서 실습을 해볼까 했지만 
유니티짱은 내 서타일도 아니고... 전혀 흥미가 안생기는 이슈가 있었다.
 
그래서 열심히 찾아본 결과 원신 모델링을 겟 할 수 있었다.
 
먼저 내 다이루크를 들고왔다. 다른 멤버도 차차 사용해줄 예정이다.
오늘도 근엄 핸섬한 다이루크씨의 모습.

다이루크씨의 모델링 원본

우리는 이곳에 툰 쉐이더를 적용시켜줄 예정이다.
 
👇툰쉐이더의 핵심 요소는 아래와 같다.
 
    1. 아웃라인 생성
    2. 명암의 경계선이 선명함
 

---

 

1️⃣쉐이더 Unlit 변경

 
우리는 이곳에 툰 쉐이더를 적용시켜줄 예정이다.

좌 : Standard Shader / 우 : Unlit Shader

 
아래는 Unlit Shader를 모두 적용시킨 모습이다.

왜.... 왜 잘생겼냐고.. 이 영앤리치앤핸섬앤큐티앤....어쩌구 맨...

우리는 작업할 때 내가 각 메테리얼 당 어떤 쉐이더를 적용했는지 잊지 말지어다.
 
 

---

 

 

2️⃣Outline Unllit Shader Graph 구현

 
첫번째로 우리는 만화 하면 바로 떠올릴 [선따기]를 구현해 줄것이다.
 
아웃라인 생성의 기본 적인 원리는 아래와 같다.

[출처 : 도서] Unity Shader Startup

기존의 모델링 폴리곤을 거꾸로 뒤집어서 스케일을 키우면 되는 거다.
우리는 이 뒤집어진 면을 아웃라인으로 인식하게 되는 거다.
 
이때 중요한 것은
1. 뒤집힌 면이 앞에 있을때는 보이지 않게 하기
2. 그냥 Scale이 커지는 것이 아니라 노말 벡터가 확장되어야 한다.
 

[출처] 호아임의 과제;; ㅎㄷㄷ

3D 모델링 좀 깔짝거려봤다 하는 사람들이라면 이런장면 사실 본 적 있을것이다.
가끔가다가 와이어프레임으로만 모델링을 하고있었는데 알고보니 뒤집힌 면이었던 적.... 있는가..?
이럴땐 싹싹 빌면서 X-form 눌러야하는데
 
유니티에서는 이러한 현상을 활용해 Outline으로 활용하는 것 같다.
 

---

 
이제 직접 구현해볼 시간이다.
나는 이것을 URP를 통해 손쉽게 제작할 수 있었다.

Unlit Shader Graph 생성

 
URP는 다음과 같이 구현했다.

프로퍼티를 만들고 싶다면 좌상단의 '+' 버튼을 누르면 원하는 자료형에 따라 생성할 수 있다.

별거는 없고 설명해보자면
기존 오브젝트의 포지션에 노말벡터를 Thickness를 통해 오브젝트를 확장시켜 더해준다.
프래그먼트를 통해 외곽선으로 사용할 노말의 BaseColor를 설정시켜주면 된다.

여기서 포인트는 Space를 모두 Object Space로 맞춰주어야 한다는 것이다.
연산 공간 기준을 동일하게 맞춰주어야 적절한 연산이 일어날 수 있다.

그런데 우리는 위와같은 파이프라인을 보며 의문점이 생길 수 있다.
분명 노말을 뒤집어준다고 했는데 위 파이프라인에서는 그저 노말벡터를 확장해 추가해주는 내용밖에 없다.
 
우리가 알고있는 면 뒤집기는 사실 3D MAX에서 볼 수 있는 내용으로 유니티 내에서늬 '면을 뒤집는 행위' 는
'노멀을 뒤집지 않고 앞면을 날리고 뒷면만 그리는 행위'라고 볼 수 있다.
 
따라서 아래와 같은 노드를 추가해준다.

OutLine 전체 모습

isFront노드로 앞면인지 확인 한뒤, 앞면이면 비가시 / 뒷면이면 보이도록 설정해주어 '면을 뒤집는다'는 조건을 수행시키고
추가적으로는 Color 프로퍼티를 추가한 뒤 아웃라인 색상을 지정해주었다.

 

파이프라인 구현이 완료되었다면 메테리얼을 새로 만들어 해당 쉐이더가 적용되도록 드래그앤 드랍 해넣는다.
그 후 해당 캐릭터의 메테리얼에 적용해 넣는것도잊지말기
 
 
 
완성된 모습이다.

 사실 이것은 하나의 오브젝트를 겹쳐서 그려준 것이기때문에 두께를 너무 넓게 설정하면 메쉬가 겹쳐보일 수 있으니 주의하자
또한 오브젝트를 두번 그리는 것이기때문에 계산량이 두배로 늘어나 연산이 무거워질 수 있다.

Plane으로 끝난 오브젝트는 아웃라인이 생기지 않는다는 점도 알고있으면 좋을 것 같다.


사실 이렇게 적용을 하게되면 하나의 오브젝트마다 해당 메테리얼을 적용시켜주고 얼굴을 확대해서 봤을 때
아웃라인이 같이 확대되어 Storke의 두께감이 더 두껍게 느껴지는 이슈가 발생하는데 이러한 디테일은
향후에 다른 게시글로 다뤄볼 예정이다.


 

---

3️⃣ Diffuse Wrap Shader Graph 구현

 
두번째 특징인 만화의 경계선있는 면을 재현해볼 것이다.
 
🍪여기서 중요한 포인트는 
 
1. 조명벡터값을 받아올 것 
2. 노멀벡터를 잘게 쪼개 줄 것
3. 툰 느낌을 낼 텍스쳐와 베이스 텍스쳐를 가져와 잘 섞일 수 있도록 할 것
 
등등이 있다.
 
이 기법의 핵심 구현 기법은 빛 계산 기법으로 쓰는 공식인 노멀과 벡터의 내적을 UV로 이용한다는 것이다.

구현에 앞서 우리는 UV좌표의 개념을 알 필요가 있다.
UV좌표는 텍스처의 위치좌표를 알려주는데 우리는 이것을 이용해서 캐릭터의 명암을 경계선이 만들어지도록 할 수 있다.

우측 이미지의 선명한 경계선이 툰쉐이더의 명확한 경계선과 같은 효과를 준다.

 

여기서 우리는 아웃라인과는 다른 Space로 맞춰줘야하는데
캐릭터의 명암을 결정짓는 Directional Light가 이미 World에 있기 때문에 우리도 World를 기준으로 연산할 수 있도록 해줘야 한다.

 Dot Product 제공하는 범위는 -1 ~ 1 사이의 값이지만 우리는 UV값으로 사용할  0~1 사이의 값이 필요하기 때문에
( -1 ~ +1 사이의 값 ) * 0.5 +0.5 = ( 0 ~ +1 사이의 값 ) 이 되는 것을 이용해 파이프를 연결해줍니다.

이렇게 가져온 벡터값을 ToonRamp맵의 UV값으로 넣어주고, BaseMap(기존 캐릭터의 텍스쳐)를 가져와 두 텍스쳐를 Multiply룰 통해 섞어준 뒤
BaseColor 프레그먼트 값으로 전달한다.

 
 

Toon Ramp 파이프라인 완성된 모습

복잡해보이지만 원리와 순서를 생각해보면 당연하면서도 생각보다 단순하다.

이제 다이루크의 모든 메테리얼에 ToonRamp 쉐이더를 적용시킨다.
 
 
완성된 모습은 아래와 같다. 👇

그러나 우리는 Directional Light를 아무리 움직여봐도 툰램프가 움직이지 않는 모습을 확인할 수 있다.
뭐가 문젤까? 바로 기존 쉐이더 파이프라인에서 LightDir값을 프로퍼티로 놓았기 때문이다. ( 대충 Const라는 뜻 )
 
우리는 이 문제를 해결하려면 직접 쉐이더 코드를 짜서 Light Dir 의 로테이션 값을 받아와야 한다.
 

나는 C#스크립트를 생성하고 Update함수를 통해 Directional Light의 트랜스폼값을 실시간으로 받아올 수 있도록 했다.
참고로 게임씬이 아니라 뷰포인트로도 라이트에 따른 툰램프 변화를 확인 할 수 있도록 코드를 짜는것이 포인트인것 같다.
 

 
 
그리고 마참내! 적용된 모습👇

Directional Light의 Rotation값에 따라 경계선이 계속해서 변하는 것을 확인할 수 있다.

 
 

---

 
오늘은 툰쉐이더 실습을 해봤다.
 
이와 같이 사실적이지 않은 렌더링 방식을 NPR( Non - Photo Realistic )렌더링이라고 한단다.
오늘은 npr의 대표적인 특징을 구현해봤다.
이러한 셀 쉐이딩의 정도는 없고 오늘 배워본 기본을 응용해 더 예쁜 쉐이딩을 만드는 것이 아티스트의 과업이 아닌가 싶다.

원신을 플레이하면서 많이 놀라긴 했지만 오늘 실습을 하면서는 놀라움을 넘어 경이로울 지경이다.
작업을 하다보니 환경 셋팅이나 시네마틱 카메라, 캐릭터에 Emission주기 등등 욕심이 자꾸 생긴다.
 
작업이 끝나고는 툰 텍스쳐를 포토샵으로 수정해 색감을 바꿔보는 시간도 가졌다.

툰 텍스쳐를 차례대로적용시켜본 결과

텍스쳐의 색상만 변환시켰음에도 다양한 분위기로 연출되는 것이 신기하다.
 
더 아름다운 쉐이더를 위한 정답은 없는 것 같다.