[마지막회]ShaderFX를 이용한, 그래픽 디자이너를 위한 기초 쉐이더 강좌 19강

자아 오늘은 그럼 진짜 마지막회로, 외곽선을 구현해 보겠습니다.

사실 외곽선 구현은 shader로 해야 하는데, shaderFX로 구현해 보려고 해 봤더니
기능이 부족한 부분이 있더군요.

첫 번 째 방법은 그냥 하면 되니까 문제 없는데...
두 번째 방법이 문제가 있어요.

일단 면을 뒤집어야 하는데, 앞면만 컬링하는 기능이 없어요 ...
그리고 vertex의 normal을 받아와야 하는데, vertex normal은 없고 surface normal만 있네요.
써봤더니 일단 뭐 작동은 하길래 뒤집는거 외에는 잘 되나보다.. 했더니,
이번엔 max의 normal 뒤집기 기능과 충돌이 나는지, 뒤집어도 안 나오더라고요.

그래서 에라 모르겠다 하고 두 번째 방법은 그냥 맥스 기능으로 설명해 버리려 합니다.
자 여러분 모두 기대하세요 :)

기대하셔야 합니다.

 

중간중간 개그를 치고 싶지만, 양이 워낙 많고 이제 초보자 분들도 아니니 건조하게 빨리 설명해 볼께요.
여기까지 따라 오셨으면 이미 개그 보러 오신 분들이 아니잖아...

 

 

외곽선 구현하기
첫 번째 방법

첫 번째 방법은 매우 싱겁습니다. 림라이트 기능을 이용하는 거거든요.
일단 이 부분을 이해하셔야 이번 강의가 가능합니다.

림라이트 구현이 이해 안되시면, 아래 강의를 읽고 실습하고 오세요.
 다 잊어 버린거 아니까, 화내지 않을 테니까 실습하고 와요 좀.

http://gamedevforever.com/259

 

 

 

(공부하는 중)

네 이걸 보시면 외곽선 구현 어떻게 하실지 알겠지요?

림라이트로 하는 방법이 있습니다.
구현도 대빵 간단하지요.

일단 림라이트를 만드세요.

 

이 정도는 뭐 금방이잖아요.

자, 여기서 거의 답이 나왔습니다.

바로 전전 시간에 했던 'if문을 이용한 셀 셰이딩 방법' 과 같은 원리로 외각선을 만들어 주는 거지요.

설명을 또 하자니 구차하네요. 간단히 보여만 드려도 다 아실 듯.

 

이겁니다. 마지막에 색상 곱하는 부분을 없애고, if문을 넣어서 일정 숫자 (지금은 0.3)을 넣었습니다. 이상이면 흰색을 출력하게 해 놓은거죠. 이렇게 하면 외곽선이 됩니다. 외곽선을 흰색으로 만든 이유는 맥스 배경이 어두운 색이라 잘 안보일까봐...

그냥 간단히 if문의 부호만 바꿔주면 검은 외곽선이 됩니다.

 

간단하죠? 그리고 결과값이 흰색과 검은색이 나왔다는데 집중하세요.
무슨 얘기냐면, 이 결과값과 다른 결과 (셀 셰이딩 결과) 를 같이 적용하고 싶으면, '곱하기' 만 하면 된다는 거니까요.
흑백으로 만들면 이게 좋아요.

무슨 얘기인지 다시 설명하자면.... 직접 지난번에 만든 셀셰이딩 가지고 실습해 보지요.

 

 

이게 일단 지난 시간에 만든 wrap 텍스쳐를 이용한 셀 셰이딩입니다.
이거랑 위의 외곽선 공식을 같이 대입해서 외곽선 있는 셀 셰이딩을 하려면...

 

이렇게 두 공식의 결과물을 곱해주기만 하면 되거든요 :) 뭐 굳이 더 설명 안해도 되겠지요.

이렇게 외곽선을 구해주면 간단합니다.
이 방식에는 장단점이 있는데요.

- 일단 장점으로는 외곽선의 두께가 다양해 집니다. 폴리곤의 집중과 각도에 민감하게 변화할 수 밖에 없거든요.
그래서 모델링만 신경써서 한다면 어딘지 모르게 '동양화스러운', 변화되는 두께의 선 느낌도 낼 수 있다는 장점이 있습니다.

- 물론 단점도 있습니다. 말씀드렸든 노말 방향에 민감하기 때문에 , 이 방법은 둥글둥글한 오브젝트에밖에 제대로 사용하기 힘듭니다. 박스처럼 각진 물건에는 이상하게 외곽선이 나올 수 밖에 없거든요. 그도 그럴 것이 넓은 면의 노말이 모두 같아 버리니까 말이죠.

박스에는 외곽선이 이상하게 나오는 것을 볼 수 있습니다.

 

그래서 게임에서도 림라이트는 주로 캐릭터에만 사용되고, 건물에서는 잘 사용되지 않는 겁니당.  

 

 

 

 

 

외곽선 구현하기
두 번째 방법

이 방법이 바로 '살아있는 편집점' 오즈라엘이 설명한 바로 그 방법입니다.
http://gamedevforever.com/18

이 방법은 원래 shader로 구현하는 방법이지만... 이래저래 해 봤는데 shaderFX에서는 일단 2pass 구현이 안되는데다가,
Vertex 제어도 불완전한 면이 있어서
그냥 맥스만으로 구현해 보겠습니다.^[각주:1]

2pass란 간단히 말해서 '두 번 그린다'는 말입니다.^[각주:2]
shader에서는 필요에 의해, 혹은 한계 때문에 한 번에 그리지 못하고 두 번에 나눠서 그려야 하는 경우가 꽤 있습니다.
보통 이것은 shader 코드 내에서 두 번 처리하도록 해주면 되는데, shaderFX에서는 거기에 대한 고려가 되어 있지 못해서 변칙적인 방법으로 해야만 합니다.

지금 그리는 이 방식이 바로 2Pass로 처리해야 하는 방식입니다.
두 번 그리도록 시킬 수는 없으니까, 주전자를 복사해서 두 개로 만들어 사용하도록 하지요 :)
이번에 설명드릴 방식은 3Dmax 초보 분들에게는 조금 곤란한 내용이 있을 수도 있습니다. 모르는게 나오면 질문해 주시거나 주변 아티스트 분들의 도움을 얻어 보세요 .

 

1. 오브젝트 복사하고 하나 숨기기 

일단 주전자를 하나 그리도록 하죠. 이게 첫 번째 pass를 상징합니다

 

2pass를 흉내내기 위해, 주전자를 완전히 동일한 자리에 복사하겠습니다.
이렇게 복사하려면, 주전자를 선택하고 snapshot 을 실행시켜 주면 됩니다.
뭐라고 뭐라고 나오면 그냥 OK 하세요. :)

 

그럼 이전의 주전자에 '완벽히 같은 자리에' 완벽히 같은 주전자가 복사되어 있습니다.
너무 완벽히 겹쳐져 있어서 하나로 보이지만요.

이제 이 중에 하나를 숨겨봅시다. 방해되니까요.

그냥 선택된 주전자를 (선택이 안되어 있으면 그냥 주전자를 선택하세요) 오른쪽 클릭해서 Hide 시켜 버립니다.

 

아무 변화가 없는 것 같습니다.
그렇지만 동일한 자리에 있던 주전자 2 개중 하나가 숨겨진 상태입니다.

그러므로 지금 남아 있는건 주전자 1개 뿐인거죠.
하나는 숨겨져 있으니까.

2. 면을 뒤집기

자 이제 남은 주전자로 1pass를 처리해서 외곽선을 만들어 봅시다. 
이제  할 일은, 면을 '뒤집는' 겁니다. 노말을 뒤집는 거예요.

그러기 위해 첫 번째 할 일은 '양면 렌더링' 을 끄는 겁니다. 언제가부터인가 max의 모든 오브젝트는 양면 렌더링이 되기 시작했거든요.

 양면 렌더링을 끄기 위해서 오브젝트를 선택하고 오른쪽 클릭한 후.
Object Properties를 선택해 줍니다.

Properties가 나오면, General 탭에서 Backface Cull을 켜줍니다. 이것이 양면 렌더링을 꺼주는 기능입니다. 

 양면 렌더링을 꺼줬으면, 이제 면을 뒤집을 차례입니다. 오브젝트를 선택하고 오른쪽 모디파이어 탭에서,
Normal 모디파이어를 선택해 줍니다.

 이상이 없으면 이제 면이 뒤집혔습니다. 볼록하던 주전자가 오목해졌음을 알 수 있습니다.
이 상태로 공이나 박스 같은게 주전자 안쪽에 들어가 있다면 보이겠지요.

3. 면을 확장하기

외각선을 만들기 위해서 스케일을 키워서는 안됩니다.
스케일을 키우면 http://gamedevforever.com/18 에서의 글처럼 이런 이상한 외각선이 나오게 되거든요.

그러니 우리는 스케일을 멀리하고 노말 방향으로 확장하는 것이 낫습니다.

자 그렇게 하기 위해서 ... 일단 주전자를 선택하고 오른쪽 클릭해서 Editable Poly로 바꿔줍시다.

 

 Editable Poly로 바뀌었다면, Polygon 선택 모드를 활성화 시켜 줍니다.

 주전자를 다 덮을 만큼 큼지막하게 마우스 왼쪽 드래그로 선택해 주세요. 이렇게 하면 주전자의 모든 Polygon이 선택되게 됩니다. 빨갛게 선택되었나 확인하세요.문제가 생기면 주위의 아티스트에게 문의하세요 :)

 Polygon 선택이 완료되었으면, 이번엔 확장할 차례입니다. 오른쪽 메뉴에서 Extrude라는 명령을 찾고, Extrude와 함께 있는 창 모양의 버튼을 누르세요.

 그러면 아래와 같은 모양이 될 수도 있고, 아닐 수도 있습니다. 하여간 기괴하게 될 가능성이 큽니다.
신기한 메뉴가 주전자 가운데에 떠 있습니다.

 침착하게, Group으로 되어 있는 저 부분을 Local Normal로 바꿔주세요. 각 노말 방향으로 확장해야 하니까요.

 그 다음, 저 부분의 숫자를 조작해서 약간 통통할 정도로 주전자를 확장시켜 주세요.
약간 음수가 나오면 통통해 지네요.

 마음에 들었으면 이제 확인 버튼을 눌러 작업을 끝냅니다.

이제 다시 Polygon버튼을 눌러서 꺼 줍니다.

 오브젝트가 확장되었습니다.

 

4. 색을 바꾸고 숨긴 오브젝트 나타나게 하기

색을 바꾸는 것은 쉽습니다.
오브젝트를 선택한 채, 아래 부분의 화살표 부분의 색상을 눌러 검은색으로 바꿔주기만 하면 됩니다. ^[각주:3]

 

 

이렇게 해서 첫 번째 Pass를 다 그렸습니다.
이제 두 번째 패스 (인 척하고) 를 그려봅시다. 주전자를 한 번 더 그리는 거지요.

이미 정석은 저 멀리 안드로 메다로 갔지만, 그래도 정석이라면 동일한 위치에 주전자를 한 번 더 생성시켜 주는 것일텐데요, 우리는 이미 맨 처음에 주전자를 복사해서 숨겨놨기 때문에 그 주전자를 다시 보여주기만 하면 됩니다.
이제 화면의 '빈 부분에서 오른쪽 클릭' 을 하고, 나오는 메뉴에서 Unhide All을 선택합시다.

주전자가 나왔습니다! 개념상으로 까만 주전자 안에 분홍 주전자가 들어 있는 모양새겠지요!
하지만 까만 주전자가 면이 뒤집혀서 저렇게 보이게 됩니다.

자 정리하자면, 첫 번째 주전자(1pass) 는 확장하고 뒤집어서 까맣게 칠한거고,
두 번째 주전자(2pass) 는 그냥 그린 겁니다.  ^[각주:4]

좀 많이 두껍게 만들어서 여기저기 뚫린 곳이 보이는군요. 얇게 만들면 거의 완벽하게 보입니다.

 

자, 이렇게 외곽선을 좀 얅게 만들고, 주전자의 폴리곤을 좀 올리고, 외곽선의 색도 좀 바꿔 보고,
안에 있는 주전자에다가 저번 시간에 배운 셀 셰이딩 공식으로 만들어 보면 이렇게 됩니당.

 

 

 

이 방법도 장단점이 있습니다.

- 장점은 일단 균일한 두께의 외곽선을 만들 수 있습니다. 그리고 box와 같은 평평한 오브젝트에서도 제대로 작동합니다.
때문에 일반적인 외곽선 제작 기능은 이걸 많이 사용합니다.

- 단점도 있습니다. 선이 너무 두꺼우면 아까처럼 끊어진 부분이 보입니다. 뒷면이 끊어지거나 오브젝트의 vertex가 끊어진 면에서도 확장할때 문제가 생깁니다. 그래서 일정 이상 두께로 만들기 힘들지요.
그리고 아무래도 오브젝트를 두 번 그리는거라, 부하가 좀 있는 편입니다.
역시 단점도 http://gamedevforever.com/18 에 잘 설명되어 있지요 . 

 

 

1. 지금은 맥스로 하지만 실무에서는 shader로 짠다는 말입니다. 그치만 어쨌건 max에서 외각선 만들어 보기에는 이 방법도 좋아요 [본문으로]
2. 프로그래머들이 알아 듣는 용어입니다 '원패스로 그려' '투패스로 그려' ... 물론 투패스로 그리면 같은 오브젝트를 두 번 그리는 거리 부담이 상당합니다. [본문으로]
3. 사실 메터리얼 에디터를 이용해 하이라이트가 없게 제대로 검은 색으로 바꿔줘야 하지만, 직접 해 보면 외곽선만 나오는 거라 사실 큰 문제 없어서 단순한 방법으로 대충 넘어갑니다. [본문으로]
4. 본 강의에서는 외곽선에 해당하는 주전자를 먼저 그리고 정상적인 주전자를 나중에 그린다는 것 처럼 말했지만, 실제 실무에서는 픽셀 연산 부하를 줄이기 위해 거꾸로 하기도 합니다. 그래도 결과는 똑같아요 :) [본문으로]