ShaderFX를 이용한, 그래픽 디자이너를 위한 기초 쉐이더 강좌 10강

10강입니다!!! 이번 10강은 진짜 우여곡절이 ... ㅠㅠ

NDC 스피커파티까지 끝내고 나서 누적된 피로로 계속 몸이 안좋았는데, 주말에는 경조사가 겹치고 평일에는 회식과 외부 약속이 겹치더니 결국 저번주 목요일날 급체하는 바람에 만 하루동안 사경을 헤맷습니다. 급체와 함께 몸살이 겹쳐서 와서요.

결국 겨우 안정된 다음에 한약방 갔더니 너무 피로해 있다고 쉬라고 하는군요. 쉬라니 ㅠㅠ 20대 때의 1/4 정도, 30대때의 절반 정도 강도로 일하고 있는데 쉬라니요 ㅠㅠ (하긴 30대 때는 그러다가 디스크 걸려서 몇 년 고생했었지 ... )
여하간 덕분에 이제야 정신과 몸을 챙기고 10강을 쓰게 되었습니다. 크흑.

 

불쌍합니다.

 

뭐 각설하고...

이게 전체 예상된 일정의 절반쯤 되는 것 같아요. (아마도)
일단 빠르게 나가 보지요. 이번 시간에는... 드디어 알파가 들어간 불(파이야) 를 만들어 보겠습니다.

아마 이번으로 1부는 끝이 날 것 같아요!!! 1부가 뭐냐고요? 그건 '텍스쳐 컨트롤' 하는 쪽이예요 !

이후부터는 좀 어려운 얘기가 나옵니다. '알파 소팅' 에 대한 얘기가 나오구요. '라이팅 연산' 에 대한 얘기도 나올 거예요.

사실 이게 프로그래머들이 배우는 hlsl하고는 완전 반대되는 과정의 느낌이긴 합니다만... 말씀드렸듯 이 강의는 그래픽 디자이너를 위해 특화된 과정의 강의니까요. 다릅니다 달라요.

1. 셰이더로 이펙트를 어떻게 만드나요?

이펙트라는 것이 보통 '추상적인 무언가가 어떤 에니메이션을 보여주는 것' 이니까요. 그리고 주로 알파 블렌딩된 이미지들이고요. 이런 이펙트를 만드는 방법은 보통 아래 방법을 사용하지요.

가. 파티클을 이용한다

일반적인 방법이예요. 파티클을 이용하면 여러 효과를 리얼하게 낼 수 있지요.
그치만... 무거워요... 아주 많이...
가볍게 하려면 꽤 기술이 필요하고 말이죠. 엔진 특성에 따라 가볍고 무겁고도 다르고..
그래서 제한적으로 사용해야만 하지요. 

나. 텍스쳐 시퀀스를 이용한다

실무에서도 많이 쓰는 방법이지요. 텍스쳐 한 장에 에니메이션 되는 이펙트 그림을 나열해 놓고 차례로 보여주는 방식이예요. 시퀀스를 지원하지 않는 구식 엔진에는 IFL 파일이라는 것을 이용하기도 하지요.
옛날 2D 게임 만들때 흔히 사용했던 스프라이트 방식. 그거예요.
그치만 역시 텍스쳐를 너무 많이 사용한다는게 문제예요. 편하긴 해도 매우 큰 약점이지요.  

다. 오브젝트 에니메이션을 이용한다

오브젝트들 실제로 구기거나, 스케일링 하거나 등등 해서 이펙트를 에니메이션 시키는 방법이예요.         
불이나 폭파 이미지에서 직접적으로 이것만 이용해서 뭔가를 만들긴 좀 그렇고, 알파 에니메이션 등을 같이 사용하곤 하죠. 단점은 효과가 그렇게 좋지 못하다는 것. 아까 말했지만 혼자서 사용하기에는 무리가 있고 말이죠.

라. 텍스쳐 에니메이션을 이용한다

UV를 움직이거나 해서 애니메이션 시키는 방법이지요. 어찌보면 가장 많이 쓰이는 방법이고, 가벼우면서도 효과가 좋은 방법이긴 하지만, 표현할 수 있는 것이 한계가 있다는게 좀 단점이지요. 각종 꼼수를 동원하면 대부분 가능하긴 합니다만...

마. Shader 기술로 만든다

오늘 배울 겁니다. 불이나 폭파 에니메이션을 셰이더로 제어하게 되면, 가벼우면서도 효과가 좋은 이펙트를 만들 수 있어요. 물론 실무에서는 이것과 함께 복합적으로 사용하는 경우가 많지만, 어쨌거나 이 방법을 이용하면 텍스쳐 에니메이션의 장점을 그대로 흡수하면서 더 복잡한 응용이 가능하게 됩니다.

그리고 재미있게도, 오늘 얘기할, 셰이더를 이용해서 불을 만들기 위한 기술은 '이미 다 배우신 기술' 이라는 겁니다. 후후후후후후후후후후  (오늘을 위해서 미리 다 계획해 놓는 치밀함!!!)

 

2. 첫번째 불 이미지를 만들어 봅시다.

불을 만드려면 일단 불이 있어야 겠군요.

 

 

네 뭐 이런 불 그림이 있다고 칩시다 어설프지만.

이 불 그림을 입혀서 불을 만들어 봅시다.

... 불 그림을 입혔는데 말도 안되게 어설프지요. 우와 진짜 구려. ㅋ 망했다 ㅋ

... 이건 뭐 당연하게도 알파도 없는 불 그림을 입혀 놓았기 때문이지요.

불 모양을 만들기 위해서 일단 알파채널이 있는 이미지로 만들어 놓겠습니다.
아래처럼 말이지요.^[각주:1]
알파 채널에 보면,  불 모양의 외각이 있는걸 볼 수 있습니다. 이걸 32bit TGA 파일이나 DDS DXT5 같은 파일로 만들어 놓으면 사용할 수 있게 되지요.

 이렇게 해서 알파 채널도 연결했습니다. 불이 제대로 나옵니다.

야호 불이 만들어졌다 이걸로 끝 !@

야호 끝났다

 

 

 

... 이젠 오래 써먹은 개그니 아무도 안 속으시겠죠. 쳇.

 

 

 

넹 끝났으면 좋겠습니다만, 전혀 안끝났습니다. 지금은 그냥 '불 모양 그림' 일 뿐이지요. 아무리 긍정적으로 봐라봐도 불이라 보기엔 무리가 좀 있습니다. ^[각주:2]  

 

3. 두 번째 불 이미지를 만들어 봅시다.

넹 그럼 이번에는 두 번째 불 이미지입니다.
그리기 상당히 귀찮아서 (... 나 그래픽 디자이너 맞나...) 파티클 일루젼에서 소스를 만들어서 대충 닦았습니다.

 
이 이미지의 특징은, 세로로 타일링 되는 이미지라는 것입니다. 세로로 주욱 이어져요.

 

 

 

 

세로로 붙여보면.. 요렇게요. 이어지죠. 주우우우ㅇ우우우우우우웅우우ㅜ우ㅜㅇ욱.

만드는 법이요? 그래픽 디자이너라면 이정도는 다 해요.
프로그래머분들이 클래스 만드는 수준.

 

그렇다면 그런 줄 아세요.

 

자 이거 가지고, 아래처럼 만들어 봤습니다.
응? 어디서 많이 보던거 아니예요??? 

 

뭔지 모르시겠는 분은 7강 http://www.gamedevforever.com/120 을 복습하세요.
UV가 세로로 흐르는 거잖아요!!!

이렇게요!!!

다시 말씀드리지만
전 이미 다 알려드린 기술만 사용해요 후후후
왜냐면 쉬워야 하니까요. 쉽게 쓰기로 작정한 거니까요.
제가 여기에서  WVP(World View Projection) Matrix 라던가 dot / cross 공식따위를 증명하고 앉았으면 다들 도망가실 거잖아요 ...  (어차피 설명할 수 있을지도 잘 모르겠지만)

아마 이러시겠죠. 저도 그랬었었었어요.

 

아차! 이것도 알파를 안 만들었군요.
여기의 알파는 좀 특이한 모양으로 만들어 보았습니다. 물론 위 아래 타일링 되는 것은 동일.

 

 

이걸 연결하면 이렇게 되지요.
마치 용암이 구불구불하게 흘러가는 듯한 이미지가 되었습니다.

흠? 두 이미지를 가지고 뭘 하려는 걸까요? 후후후후후후후후

이제 다음 단원에서 그 비밀이 드러납니다.

후후후후후후후 기대돼라

 

4. 간단하게 불을 합성해 봅시다.

두 이미지를 만들어 봤습니다. 이제 이걸 합성해 보도록 하지요.
지금 만든 두 셰이더를 동시에 나열하면 이런 모양이겠죠.

 

1번과 2번 텍스쳐가 있고, 2번 텍스쳐는 UV 조작을 통해 위로 흘러가고 있었습니다.^[각주:3]

자.. 일단 1번 텍스쳐를 최종 출력에 연결을 해 보지요. 

 그럼 이렇게, 단원 2에서 봤던 것과 같은 이미지가 나옵니다.
다음은 어떻게 해야 할까요?

이제는 충분히 익숙해지셨을, Math/MathOperator 를 이용해서 두 이미지를 곱했더니, 좀 더 그럴듯한 불 이미지가 되었습니다.

 

           얘네 둘을 곱하는것은, 포토샵에서 두 레이어를 Multiply 하는 것과 같으니까요.

포토샵에서 보면 이런 거겠죠. 레이어 두 개를 Multiply로 섞는다는...
두 이미지가 잘 섞였군요. 그럼 플레이하고 동영상을 볼까요.

 

동영상 압축 특성상 외각이 좀 지저분하게 나오는데요. 저정도까지는 아닙니다.

불 그림이 흘러가는데, 아래쪽은 첫 번째 텍스쳐의 노랑때문에 좀 밝아 보이고, 윗쪽은 좀 어두줘집니다. 이런 느낌은 그림만 좀 더  잘 만들면 괜찮습니다.

그래도 음.. .뭐 일단 좀 속도만 느려지면 불이 올라가는 것 처럼 보일 것 같긴 한데.. 뭔가 좀 이상합니다.
뭐가 이상할까요? 아니 이상하다 못해 너무 구립니다.

 

 

외각 말이죠 외각. 외각이 이상하잖아요 
불이 ... 그림만 올라가고 출렁출렁 움직이는 느낌이 없잖아요?!?

그래서 만든게 두 번째 텍스쳐의 알파 채널입니다.

 

 이번엔, 이렇게 두 알파 채널도 같이 곱해 줘서 출력해 줘 봅시다.

포토샵에서는 '알파채널을 Multiply하기' 같은 레이어 옵션이 없기 때문에 그냥 알파 채널을 이미지처럼 만들어서 설명해 봤습니다. 두 알파 채널이 이렇게 섞인다는 거지요.

두 알파 채널이 곱셈(Multiply) 로 섞이기 때문에,
검은색(0) 이 있는 부분은 흰색(1) 과 곱해지더라도 검은 색이 ( 0 * 1 = 0 ) 나오게 됩니다.^[각주:4]

대충 짐작하시겠지요? 알파 채널도 어차피 RGB와 같은 채널 중 하나인 A 채널이기 때문에,
곱하면 그냥 같이 곱해집니다.

그럼 최종 결과물을 볼까요? ^[각주:5]

(역시 동영상의 압축에 의한 잔상때문에 외각이 지저분하게 나오네요... 제길)

* 주의 : 맥스 2009 버전에서는 플레이 버튼을 누르면, 외각의 알파가 저렇게 갱신되지 않고 계속 누적이 되어서 쌓이는 모습을 발견했습니다. 맥스 자체가 이런거 하려고 만들어 놓은게 아니라서 그런건 이해하겠습니다만... 맥스 2010 을 사용하시면 아무 문제없이 잘 됩니다.
맥스 2009에서는 플레이 버튼으로 보시지 마시고, 타임 컨트롤 바를 수동으로 조금씩 움직여서 보시는 것을 추천합니다.

네 좀 지저분하게 찍혔지만, 불이 이제 정형적인 모습을 가지지 않고 '일렁이듯이' 움직인다는 것을
볼 수 있습니다.

이제 불의 소스가 하나 완성된거지요. 텍스쳐 UV 에니메이션으로는 하기 힘든 모양을, 이렇게 간단한 셰이더를 이용해서 만들 수 있습니다. 물론 이게 끝이 아니지요. 여기에 더 추가되는 작업을 해야 그럴듯한 불 이펙트가 나오게 될 겁니다.
예를 들면, 파티클을 살짝 써서 불똥을 표현해 준다던가, 굴절 셰이더를 쓰는 평면을 하나 더 만들어서 뒤 배경이 굴절되게 한다던가, 아주 밝은 부분 레이어와 위로 올라가는 연기 레이어를 추가로 제작해서 배열한다던가 하는 식으로 말이지요.

어쨌건, 가장 중요한 부분을 끝냈으니 나머지는 좀 더 쉬울 겁니다

 

자 .... 이렇게 해서 이미지 컨트롤 파트를 마치겠습니다!!! 다음 시간에는...

....

....

라이트를 할 것인가 알파 소팅을 할 것인가 고민좀 하고 돌아오겠습니다!!!

 

따라해 보실 분을 위한 이미지 소스는 여깄습니당

 

A.tga

 

B.tga

1. 그래픽 하시는 분들은 다 아시는 얘기 : RGB 이미지는 알파 채널 이미지랑 다르게 전체가 불 이미지 스러운 칼라로 되어 있지요? 만약 위에 나온 예제처럼, 외각을 검은색으로 채웠다면 나오는 이미지에도 검은 색이 어느정도 묻어 버리기 때문에 저렇게 만듭니다. [본문으로]
2. 못그려서 그런거라고 하지 마세요. [본문으로]
3. 흐르는 속도를 바꾸시려면 Time에다가 일정 숫자를 곱해서 출력하시면 되겠지요 대략 경험상 여기에서는 0.25 정도를 곱하는게 좋겠더군요 [본문으로]
4. 곱셈은 둘중 하나가 0이면 0이 되고, 덧셈은 둘 중하나가 1이면 1이 된다라고 생각하시면 편합니다. (덧셈은 좀 더 깊은 세계가 있지만 일단 여기까지..) [본문으로]
5. 불이 흐르는 속도를 1/4 로 줄였습니다. 어떻게 하시는지 다 알지요? [본문으로]