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

안녕하십니까. 오늘도 어김없이 찾아온
치명적인 매력의 소유자 대마왕J입니다.

심지어 우리 게임에도 보스 몹으로 등장하는 위대하신 분이 바로 저입니다. Ndoors Co. 아틀란티카.

그럼 오늘도 즐거운 시간을 한 번 가져볼까요 호호홍

1. 이번 시간으로 UV를 끝내봅시다.


다른 거 할까 잠깐 생각해 봤는데... 이거 UV를 조금만 더하면 마무리 짓는데다가,
여기서 추가로 배울 수 있는 재미있는 개념과 ShaderFX의 새 기능이 생각나서 말입니다.
그래서 추가로 좀 더 나가봅니다 :)

저번 시간에 UV에 덧셈과 곱셈을 해서 변화시키는 것을 배워봤습니다.
네 ,



이거 말입니다 이거.

귀여운 개불아저씨가 등장하는 이거.
사실 개불은 이렇게 생겼지만.

사랑을 돈으로 사는 개불과 티스.

이제 이번 시간에는 귀여운 개불캐릭터가 원하는대로, 똑바로 UV가 위아래로 혹은 옆으로 흐르도록 만들어 봅시다.


2. 왜 그랬는지 한 번 더 생각해 봅시다.

지난 시간에 보면, UV가 대각선으로 흘렀지요?
생각해 보면 당연할 수 밖에 없는 결과였습니다.



이렇게 UV를 가지고 있는 Vertex가 있는데...

여기의 UV값인 float2(0.0 , 0.0)^[각주:1] 에다가 +0.2를 해주면

어쩔 수 없이 float2(0.2, 0.2) = float2(0.0, 0.0) +0.2 ^[각주:2]
가 되어서 U, V 값이 동시에 변하기 때문입니다.
당연하지요. 2차원의 벡터에 한 자리의 숫자를 더하면 전부 영향을 끼쳐버리니까요.





그러므로 이걸 대각선이 아닌 똑바로 움직이게 하려면 , 어쩔 수 없이 두 자리가 같이 다니던 UV를, U와 V 로 일단 갈라서 따로따로 계산해 줘야 합니다 .

즉 ShaderFX에서 이걸 계산하려면,

float2( U , V )

였던 녀석을

float( U )
float( V )

이렇게 두 개로 따로따로 찢어준 다음에,(각각은 당연히 float)이겠지요

float( U )
float( V ) + 0.2

이런 식으로 U나 V 한테만 값을 적용해 주고,(여기서는 V에다가만 값을 줬네요)
다시 둘을 합쳐서

float2( U, V )

로 만들어 주면 된다는 것입니다.


근데,


생각해 보니 조낸 간단한걸 일부러
귀찮게 하는 것 같지 않아요?????

코딩으로 한 번 짜보기 시작하면 그래서 다시 노드로 못돌아 가겠뜸...

네 그렇습니다. 이게 노드식으로 이루어지는 비주얼 쉐이더 툴의 단점입니다.
hlsl 코드로 짜면, 그냥

UV = float2(U , V+0.2);

하고 한 줄이면 끝날 것을,
노드로 위에서 설명한것처럼 구구절절하게 표현해야 한다는 것입니다 .
일단 조금 짜도 쉽게 길어지기 때문에 열심히 일한 것 처럼 보이는 것은 장점.

묘한데서 안심하지 마세요

3. ShaderFX로 구현해 봅시다.

그럼, 일을 열심히 하는 것 처럼 보이기 위해서 간단하게 위에서 말한 방식으로 UV의 수직이동을
ShaderFX로 구현해 봅시다.

수직이니까... V에다가 + 해 주면 되겠군요. ^[각주:3]

뭐 일단 여기에서부터 시작합니다.
슥 보니 UV 밑에 U와 V가 떨어져 있는게 보이는군요.
파랑색 공 아이콘이 U와 V의 옆에 각각 보이니까 당연히 float 으로 출력되는 거겠고..
U와 V가 각각 떨어져 준비가 되어 있는걸 볼 수 있습니다. 하긴 저게 미리 없으면 방법이 없겠지..

그럼 떨어뜨리는 것은 할 필요 없이 저걸 합쳐주는 것만 준비하면 되겠군요.

그럼 좀 귀찮지만, 합쳐 주는 뭔가가 추가로 필요하다는 것을 알 수 있습니다.
빈 화면에서 오른클릭해서 , Math를 찾아서 VectorConstruction 을 만듭시다.

VectorConstruction (벡터 건설) 이 나왔습니다.
아이콘이 참 직관적이어서 좋아요. 공사하고 있잖아 ㅋ


이놈은 뭐 별 건 아닙니다.
굳이 수식으로 표현하자면 이런거..?

float4( , , , )

즉, '준비된 빈자리의 float4 벡터' 입니다.
근데 재미있는 것은, 4자리가 준비되어 있긴 하지만 이 VectorConstruction에 몇 개의 수를 넣는냐에 따라 float 숫자가 달라진다는 거지요.


즉 X한테만 숫자를 넣으면 float 을 출력하고,
X,Y 에다가 숫자를 넣으면 float2를 토해내고
X, Y, Z 에다가 넣으면 float3을 토해내고
X, Y, Z, W 에다가 넣으면 자동으로 float4를 토해내는 신통방통한 놈이란 말입니다.


그러므로 우리는 여기다가 U와 V 를 넣겠습니다. 두 개 넣었으니 float2가 출력되겠죠.
이전에도 말했지만, U와 V 는 X와 Y 랑 똑같은데 그냥 이름만 다른거라고 말씀드렸었지요

자, 기존에 연결되어 있던 UV 라인을 삭제하고,
U와 V 를 각각 X와 Y에 넣어서 합쳐줬습니다.
그리고 나온 Vector를 UV에 연결해 줬지요. ^[각주:4]

이렇게 하면 기존에 작업한 것과 똑같습니다. 그럼 성공한겁니다.
그렇지만, 전과 다른것은 이제 드디어 U와 V 값을 따로 접근할 수 있게 되었다는 것입니다.

이제 벌써 3달을 넘게 하셨으니, 너무 쉬운건 살짝 점프하고 싶은데요.
아니, 그 전에 한 번 스스로 생각해 보세요.

V 한테 0.5 값을 더하려면 이제 어떻게 해야 하지요?





......




..


설마 알겠지

.. 어서 안다고 말해...

설마 여기까지 배워놓고 모를까...

네, 정답공개합니다.

네에. 이렇게 하면 되겠죠?

멀쩡히 잘 가고 있던 V 값을 끊고, 그 사이에 MathOperator를 끼워 넣은 다음에, Constant(상수)를 0.5만 더해주면 되는 거지요.
그림을 보니 위아래로만 움직였습니다!!!!
-0.5 를 하면 반대로도 움직이겠지요!
다양한 숫자를 넣어보시고 테스트 해 보십시오.

자아 ..... 요걸 이용하면 뭘 할 수 있을까요?

바로


폭포나 흘러가는 강을 만들 수 있습니다
폭포나 강은 보통 물 텍스쳐가 일정 방향으로 흘러가는 방식으로 만들지요.
이럴때 사용할 수 있는게 이 쉐이더입니다.

UV를 어떻게 펴냐에 따라 , 곡선으로 흘러가게 할 수도 있다는 말씀. Ndoors Co. 삼국지를 품다.

쉐이더에서 V 값만 무한히 증가하게 애니메이션을 준다면, 폭포나 흘러가는 강을 자연스럽게 만들 수 있습니다.
요것도 알아서 흘러가게 할 수 있는데, 이건 좀 있다가 해 보도록 합시다. 아직 개념설명이 끝나지 않았어요.


4. UV를 눈으로 봅시다.

네, 위에서는 이제 Vector Construction을 통해, 조각조각 나눠져 있던 float를 합쳐서 float2 등으로 만드는 것을 알아봤습니다.

자... 여기서 ... 뭔가 할 수 있을 것 같지 않나요...?

바로... UV를 눈으로 보는 것 말입니다!!!!
워워.. 긴장하지 마세요. 별 거 아닙니다.
그전에는 분명 뭐야 이게? 했던 것이겠지만, 이제 여러분들의 수준에서는 '아 .. 그거!' 라고 알 수 있는 수준인 단원입니다.


게다가 UV를 눈으로 보게 되면, 그동안 개념으로만 알고 있었던 UV라는 것이
확실하게 이해되게 됩니다! 그래픽 디자이너는 눈으로 봐야만 이해하곤 하거든요.




자 , 이번에 필요한 것은 아까 배운 VectorConstuction 과 UV 뿐입니다. 다른 것은 지워버리셔도 좋습니다.

여기서 우리가 알고 있는 몇 가지 사실을 나열해 보겠습니다. 무엇이 상상되는지 한 번 생각해 보시죠.


- UV 는 0과 1 사이의 값으로 표현된다.
- 칼라도 0과 1사이의 채널값의 모임으로 표현된다.
- 칼라는 0과 1사이의 채널이 R,G,B 세 군데에 들어가면 칼라가 된다.
- VectorConstruction 은 한 채널 (float) 을 합쳐서 최대 4개의 채널 (float4) 을 가진 벡터로 만들어 준다.




자 상상이 끝나셨는지? 뭘 하려는지?
잘 모르시겠다고요?
그럼 아래 그림을 보세요

짠

어라... U 값을 X, Y, Z 에 넣어서 float3로 만들었습니다. 그리고 그걸 다시 AmbientColor로 만들었습니다 :)
그럼 그림은 어떻게 보일까요?

이렇게 보입니다 :) UV의 U 값이 흑백으로 보입니다!! 그도 그럴 것이, X,Y,Z 모두에 U 값을 넣었으므로, float3(0,0,0) 부터 float3(1,1,1) 까지의 색상이 되었지요? UV의 U가 눈으로 보입니다 >_<

물론 U가 아니라 V도 볼 수 있습니다.

우리 그래픽 디자이너들은, 눈으로 봐야 이해하기가 쉽잖아요!
어디가 V 값이 0인줄 알겠고 어디가 1인줄 알 것 같애!!!
프로그래머들은 자기네들만 이런거 보고!!! 우린 보여주지도 않고!!! 흐규흐규!!!!

"Vertex가 UV값을 가진다" 라고 설명하면, "그럼 그 Vertex 사이는 어떻게 되어 있는거야?" 라고 생각할 수 있겠지요. 이제 그림을 보면 명백해 지지요.
"두 개의 다른 Vertex 값의 사이는 두 값을 블랜딩 해 줍니다" ^[각주:5]



어때요? UV를 눈으로 보게 되니까 뭔가 기쁘지 않아요?
아직 끝나지 않았어요!

끝나지 않았어 끝나지 않았어

이번엔 UV를 동시에 보기로 하죠. U는 Red 채널에 넣고, V는 Green 채널에 넣는 거예요. B가 남으니까....B는 그냥 상수 0 을 넣어서 색을 없애 보기로 하죠!! 파랑색은 업ㅋ엉ㅋ

우왕 UV가 칼라로 한 번에 보여요!!! UV가 0,0 인 부분은 Z값도 0을 넣었으니까 (0,0,0)이 되어서 검은색이 나왔구요!

UV가 (1,1)인 부분은 RGB로 하면 (1,1,0) 이 되니까 노란색이 되었어요!!!

어때요, UV를 눈으로 볼 수 있지요?????!!!!??



이렇게 UV를 눈으로 보게 되었습니다. 그동안 '니시카와 젠지' 씨의 글이나 기타 그래픽스 이론 글을 읽다가 저런 뭔가 무지개색의 그림이 나오면 저게 뭘까.. 라고 더이상 생각하지 않아도 좋습니다!! 이젠 저 색깔이 숫자로 보여야 해요!!!


이전에도 말씀드렸지만, 숫자를 색으로, 색을 숫자로 변환해 가면서 볼 수 있는 능력!
쉐이더를 공부할때는 꼭 필요한 능력입니다.





5. 실습 : UV를 에니메이션 합시다.


원래 4까지 하고 끝내려 했는데, 진짜 이것만 하면 이제 더는 UV를 안건드려도 될 것 같네요.
요것까지만 해 보지요. 실습입니다.

자 이번엔 흘러가는 강을 만들 거예요. 폭포라고 해도 괜찮겠죠.

우선 준비할 것은 이것입니다.

텍스쳐는 일단 귀찮으니까 있는거 쓰도록 합시다.

DClouds_32bit.dds 가 괜찮아 보이네요. Texture를 생성해서 이 텍스쳐를 입혀 보세요 ^[각주:6]

세로로 길죽하게 입혀졌군요. 뭐 이대로도 좋다면 할 말 없지만... 저는 좀 조절하고 싶네요
조절이 가능하게 하기 위해서 , Vector Construntion 을 이용해서 UV를 나눠 놓읍시다.

이렇게요. 뭐, 당연하게도 변한건 없지요.

근데 이번엔 U 값 (X 축)이 좀 늘어난 것을 완화시켜 보도록 하겠습니다.
생각해보세요... 귀찮겠지만... 어떻게 하면 되나요?

U값(X축) 을 타일링 시키면 되겠지요? 세로 타일링 수치를 늘이면 늘어난게 좀 완화되지 않겠어요?
타일링을 만드는건? 곱하기죠?

그러니까 아래처럼 되는거죠.
이해 안되시면 차근차근 잘 보시면서 기억을 되짚어 보세요 :)

네, 이렇게 U 값에 타일링 (곱하기) 를 추가해 놨습니다. 상수 (Constant)의 숫자를 좀 올려보세요.

저는 2 정도로 하니까 그런대로 괜찮게 되었네요.

흑백인게 마음에 안 드시면, 마지막에 칼라값을 곱해주세요.
푸른 계열 색을 곱하면 괜찮겠지요 .

..촌스럽네요.
그냥 이게 무료강의의 폐해라고 생각하고 넘어가도록 합시다.

자 이젠 물이 흘러가게 해야죠.

물이 흘러가는건? UV의 이동입니다. 이동은 어느쪽으로? 역시 아까 했던 것처럼 위아래로 흘러가야 하니까.. 간단합니다. U 에다가 '덧셈' 을 해주면 되겠군요.

자 , 잘 보세요. 여기입니다. 흐름을 눈으로 잘 느껴보세요.
노드로 하면 오히려 조금만 복잡해져도 흐름을 놓치는 경우가 많거든요. 오히려 코드가 보기가 쉽다는... 쿨럭.


요령은, 오른쪽 부터 보는겁니다. 흐름을 느껴보세요. 오른쪽 아래 UV부터 봅니다. 좌측으로 흘러갑니다...


- UV의 U 값이 ... ^[각주:7]
- Input B 로 들어가서
- 상수(Constant) 랑 곱해졌습니다.
- 거기서 곱셈이 끝이죠.
- 그리고 그걸 Vector Construction의 X 에다 집어 넣는 것입니다.


그러므로, 완성된 U의 값은

요기를 통해 나와 흘러가고 있습니다.

요기를 과감히 끊고, 상수를 더해주도록 만들어 주면, 이제 이동을 시킬 수 있을겁니다.

이렇게요. 간단하지요? ^[각주:8]

자, 이제 이 덧셈의 상수를 움직여서, 물이 흘러가는지 봅시다.

오오! 상수를 올려주니 UV가 이동하면서, 물이 흘러가는 것 같은 화면이 됩니다!!! 정말로 바로 뛰어들고 싶을 정도로 맑고 투명한 물이로군요!!!

이런 식으로 U 값을 애니메이션 줄 수 있다면 매우 만족스러울 것 같습니다.....만...


문제는 물이 영원히 흘러간다는 말이죠. 이거 애니로 제어하기 쉽지 않습니다. 막 루핑 써야 하고.. 귀찮...

그래서 이번엔 Time 컨트롤러를 써 봅시다.

그전에 우리가 여태까지 만들어 놓은 노드구조를 잠깐 감상해 볼까요.

오 꽤 멋집니다.

사실 별 거 아니지만, 꽤 뭔가 한 것 처럼 보입니다. 놀지않고 일한것 처럼요.

조금 복잡해졌다고 막 헤매면 안돼요. 앞으로 이것보다 두 배 세배로 복잡하게 만들겁니다.

자 여기서 좀 더 일한 것 처럼 만들어 봅시다.

우리가 여기 U값 덧셈 부분의 상수를 손으로 조절했잖아요?
그랬더니 흘러갔었죠?

이 부분의 상수를 지우고,
Time 컨트롤러를 넣습니다.

Time 컨트롤러는 Inputs / Time에 있습니다. 꺼내봅시다.

뭔가 엄청나게 정직한 시계가 나왔군요 :)
이 Time 컨트롤러를 , 아까 상수를 지우고 거기다가 연결해 줍시다.

별 변화가 없네요?

변화가 없는게 정상이지요.

맥스로 가서 , 맥스 하단에 있는 플레이 버튼 (▶) 을 눌러줍시다.

우와와와와와와와와와와

빨라!!!!

빠릅니다. 빠르고요.

일단 이 타임컨트롤러는 초마다 0 1 2 3 4 5 6 7 8 9... 식으로 숫자를 늘여주는 노드로 보입니다.
그러므로 이렇게 휙휙 이동하는 거겠지요.

이걸 느리게 하려면 간단합니다.

Time을 그냥 덧셈에 넣지 말고, 0.1 같이 소숫점을 곱한 결과물을 넣어주면 되겠지요.
만약 0.1을 곱하면, 1은 0.1이 되고 2는 0.2가 되니까... 1/10로 느려지겠지요!?

한 번 보겠습니다.

오오오 좋은 속도로군요. 이정도라면 만족할 수 있겠습니다.

이제 이렇게 원하는 모양으로 구부린다던가 해서 쓸 수도 있습니다.
곡선으로 만들면 곡선에 따라 잘 흐르지요 :)


이번 시간에 우리가 만든 노드는 다음과 같습니다.

이렇게 해서 드디어! 처음으로 뭔가 좀 쓸만할 것 같은 쉐이더를 만들어 보았습니다!!!
SFX 파일도 첨부해 드리지요. 보시고 싶으시면 보셔도 좋겠습니다 :) ^[각주:9]

7강.SFX

이제 이것으로 UV에 대해서는 끝내도록 하겠습니다.
다음 시간에는 아마도... 리니어 인터폴레이션 정도..?
아니다 . 그거 하려면 그 전에 텍스쳐 블렌딩부터 해야겠구나... 웅...
잘 하면 둘 다 할 수 있겠네요 :) 여기서부터는 재밌지요.

UV 이론을 알면 말이죠!!!



이젠 정말 UV는 끝!!!! 앞으로는 그냥 얘기도 안해주고 막막 쓸테니까 복습하세요!!!!

1. 다시 한 번 말합니다. float2 (0.0 , 0.0) 의 앞자리가 U 이고, 뒷자리가 V 입니다. 지금은 둘다 0.0 이네요. [본문으로]
2. float2(0.0, 0.0) +0.2 = float2(0.2, 0.2) 가 아니라 float2(0.2, 0.2) = float2(0.0, 0.0) +0.2 입니다. 프로그램에서는 우리가 수학시간에서 배웠던 것과 달리, 답이 왼쪽에 있습니다! [본문으로]
3. U,V 는 X,Y에 대응된다고 했잖아요? X가 가로니까 Y는 세로겠지요? [본문으로]
4. 두 자리 넣었으니 float2를 뱉겠다고 Vector 의 공 아이콘이 보라색으로 변한 꼼꼼한 디테일 보세요. [본문으로]
5. 블렌딩. 사실 블렌딩이라고 하면 맞지 않습니다. 그래픽 디자이너분들의 용어로는 "보까시" 해준다 라던가"그라디에이션" 해준다 정도가 통용되는 말이겠지요. 그렇지만 프로그래머의 용어로 이걸 말하려면 "인터폴레이션 해준다" 또는 "보간해준다" 라고 하는 것이 좋습니다. 구체적으로 말하면 리니어 인터폴레이션 (Liniar Interpolation) 이지요. 혹은 이걸 번역해서 '선형 보간' 이라고도 합니다. 참 다르고도 신기한 그래픽 디자이너들과 프로그래머들의 용어의 세계입니다. :) [본문으로]
6. 설마 이젠 이런 것 정도는 설명 안해도 아시겠죠??? 이 텍스쳐는 ShaderFX를 설치하면 기본으로 들어 있는 것이 또한 마음에 드는 점입니다. [본문으로]
7. 뭐해요! 찾아봐요 어서!!! [본문으로]
8. MathOperator를 선택하고 오른쪽 메뉴에 보면 덧셈으로 바꿀 수 있지요..? [본문으로]
9. 재미있는 것 하나 알려 드리지요. 이렇게 만들어 놓은 물 오브젝트를, 1. 맥스에 가서 메터리얼 에디터를 열고, 2. 슬롯을 하나 빈 것 선택한 다음에, 3. 메터리얼 에디터에 있는 스포이드 아이콘을 찍어서 지금 만든 물 오브젝트를 찍어보세요!!! 신기한 일이 벌어질겁니다!!! 뭔지는 안가르쳐 드려요!!! [본문으로]