[W.I.P] [Tutorials]Understanding allegorithmic substance designer. PART-4

서브스턴스 디자이너 한국 개발자 그룹을 구독 하시려면.
http://subinkorea.blogspot.kr/

christian.kim@allegorithmic.com 로 메일신청.

안녕하세요.jp 입니다.

오늘은 3월달에 하기로 했던 substance designer 의 filter 와 custom shader 를 추가 하면서 간단한 mobile shading 을 해 볼 것입니다.

first step 으로 저는 Lookup texture based Rimlighting texture 를 만들어 볼겁니다.

이것은 포토샵에서 간단하게 만들 수도 있지만 좀 더 substance designer 의 filter 와 Dynamic texture 의 강력한 기능 그리고 매개변수를 노출 하면서 Unity 에서 어떻게 B2M 과 같이 사용 할 수 있는 것인가를 이해 하기 위해 다양한 방법으로 접근 해 볼 것입니다.

먼저 제작 목표가 될 Lookup texture based Rim lighting texture 입니다



위에서 보여지는 텍스처는 링크에서 보시는 것과 같은 Rim Lighting 의 Pre calculated lookup texture 로 사용 됩니다.

lookup texture 를 사용 하는 이유는 모바일 그래픽의 경우 Pow. function ( 거듭제곱 ) 을 자주 사용 하는 것은 섬세하지만 연산에 있어서 Cost 가 무척 높기 때문이죠.

참고로 sqrt 는 제곱근 입니다.사실 Pow function 의 내부를 들여다보면 꽤나 복잡한? 연산을 수행 하고 있습니다.

Pow function 에서의 옵티마이징에는 여러 방법이 있습니다.
Pow function 알고리즘을 직접 구현 할 때 int 타입으로 만들고 거듭제곱의 테이블을 미리 정의 하는 것이죠.
다만 우리가 사용하는 쉐이더 컴파일러에서 제공 하는 Pow function 은 none int 타입입니다.
보통 Specular exponent 등을 구현 할 때 사용 하죠. 이것은 여러 방법으로 최적화 할 수 있지만 대략 그런 것이 있구나 정도만 언급 하도록 하죠.

아무튼...

위와 같은 이미지를 얻어 내기 위해서 substance designer 의 어떤 기능을 활용 할 것인지...
그것이 중요 하겠죠.

하지만 여기서 가장 중요 한 부분은 SVG 가 아닙니다.

어떻게 하얀색 튜브를 만들어 낼 것이냐 이죠.

이제 라이브러리를 좀 살펴 볼께요.

흐음...

검색 하다 보니 맘에 드는 것이 나타 납니다.





바로 이것 입니다.


해당 필터에는 여러가지 옵션이 붙어 있습니다.


substance designer 의 개발자들이 이 필터를 그냥 만들진 않았을 것이라는 희망을 갖고 시작 하게 되었죠.





Splatter Circular 를 Graph 에 Drag 해서 하나 만들어 보면 Number 라는 파라메터가 있습니다.

기타 Radius 에 대한 옵션도 있죠.

포인트는 Number 에 있습니다.

시각적으로 크게 어색하지 않는 수 만큼을Type 입력 하면 위와 같이 Circle tube 가 만들어 집니다.

좋습니다.

이제 가운데 부분을 부드럽게 Blur 링 파라메터를 추가 하고 싶으실 겁니다.

그리고 이것은 Dynamic Texture 형태로 유지 되어야 하고요.

단순히 Bitmap 으로 뽑아서 사용 하려고 이렇게 어렵게 substance designer 를 사용 하는 것은 아닐겁니다. :)






SVG node 를 하나 만들고 Shape tool 을 사용 하여 그림처럼 Black circle 을 만들어 줍니다.


이건 뭐에 쓸까요?


네... 저는 첨에 만들었던 Splatter Circle 의 중심에 SVG 로 만든 노드를 Blending 할 생각 입니다.





Rim light texture 를 만들때 안쪽은 Blur 를 줘서 부드럽게 사라지는 느낌을 주기 위해서 Blur HQ 노드를 중간에 연결 했습니다.


그리고 이것을 Blending node 에서 알맞게 사용 할 수 있도록 Grayscale 로 바꾸어 줬죠.





중요한 포인트 인데...
SVG 를 바로 Blur HQ 노드로 연결 후 Blending 의 Foreground Layer 로 사용 하면 원하는 결과를 얻을 수 없습니다.


SVG 의 투명 속성에 대해서 Flatten Alpha 를 True 로 변경 해 줘야 하기 때문이죠.
이것은 Blending node 의 특성과도 관계가 있는 것이겠군요.



결과를 위해서 연결 된 Node 입니다.

Blend 노드의 확대 이미지 입니다.


Multiply 옵션을 사용 하여 Splatter circle 과 SVG 가 합성 된 것을 알 수 있을 겁니다.




위 그림은 이번 장에서 작성 한 Graph 를 Instance 화 하여 다른 Graph 에서 제활용 하는 구조입니다.
서브스턴스를 잘 활용 하려면 instance 에 대한 개념을 잘 알아 두는 것이 좋습니다.
다음 파트 에서는 Blur HQ 값 , 또는 Blending 값을 활용 하여 매개변수로 노출 시키고 Rim light texture 를 Instance 를 사용하고 변수노출을 하여 유니티 에서 Dynamic 하게 활용 해 보는 것을 살펴 보겠습니다.




Sample





Game Developer Leegoon copyright all right reserved since 2010.

Comments