11주차, 툰 쉐이더를 더 알아보자.

아직 끝난게 아니에요!

1. 저번 시간에 ...

 

NdotL을 응용해서 if문이나 ceil를 통해 명암을 나눌 수 있었다.

그리고 또 다른 방식이 존재한다! 바로 대인배 분들께서 제공해주신…

1-1. Warped Diffuse

(  http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.406.5643&rep=rep1&type=pdf  )

 

팀 포트리스의 제작자, 밸브의 논문에서 나온 Warped Diffuse이다.

뒤틀린(Warped) 디퓨르라니 … 잘 감이 오지 않는데다가, 상단의 링크로 들어가면 영어와 전문 단어들만이 가득하다.

 

도대체 뭘 썼길레 상단처럼 명암 단계가 나오는 것일까?

 

지금까지 UV를 따로 받아오고, 그 UV에 따라 텍스쳐가 그려졌었다.

UV는 0~1 사이 내(그 이상을 가질 수 있지만, 기본적인 텍스쳐 값을 따지자면)의 값을 가지고 있고, 각각 U와 V로 나눌 수도 있었다.

 

UV를 나타낼 때에도 float2의 값으로 불러왔다.

… 결국 float2라고 한다면, UV도 결국 다른 float2의 값으로도 가능하지 않을까?

 

 

우리가 지금까지 Custom 했던 빛도 결국 0~1 사이의 값이다.

어쩌면 UV를 대신할 수 있는 float2의 값이 될 수 있을지도 모른다!

 

우선 쉐이더 기본 Lambert 함수와… 특정 Texture를 준비해보자!

 

 

기존 Lambert 부분에서 노란 형광 부분들이 추가되었다.

_RampTex를 불러오는 것과 동시에 tex2D를 불러오는 과정에서 UV 안 X 좌표에 NdotL 값을 추가한 것이다. 

 

만약 이대로 불러오게 되면 하얀 오브젝트가 나오는데 _RampTex, 즉 Ramp Texture에 하단의 이미지를 넣으면…

 

 

좌측 상단의 경우 우측의 Texture를 넣기 전이다.

UV 안 X좌표에 NdotL을 넣었을 뿐인데 어떻게 이런 결과가 나왔을까?

 

현재 UV는 해당 값으로 연산되었다.

float4 ramp = tex2D(_RampTex, float2(NdotL, 0.5));

 

UV에서 U는 가로로, V는 세로로 연산 된다.

우측 상단의 텍스쳐의 경우 세로는 관여하지 않기 위해 0.5의 상수값을 넣었고,

가로의 색깔만 관여 되어서 나온 것이다. 더 자세히 설명하자면 …

NdotL은 결국 UV안에서 숫자를 불러오게 될 역할이 된 것이고,

 

각 숫자에 따라 UV가 전개되면서 Texture의 형태 그대로 중간 값 없이 뚝 떨어지게 나오게 된 것이다.

 

여기서 세로는 관여할 필요가 없으니 0.5로 임의로 설정한 것이다.

여기서 재밌는 것은 그럼 Y도 쓸 수 있지 않나요?! 란 발상이다.

NdotL의 값을 사용했으니, 동일한 값으로 NdotI을 쓰고 Y값에 넣어보자.

(대문자 I다! 마음대로 표기할 수 있지만 나는 셀프 고통을 선택했다.)

겸사겸사, Y값에 넣어둘 텍스쳐의 형태도 다르게 해보자.

 

 

의도적으로 경계선을 흐려 보았는데 완벽하게 흐리기보단

어느정도 경계선을 둔 채로 흐리게 만드는 것이 훨씬 툰 스럽고 좋았다.

하단에 Y값도 접근하면서 가벼운 림라이트와 2Pass같은 아웃라인을 갖게 되었다. 

아쉬운 점은 많지만 Texture 하나로 퉁칠 수 있는 아웃 라인은 정말 값싸다고 생각한다.

 

참고로 텍스처의 아웃라인 부분이 하얗게 지는 경우가 있는데 이 경우다.

 

2. 리플렉션(Reflection)도 알아보기

반사요? 갑자기요?

 

 

얼추 응용 단계에 접하게 되면서

메탈릭이나 상단의 그림과 같은 “주변 환경을 전부 담는 것”도 가능해졌다.

 

다만 우리가 보이는 모든 구역의 환경이 잡혀야 하기 때문에

2D Texture로는 구현하기 힘들 수 있기 때문에 우리는 Cubemap을 쓸것이다!

 

(  https://scalibq.wordpress.com/2013/06/23/cubemaps/  )

 

큐브맵(Cubemap) 은 환경에 대한 반사를 나타내는 여섯 개의 사각형 텍스처 모음이라고 보면 된다. 각 위, 아래, 좌, 우, 앞, 뒤를 맡아서 하나의 큰 큐브 내부에 넣는 것이다.

큐브맵을 Shader에서 가져오려면 tex2D와 같은 정해진 규칙이 있다.

 

Properties에서는 ... _CubeMap(“Cube Map”, cube ) =“” {} Subshader에서 불러올 때에는… SamplerCUBE _CubeMap surf 함수에서 불러올 때에는… Input에서 float3 worldRefl; surf 함수에서 o.Emission = texCUBE(_CubeMap, IN.worldRefl).rgb;

 

해당 사항을 유의하면서 쉐이더를 적용해보자! 

 

 

사쿠라 마냥 예쁜 Cubemap을 넣었더니 예뻐졌다. 여기다가 노말도 넣으면 예쁘겠지?

 

잉!

 

INTERNAL_DATA가 부족하다고 경고문과 함께 오류의 마젠타가 떴다.

2-1. INTERNAL DATA

(  https://docs.unity3d.com/kr/current/Manual/SL-SurfaceShaders.html  )

 

노말 맵의 경우 두 가지가 있다.

탄젠트 노말 맵 (Tangent Normal Map) 월드 스페이스 노말 맵 (Object Space Normal Map) 솔직히 잘 모르겠으니 http://wiki.polycount.com/wiki/Normal_Map_Technical_Details (영문)을 보자.

 

어떻게든 이해한 바로는. … 

파란 빛을 띠는 우리에게 익숙한 노말 맵은 탄젠트 노말맵으로 각 노말들이 Local 좌표를 향하고 있다.

그러나 우리가 상단에서 CubeMap을 사용할 때에는 worldRefl, 즉 월드 좌표계를 사용했으므로 노말도 탄젠트가 아닌 월드 스페이스 값으로 변환할 필요가 있다는 것이다!

 

어렵지 않다. Input에 INTERNAL_DATA와 함께 worldRefl값을 따로 넣어주면 된다. 

 

이제 다 추합해보자!

 

3. 모두 더해보기

3-1. 코튼 캔디 Warped Diffuse

 

 

장점 -  원하는대로 텍스쳐를 맘대로 바꾸어서 테스트 해볼 수 있음! -  단순한 텍스쳐 하나로 라인, 림라이트를 넣을 수 있고 스펙큘러 하나만 붙여도   꽤 보기 좋은 모습이 된다. 단점 - 영역을 나누는 부분이 애매하고 모델링에 따라 좌우될 수 있다. (영역 나누기는 내 맘대로 할 수 있긴 하지만 UV에 따라 큰 차이가 난다.) 아쉬운 점 atten을 빼고 shadow 설정도 뺐는데도 목 아래로 atten 같은 명암이 남는다. 그렇다고 Emission으로 뽑자니 노출이 심하다...

 

3-2. Reflection, Cubemap

 

이런 반사 재질을 넣을 수 있긴 하지만, 솔직히 야매긴 하다.

다음 주차에서는 이 반사 재질로 도대체 뭘 할 수 있을까?

 

바로바로...

 

 

다음 주차에는 물을 다뤄보기로 하자!