Unity3d Strumpy Shader Editor

1. 들어가는글

    일전에 이미 간단한 사용법을 올렸더랬는데요. 너무 간단하게 생각한것 같습니다.
    언리얼의 노드 구조를 많이 차용하여 만들어진 쉐이더 에디터입니다. 쉐이더인 만큼 프로그래밍적인 용어가 간혹 출몰 합니다.
혹, 생소한 용어들은 인터넷을 헤엄치면 건져올릴 수 있으니 참고하시기 바라고 저도 새로운 용어에 대해서는 간단한 설명을 추가하도록 노력하겠습니다. 

Unity 포럼에서는 이 에디터 자체를 SSE 로 줄여서 말하는 경향이 있습니다. Surface Shader 등의 줄임말과 혼동하시면 아니아니 아니되오.

 

---

2. SSE의 UI

   생소한 UI 입니다. 메인 메뉴가 오른쪽 하단에 붙어 있고요. 전체 화면 보시겠습니다.

려 있지 않다면 메인메뉴에서 Preview를 클릭하여 열어주면 다음과 같은 팝업 창이 뜰겁니다. 작업 유무에 따라서 모양은 다를 수 있어요.

이렇게 되면 기본 세팅이 되어 있는 상태? ... 원래는 그냥 열기만 하면 이렇게 떠야 됩니다.

오른쪽 하단의 File 에서 New를 선택하면 기존의 node들은 없어지고 Master node만 남게 되며 이 Master node의 각각의 node들에 여러 다른 node들을 연결함으로써 새로운 쉐이더를 만들 수 있습니다.

 

마스터 노드에 대해서 Unreal 엔진의 Material Editor와 비교 해보면 언리얼에 비해서 Master node가 많이 빈약합니다. 그 이유는 SSE는 Shader 에디터 이고 언리얼은 Material 에디터 이기 때문입니다. SSE는 원초적인 것만 들어가 있는 것이고 Unreal은 Material 제작에 필요한 부분은 미리 세팅 되어 있습니다. 그렇기 때문에 SSE 에서는 투명도설정이나 마스크 설정등도 여러 세팅을 만져 줘야 가능합니다. 이 부분은 쉐이더 제작 하면서 보시면 더 이해가 빠르시겠네요.

---

3. Unity  기본 제공 Shader

    쉐이더를 만들기 전에 유니티에서 제공하는 쉐이더를 간단히 살펴보겠습니다. 좀더 자세한 내용은 다음의 링크를 따라 가세요.

다음

    Unity는 쉐이더를 크게 6개의 그룹으로 나누었습니다. 라고 나오는데요. 레퍼런스 번역의 잘못인지...5개의 그룹입니다.

    1. Normal Family                            : 불투명 질감

    2. Transparent Family                     : 반투명

    3. Transparent Cutout Family          :  투명 or 불투명

    4. Sellf-illumination Family              : 자체발광

    5. Reflective Familly                       : 큐브맵을 반사하는 불투명

이렇게 제공된 쉐이더로 표현이 불가능하거나 표현 대비하여 너무 무거운 경우 쉐이더를 자체 제작하게 되겠습니다.

4. Node 추가하는 방법

이상한 UI를 가지고 있는 만큼 node를 추가하는 방법도 특이합니다. 오른쪽 클릭으로 나오는 메뉴에서 특정 node를 추가하는 것으로 끝나는 것이 아니라 node 값에 대한 정의를 내려줘야 합니다. 그렇지 않으면 "붉은 영역" 이 생기는데 이 놈들은 빨갱이 이므로 모두 찾아서 없애 줘야 합니다.  Input은 입력값이라고 생각하시면 되는데 쉐이더 작성후 Material에 적용시 개발자가 조정할수 있는 영역입니다. 

샘플 이미지!

잘 보셨죠? 다시 SSE로 돌아와서 Input 에 대해서 살펴 봅니다.

 제가 설명 드릴수 있는 부분은

Color Property - 컬러 값을 정의

Range Property - 특정 영역의 실수 값을 정의 (예) "0~50 "

Texture 2D Property - 텍스쳐를 사용해야할 경우

정도가 되겠습니다.

이렇게 Input 값에 대한 정의를 해 줍니다.

그런데, 이렇게 설정한다고 빨갱이들이 다 사라지지 않습니다. Node 창에는 여전히 빨갱이들이 남아 있습니다. 
이 Node를 선택하고 다음 그림과 같은 순서로 작업해 주시면 완료.

이렇게 하면 기본 조작법은 익히는 셈입니다. 
다음으로는 Shader의 제작을 들어가 보겠습니다.

게임에서 Object가 Dissolve 되면서 사라지는 쉐이더를 만들어 보겠습니다.

---

5. Dissolve Shader(Material) #1

Material 이라고도 적은 이유는 이런 경우는 경계가 모호하다고 할까요? 
언리얼 엔진에서는 그냥 Material 단으로 처리를 하니깐...




 준비물로 이번에는 스틸캣을 활용하였으며 Dissolve 이미지는 배경 이미지 하나 가져 와서 포토샵에서 뚝딱뚝딱

해서 위와 같은 이미지를 쓸 예정입니다.
그럼, SSE 로 가 봅니다.

Clear 한 상태에서 만들기 위해 File  메뉴에서 New를 선택하여 새 Shader를 만들어 Master Node 만 나타나게 하고
다음과 같은 Node 구조를 만들어 봅니다.

Diffuse : 스틸캣의 재질 채널

Clip      : Opacity 처리를 하여 Dissolve 효과를 주기 위한 채널

Master 에 보시면 Alpha 라고 Opacity를 위한 채널이 존재합니다. 게임에서는 투명처리를 크게 두가지로 나누어 한다고 생각하시면 접근이 용이할것 같습니다. 

    1.  반투명

    2. 완전투명 (투명하거나 투명하지 않거나

1. 반투명 : 인터넷을 돌아다니며 얻은 정보로는 아직까지 게임상에서 반투명을 완전무결하게 처리하는 방법은 없는 것으로 알려져 있고  Unity 또한 그 범주를 벗어나지 못합니다. 그리고 처리과정도 복잡해서 게임을 무겁게 하기도 하고요. SSE 에서 Alpha 단은 이 반투명 처리를 위한 부분입니다.
2. 완전투명 : 이미지의 특정 픽셀 값이 0.0를 기준으로 높으면 불투명 낮으면 투명으로 처리. Unity 에서는 Clip

Dissolve는 완전투명으로 구현하기 때문에 Clip을 씁니다.

Tex2D-Sampler2D : 이미지를 텍스쳐로 쓰겠다
Range                  : 지정한 두개의 값 사이의 값을 슬라이더로 조정, 여기서는 0 부터 1 사이의 값
Subtract                :  1번 값에서 2번 값을 빼는 연산

그래픽 디자이너는 주로 칼라 값에 대해서 0~255 값을 쓰지만 게임에서는 0~1 값을 쓰게 된다.
따라서 Tex2D-Sampler2D 를 통해서 이미지 각 픽셀들의 고유값들이 0~255 에서 0~1 값으로 변환된다고 생각하면 된다.(정말? 믿거나 말거나)
이렇게 변환된 값과 사용자가 지정하는 Range 값을 빼는 연산을 하여 Clip 에다가 집어 넣는 것이 이 Node에 대한 설명이다.
Range 값에 대한 Subtract 결과 값을 대충 나타낸다면 다음과 같다.

Range 값	Clip에 들어가는 이미지
0	원본
0.33	1/3 정도 어두운 부분은 완전 검게
0.66	2/3 정도 어두운 부분은 완전 검게
1	완점 검게

따라서 Range 값을 0 에서 1로 이동시키면 점차 Opacity 영역이 넓어지다가 결국에는 전부 투명한 캐릭터가 되는 것이다.

6. Dissolve Shader #2

위에서 설명드린 Dissolve의 다음 스텝입니다.
이번에는 Dissolve 로 사라지는 효과를 가지면서 특정 색상을 발현 하는 Shader를 제작해 보겠습니다.

Node를 살펴 보시죠. 

초록색으로 지정된 부분은 #1 의 Node와 동일합니다. Clip 에 쓰이는 Texture와 Range를 동일하게 사용하여 #1 에서와 마찮가지로 Range 단의 컨트롤만 제어해 주면 됩니다.

Node를 이해하기 위해서 크게 나눠 봅니다.

1. Dissolve용 이미지를 Emission 에 사용하기 위한 과정입니다.
2. 1번에서 만든 이미지에 칼라 값을 줍니다.

Multiply 는 1번 값과 2번 값을 곱하는 연산을 합니다. 위와 같이 이미지에 칼라 값을 곱하게 되면 곱한 칼라 만 가지게 됩니다.
따라서 1번 과정으로 만든 이미지에 2번 칼라를 입혔다고 생각하시면 됩니다.

2번은 쉽져잉?

1번 과정을 보겠습니다. 가운데 부근에 Invert 가 있네요. A 라고 하겠습니다. 나머지는 B

일 반적으로 투명도에 대해서 얘기를 할때 어두우면 투명 밝으면 불투명이라고 하지요. Clip 용으로 만든 이미지를 Emission 에서 그대로 쓰기 위해서는 Invert를 시켜서 이미지를 반전 시킵니다. 흰색은 검은색으로 검은색으로 흰색으로. 이렇게 하면 Clip 으로 인해서 투명해 지는 부분이 바로 Emission 으로 발광하게 됩니다. 만약에 반전을 시키지 않았다면, 투명해지는 부분은 발광하지 않고 투명하지 않은 부분만 발광을 하겠죠.
 
이 Invert 연산으로 투명해지는 순차적으로 발광도 따라 가는 것을 구현해 낼 수 있습니다만...
투명한데 발광을 하겠어요?
한다라고  하시면 그건 Clip 을 잘못 이해하고 있는 겁니다. Clip은 완전 투명 or 완전 불투명이니까요.

그래서 Emission에 적용하기 위해서는 Clip에 적용될 이미지 값보다 약간 먼저 진행되는 연산이 필요합니다.

그래서 Range 값에 무조건 0.05를 더해줘서 0.05 만큼 빠르게 진행이 되게 합니다.
위의 그림에서  가. 와 나. 의 Add 값이 새로운 Range가 되었다라고 생각하면 되겠습니다.

이제 Floor 라는 연산만 남았습니다.

Floor 연산은 수학시간에 배웠었던 "내림" 의 개념과 비슷합니다.
어떤 실수 값을 받으면 그 실수값에서 소숫점 밑의 값은 모두 날려 버립니다.

10.1 Floor = 10.0

10.9 Floor = 10.0

이렇게 됩니다.
왜 ??? 이 연산을 썼나!
하다보니 이렇게 됐어요. (ㅜ,.ㅜ)

Emission에 대해서 생각해 봅시다.
Emission은 color 값이나 이미지 값을 받아서 조금이라도 밝은 부분은 그 값에 따라 발광해 줍니다.
그런데 우리가 지금까지 만든 값들은

Range : 0.00 ~ 1.00

Emission에 적용될 수정된 Range : 0.05 ~ 1.05

Texture : Dissolve Image source의 Invert Image

입니다.

이대로 Emission에 적용한다면... 저기 위의 괴상망칙한 모둠골뱅이같은 이미지가 반전된 형태로 캐릭터 전체가 발광하게됩니다.
따라서 이 새로운 Range 값과 이미지값을 더해서 Floor 연산을 통해 필요 없는 값을 날려 버리면 필요한 부분(투명이 진행되는 가장자리)에 Emission이 적용이 됩니다.

자~ 다시 테이블을 볼까요.

Range 값	수정된 Range	Floor 적용된 이미지
0.00	0.05	픽셀값이 0.95 이상인 부분만 1의 값을 가짐(아주 밝은 부분은 흰색으로)
0.33	0.38	픽셀값이 0.62 이상인 부분만 1의 값을 가짐(약 2/3 밝은 부분은 흰색으로)
0.66	0.69	픽셀값이 0.31 이상인 부분만 1의 값을 가짐(약 1/3 밝은 부분은 흰색으로)
0.95	1.0	픽셀값이 0.00 이상인 부분만 1의 값을 가짐(전부 흰색으로)

이렇게 해서  Clip 효과가 나타나기 0.05 전에 Emission 효과가 나타나는 쉐이더가 만들어집니다.

긴 내용 읽어 주셔서 감사합니다.