12. 빛의 지배자, 셰이더

12. 빛의 지배자, 셰이더

---

  드디어 이 날이 오고야 말았다. 셰이더(Shader)...게임 엔진을 다루는 이에게 있어 셰이더는 게임 제작계의 엔드 컨텐츠라고 할 수 있는 것중에 하나이다.

  다만 오늘 다룰 것은 테크니컬 디자이너들이 대상이 아니기 때문에 VRChat에서 자주 다루는 설정만 살짝 다루도록 하겠다.

---

-빛 색상의 기본 이론

  혹시 독자 분들은 <빛의 삼원색>이라는 것을 본 적이 있는가?

  빛의 삼원색은 색의 삼원색과 달리 색을 합치면 합칠 수록 밝아지는 것이 특징이다. 컴퓨터의 모니터나 HMD에서 나오는 색들은 모두 빛의 삼원색에 근거한 색들이다.

 

  빛의 삼원색은 3가지 색을 근원으로 하는데 한 번쯤은 들어본 적이 있을 것이다.

  붉은색(R), 초록색(G), 파란색(B)를 말하는 것으로 합쳐서 RGB라 부른다.

  그림판의 색 지정 시스템이 빨강, 녹색, 파랑으로 되어있는 것도 그러한 이유이다.

 

  셰이더가 하는 일은 게임의 세계에서 일어난 일을 카메라, 즉 플레이어가 보는 시점에서 받아들여 해당 화면을 2D로 전환해 모티터나 HUD에 픽셀로 표현하는 일로 이를 처리하는 컴퓨터 부품은 다름아닌 GPU, 즉, 그래픽카드이다. 이제 게임을 하는데 어째서 그래픽카드의 성능이 중요한지 알게 되었을 것이라 생각한다.

 

  결론적으로 셰이더란 그래픽 카드를 제어하는 코드의 집합이다!

---

-UV 기본 이론

  독자 여러분이 흔히 아는 것처럼 컴퓨터에서 작동하는 모든 것은 숫자로 표현된다. 이것은 셰이더에서도 별반 다르지 않다.

  예를 들어 셰이더에서는 RGB를 각각 0 ~ 1의 숫자로 지정해 색을 표현한다. 만약 R이 1, G가 1이고 B가 0이면[(R, G, B) = (1, 1, 0)]이면 어떤 색이 만들어질까? 답은 간단하다.

  만들어지는 것은 당연히 선명한 노란색이다. 이처럼 색은 숫자로 표현이 가능하다!

  단순 색은 이처럼 계산이 간단하다. 그렇다면 이 연산을 2차원으로 해야한다면 어떻게 될까? 그 연산에 필요한 것이 바로 UV 이론이다.

Unity의 UV 좌표계

   UV가 무엇이냐 하면 쉽게 말하면 좌표다. 어떠한 텍스쳐 파일이 있다고 할 때, Unity는 텍스쳐 파일의 가장 왼쪽 아래를 (0, 0)좌표로 하고 가로를 U(또는 x)축, V(또는 y)축으로 해서 계산한다. 이게 다다.

 

  그렇다면 이 정보가 대체 어디에 쓰이는지가 중요한다.

Malty 아바타의 Hair 택스쳐

  다음과 같이 색이 있는 텍스쳐가 있다고 해보자. 게임엔진이 모델에 색을 입히는 방법은 아래와 같다.

1. 텍스쳐에서 R, G, B 채널을 받아와서 UV의 각 좌표에 각 색깔이 어느정도의 세기로 들어가는지를 0 ~ 1의 값, 즉, 검은색과 흰색으로 나타낸다.
2. UV의 각 좌표에 RGB의 세기 정보를 입력하고 각 색 채널에 맞춰 색을 입힌다.
3. 후에 색을 합치면 원래의 택스쳐 색이 나오게 된다.

  말로만 하면 무슨 말인지 알기 힘드니 이미지로 보도록 하자.

위 채널에 사용된 R 색상의 강도를 0 ~ 1로 표시한 이미지

  택스쳐에서 R채널만 빼와 보았다. 가장 밝은 곳이 1, 어두운 곳을 0이라고 했을때에 택스쳐에서 붉은 색은 이 만큼 쓰이고 있다는 것이다. 나머지 G, B채널에도 적용한 후에 각각 붉은색, 녹색, 푸른색으로 출력하면

  위와같은 결과가 나온다. 이를 모두 더하면

    이와 같은 이미지가 만들어지는 것이다. 이 이야기에서 핵심은 셰이더는 이미지를 색깔별로 분리할 수 있다는 것이며 색을 좌표로 만들 수 있다는 것이다.

 

  사실 UV에 대해서 설명하려면 UV가 정말 많은 것을 할 수 있다고 알려야만 하지만 그것은 셰이더를 정말 끝까지 다뤄보고 싶다고 생각하는 이들에게 필요한 것이고 본 강좌는 VRChat에서 필요한 만큼만 알려줄 것이다.

---

-Standard 셰이더 분석하기(셰이더에서 사용되는 기본 기능들)

  일단 Unity의 가장 기본 셰이더인 Standard 셰이더를 분석해보자.

---

Rendering Mode :

  모델을 어떻게 렌더링 할지 결정한다.

• Opaque : 불투명
• Cutout : 투명
• Fade : 서서히 사라짐
• Transparent : 투명

  이 네 가지 방식은 그래픽의 처리 방법에 차이가 있는데 오브젝트를 투명하게 해보면 그 차이를 확실하게 알 수 있다.

  네 가지 방식에는 분명한 차이가 존재하므로 투명한 오브젝트를 사용할 때에는 신중하게 골라야한다.

---

Albedo :

  Albedo(알베도)는 원래 과학 용어로는 반사율이란 뜻이지만 여기서는 일단 '색깔' 이라는 의미로 이해해도 된다.

  Albedo를 포함해 여러 항목에는 저렇게 네모 칸이 존재하는데 저 칸은 텍스쳐를 적용할 수 있는 칸이다.

---

Metallic & Smoothness :

  오브젝트의 금속성과 거칠기를 결정하는 항목이다.

오브젝트의 재질이 금속인것과 금속이 아닌 것의 Smoothness값에 따른 재질

  위의 사진 처럼 Smothness가 높을수록 표면이 매끄러워지며 Metallic이 높을 수록 주변환경을 더 잘 반사하게 된다.

---

Normal Map, Height Map :

  Normal Map(노말 맵), Height Map은 없는 굴곡을 있는 것처럼 보이게 하는 효과가 있다. 말 보다 증거라는 말이 있으니 직접 보도록 하자.

  필자는 구글링을 통해 위와 같은 노말 맵을 찾았다.

  Normal Map을 정상적으로 사용하기 위해서는 텍스쳐 에셋의 Texture Type을 Normal map으로 전환할 필요가 있다.

  후에 이렇게 메트리얼에 적용하면 다음과 같이 일반 구 오브젝트에도 위와 같이 굴곡이 있는 것 같은 표현을 할 수 있다.

 

  Height Map은 노말 맵과 같은 기능을 하지만 노말 맵과 달리 흰색과 검은색으로 된 텍스쳐일 뿐이다.

---

Occlusion(차폐) :

  Occlusion 설정을 이용하기 위해서는 Occlusion이 무엇인지 먼저 이해해야한다.

  간단히 얘기해서 Occlusion은 주변 사물에 의해 환경광, 직접광 등의 빛이 완전히 차폐되는 곳을 의미한다.

  Unity에서는 주변의 반사에 의해 원래대로라면 Occulsion이 생겨야하는 곳에 빛이 들어와 빛춰지는 상황이 많이 생긴다. 그럴때 쓰는 것이 Occlusion 기능이다.

  Occlusion맵도 흰색과 검은색으로 이루어진 택스쳐이다.

---

Detail Mask :

  메트리얼의 항목중 Secondary Maps에 해당하는 항목을 어느 부위에 적용할 지 설정할 수 있는 텍스쳐이다.

---

Emission : 

  뜻 그대로 오브젝트가 설정한 색으로 발광하게 한다. 텍스쳐를 통해 특정 부분만 빛나게 하는 것도 가능하다.

---

Tilling & Offset :

  쉽게 말해서 Tilling(타일링)은 텍스쳐의 복제이고 Offset(오프셋)은 이동이다. 위에서 UV란 좌표라고 했던 것을 기억하는가? Tilling 과 Offset은 그것을 생각하면 좀 더 수월하게 이해하는 것이 가능할 것이다.

---

Secondary Maps :

  오브젝트에 디테일을 더하기 위한 설정이다. 보통 특정 부위에만 적용할 텍스쳐를 위해 쓰인다.

---

  Specular Highlights 설정에 대해서도 차이를 확인하기 위해서는 Specular가 무엇인지 알 필요가 있다.

  Specular란 쉽게 말해 빛에 의해 생기는 하이라이트이다.

  한쪽에는 하이라이트가 보이고 한쪽에는 하이라이트가 보이지 않는 것이 보이는가? 이것이 Specular이다.

  Reflection은 언뜻 보기에는 큰 차이가 없어보일 수 있다. 그러나 오브젝트가 발하는 반사광이 있느냐 없느냐는 상당히 큰 효과를 가져올 수 있으므로 주의하도록 하자.

---

  이것으로 Standard 셰이더에서 사용하는 설정은 모두 설명했다.

 

  사실 VRChat에서는 Standard 셰이더를 잘 사용하지 않는다. 이미 Standard 셰이더 보다 더 이쁜 연출이 가능한 오픈 소스 셰이더가 있기 때문이다. 그러나 Standard 셰이더에서 사용되고 있는 저 기능들과 개념은 그 어떤 셰이더를 쓰더라도 통용되는 개념이기 때문에 알아두면 셰이더를 더 세밀하게 조절할 수 있다.

---

-VRChat에서 자주 사용되는 오픈소스 셰이더(lilToon, UnitychanToon, PoiyomiToon)

  VRChat에서 사용되는 셰이더는 보통 Standard 셰이더가 아닌 오픈소스 셰이더를 사용한다.

1. lilToon Shader
2. UnitychanToon Shader
3. PoiyomiToon Shader

  이 세가지 셰이더가 가장 많이 사용되고 있는 오픈소스 셰이더이다. 본 강좌에서는 이 세 셰이더의 다운로드 방법과 특징에 대해서만 간략히 소개한다. 오픈소스 셰이더에는 Standard 셰이더에서 쓸 수 없는 기능이 잔뜩 준비되어 있지만 그 기능들까지 모두 다루려면 셰이더의 이론을 정확하게 배울 필요가 있기에 본 강좌에서는 간략히만 소개한다.

---

lilToon Shader :

https://booth.pm/ko/items/3087170

【無料】lilToon - lilLab - BOOTH

  lilToon 셰이더는 위 링크에서 쉽게 다운로드 받을 수 있다.

  liltoon 셰이더의 가장 큰 특징이라고 하면 역시 UI를 빼놓을 수 없다. 셰이더로 할 수 있는 대부분의 것들이 간편한 UI로 조절할 수 있게 되어 있으며 한국어도 지원한다. 또한 각 기능들을 On / Off 하는 것으로 조절할 수도 있다.

  또 liltoon 셰이더의 특징 중 하나는 전체적으로 밝은 느낌으로 오브젝트를 표현할 수 있는 점이 손에 꼽힌다

---

UnitychanToon Shader :

https://github.com/unity3d-jp/UnityChanToonShaderVer2_Project/tree/release/legacy/2.0

GitHub - unity3d-jp/UnityChanToonShaderVer2_Project: UnityChanToonShaderVer2 Project / v.2.0.9 Release

  UnitychanToon 셰이더는 GitHub를 통해 받을 수 있다.

  UnitychatToon 셰이더를 딱 보고 알 수 있는 점은 일단 보기 힘들다는 것이다. 익숙해지면 괜찮겠지만 직관성이 떨어지는 부분도 없잖아 보이는 곳이 보인다. 무엇보다 lilToon 셰이더의 경우가 특이하게 UI가 잘 정리되어 있던 것이었지 대부분은 이런 느낌의 UI를 가지고 있다.

  UnitychanToon 셰이더의 경우 lilToon 셰이와는 또 다른 느낌의 메트리얼을 만들 수 있기 때문에 쓰기도 한다.

  또한 쓰고 싶은 기믹에 맞춰 다수의 셰이더를 보유하고 있는 것도 UnityChanToon 셰이더의 특징이다.

---

PoiyomiToon Shader :

https://github.com/poiyomi/PoiyomiToonShader

GitHub - poiyomi/PoiyomiToonShader: A feature rich toon shader for unity and VR Chat

  PoiyomiToon 셰이더 역시 GitHub를 통해 다운로드 할 수 있다.

  PoiyomiToon 셰이더는 그래도 UI가 잘 정리되어 있는 편이며 PoiyomiToon의 특징중 하나로는 포스트 프로세싱과 관련된 설정을 할 수 있다는 것이다. 무엇보다 다양한 이펙트를 추가할 수 있어서 이펙트를 주로 사용하는 사용자들은 자주 사용하는 셰이더이기도 하다.

---

  셰이더의 가장 큰 기능은 화려한 이펙트도, 깔끔한 UI도 아니다. 바로 사용자 마음대로 조절할 수 있는 라이팅 방식인데 때문에 셰이더의 기능들이 다들 비슷하다고 하더라도 출력물이 조금씩 다른 경우가 많다. 따라서 자신이 사용할 아바타로 어떤 느낌을 주고 싶은지에 따라 셰이더는 신중하게 선택해야 한다.

---

-Post Processing(후처리 프로세스)

  위에서 PoiyomiToon 셰이더를 설명할 때에 잠깐 쓰치듯이 넘어간 말이 있다. 바로 Post Processing(포스트 프로세싱)(후처리 프로세스)라는 것이다.

 

  쉽게 말하면 포스트 프로세싱이란 셰이더로 작업된 오브젝트에 좀 더 효과를 추가하는 것이다.

  이런식으로 반짝반짝 빛나거나 모자이크 효과가 있거나 하는 것들은 모두 포스트 프로세싱에 해당하는 기믹들이다.

VRChat의 SuRroom 월드

  포스트 프로세싱 과정 자체는 아바타 개체에는 적용할 수 없다. 포스트 프로세싱을 지원하는 것은 온전히 월드 제작자의 역량이다. 가끔 월드를 돌아다니다보면 이렇게 포스트 프로세싱을 지원하는 월드들을 심심치 않게 볼 수 있다. 포스트 프로세싱 기믹이 들어있는 아바타는 지원하는 월드에서만 포스트 프로세싱 효과가 드러나므로 주의가 필요하다.

---

  사실 셰이더의 경우 파고들면 정말 무한히 파고들 수 있는 기믹이기 때문에 필자는 셰이더의 모든 것을 설명해 줄 수는 없다. 그러나 본 강좌의 글을 이해했다면 어느정도는 셰이더를 활용할 수 있을 것이다.

  오픈소스 셰이더의 자세한 기믹들에 대해서는 시간이 있다면 따로 다루도록 하겠다.