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

어느덧 8강이 되었습니다. 벌써 UV도 깊게 다뤄 보시고!!! 색도 막 더해 보시고!!
UV가 흘러가게도 하셨습니다!!!

자 다시 정리해 볼까요.

일단 ShderFX를 다루기 위한 기초로, 기본 조작법을 익혔지요. 거기서 가장 중요한건, 여전히 0.0~1.0 사이로 끝나는 float 이라는 단위입니다. 여전히 중요하고, 앞으로도 중요할 겁니다.

그리고 노드를 연결하는 것과... 색을 숫자로 보는 법을 익혔지요.
지금도 색을 딱 보면 숫자가 딱! 하고 나와야 하는 거예요?!? 알겠지요?!? 딱~!

딱~!

그리고 드디어 UV 구조라는 걸 제대로 익혔구요, UV를 눈으로 보는 법도 배웠고 UV를 에니메이션 시키는 법도 익혔어요!!! 공부를 제대로 하셨다면, 1강때 설명한 것을 응용하여 지금까지 만든 쉐이더를 fx로 익스포트해서 친구에게 선물하실 수도 있겠지요!!


자 .. 그럼 이제, shader fx의 기본조작을 마치고, 중급조작 단계에 들어온거라고 할 수 있습니다.
중급조작에서는 이전 시간처럼 UV를 조작하고, 이미지를 다양하게 합성하게 되지요.
그리고 고급에서는...
고급에서는....
고급에서는....

알파 블렌딩과 라이트를 다룰 겁니다!!! 오메!! 어려워!!! 여기까지 과연 할 수 있을까!!!!

다 할 생각 해 보니까 아주 좋되는거야

자 .. 뭐 앞 일은 앞 일이고, 오늘은 그럼 오늘 일을 해 봐야죠.

오늘 할 일은 드디어 멀티 텍스쳐링입니다.텍스쳐를 섞는거죠.

0. 우선 개념을 설명해 볼까요.

포토샵 정도는 쉽게 다루실 수 있으실 겁니다 다들. 이 강의는 일단 그래픽 디자이너를 위한 강의 이니까요.
포토샵에서 일단 이 이미지를 보실까요.

네.. 이전 시간에 줄기차게 썼던 또 그 이미지입니다.
강의를 쉽게 하기 위해서 익숙한 그림을 쓰는거지, 결코 다른 이미지 찾기가 귀찮거나 힘들어서 이러는거 아닙니다. ^[각주:1]

어쨌건 이 이미지를 포토샵에서 채널 창과 함께 보면, 이렇게 생겼죠.

이게 무슨 의미입니까? RGB 채널은 지난번에 말했으니까 그런가부다.. 하시고,
알파를 보세요! 이 풀 그림은 사실 풀 모양으로 이미 '따져' 있고, 밖은 그냥 투명이라는 의미 아닙니까?

즉 이렇게 표현할 수도 있겠지요 .

네 ... 이 그림은 풀 모양으로 추출되어서 플로팅 되어 있는 이미지입니다.
포토샵을 오래 쓰신 분들은, 저 체크무늬가 '아무것도 없는 허공' 으로 보이신다는거 다들 알고 계실 겁니다.

특정 환자들에게만 투명하게 보이는 이미지.jpg

네, 알파 채널이 있는 이미지는 저런 느낌인 거지요.
다시 말해서, 저 이미지를 호랑이 이미지 위에 얹었을 때,^[각주:2]

이런 느낌으로 얹어질 테니까,

결국 이렇게 얹어지게 될 거란 말씀입니다. 아시겠지요?

오늘 해 볼 것이 이거입니다. 일명 리니어 인터폴레이션 (Linear interpolation) 이라고 하지요.
두 이미지를 섞을 때 주로 사용하는 법이지요.




1. 그러면 해 봅시다.

이번엔 plane 입니다. 하나 만듭시다. 주전자 만드는 것 만큼 쉽습니다.
모르시는 분은 주변에 물어보세요. 정말 별거 아닙니다.

거기다가 Tiger.bmp 를 맵핑으로 입혀 놓습니다.
이제 뭐 이거까지는 다 아시고 막 이러시잖아요.
진짜 이거 어떻게 하는거냐고 이 와중에 물어보시는 분 있으시면 때릴것임

때리러 오는 검은 삼연성

네 뭐 이 다음은 간단합니다.

여기다가 다른 이미지 한 장 겹치면 되는거지요.
그럼 일단 다른 텍스쳐 한 장 준비해 둡니다.
만만한 풀을 준비해 두지요.

엄청 만만한 풀 불러왔습니다.
저거 알파 채널 가지고 있는거, 다 아시지요? :)

자 이제 저 두 이미지를 "리니어 인터폴레이션" 해 봅시다.
그럼, 리니어 인터폴레이션 (일명 Lerp라고도 하죠) 노드를 불러 옵시다.

'계산' 계열일게 분명하니까 Math 아래에 있고,
MixLinearInterp 라고 씌여 있습니다. 다 쓰려면 다 쓰던가 ..... 뭐야 줄여쓰기는....

이걸 만들면 이렇게 생겼습니다.
제가 늘 칭찬하는게, 참 아이콘이 직관적으로 생겼어요 :)
뭔가 0 에서 1까지, 직선으로 그어져 있지요?

그리고 다시 잘 봅시다. 들어오는 값인 Input은 A와 B 두 개가 있습니다.
그리고 그 두 개를 '섞어주는' 인자인 Blend Value가 있습니다.

그리고 그 둘이 섞여서 나오는 결과값이 Result 라고 있습니다.

척 생각해 봐도, 두 개를 섞는 거니까 Input A 와 Input B의 단위는 서로 같아야 할 것 같습니다. float2 건 float3건 말이죠. 그리고 섞는 값인 Blend Value는, 지금은 뭐 아무 값이나 받을 수 있게 되어 있습니다만... 사실 float 을 넣어줄 일 밖에 없습니다. 섞는거야 한자리면 충분하니까요.

이게 또 재밌는게, 오른쪽 메뉴에서 옵션만 바꾸면 리니어 인터폴레이션(Linear Interpolation) 이 스무스 인터폴레이션 (Smooth interpolation) 으로 바뀐단 말입니다. 이건 나중에 Smoothstep 이라고도 불리는데, 언젠가는 쓸 일이 있을 겁니다. (SSS 할때 쓸지도... 후후후) 그치만 지금은 안쓸거니까 신경쓰지 말고 리니어 인터폴레이션만 쓰기로 하지요.



자.. 그럼 여기의 A와 B를 각각 호랑이와 풀로 만들어 줍시다.

그럼 어떻게 보이나요?

검게 보입니다!!!! 무언가 잘못된 것일까요????

이런 표정 지으신분은 베란다에서 5분간 손들다 오세요.

이젠 슬슬 눈치 채실때가 되었지용

Blend Value에 아무 값도 넣지 않았잖아요.

shader FX 가 너무 자동으로 잘 해 주다보니까, 당연하다는 듯이 오류가 안생길거라고 생각하실 수도 있는데
이런 뻔한 오류는 일으켜 주는게 맞습니다.

자 그럼 당황하지 마시고, 저 Blend Value 에다가 숫자 1을 넣어 주시지요. ^[각주:3]

오오, 드디어 풀이 나왔습니다!!!
아니 그런데 호랑이는 어디 간건가요?

호랑이를 보고 싶으시면, 저 Blend Value에 0을 넣어 보세요.

오옷 , 0을 넣으니까 이번엔 호랑이가 나왔습니다!!!!
뭔가 짐작이 가능하시죠?
1을 넣으니까 Input B에 넣었던 풀이 나왔고,
0을 넣으니까 Input A에 넣었던 호랑이가 나왔습니다!

그럼 퀴즈입니다. 숫자 0.5를 넣으면 뭐가 나올까요?

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

정답 공개합니다.

딱 절반이 섞였습니다!!!!!

이제 명확해졌습니다!!! 리니어 인터폴레이션(Linear Interpolation)은, 0~1 사이의 값으로 , 두 이미지를 섞어 주는 명령입니다!!!! 또 0~1 사이야!!!! 도대체 0~1 로 못하는 것이 뭘까요???? ^[각주:4]

그런 스토립니다.

자자자자자자자
그렇다면 봐요봐요봐요봐요봐요봐요

저 풀은 알파 채널을 가지고 있어요 그렇죠?

알파 채널은 float 이예요 그쵸?

float이란 0~1 사이의 한 자리의 숫자란 의미예요 그쵸?

뭔가 또 생각나지 않아요?

전부 다 스토리가 연결되어 있던 거예요. 믿을 수 없게도...

이 풀의 알파 채널을 다시 봅시다.

이게 투명도를 나타내는 '숫자 덩어리' 라고 말씀드렸잖아요. 아시겠지만 저는 친절하고 관대하므로 다시 한 번 자세히 설명드립니다.

관대합니다.

이 이미지를 확대해 보면 이렇게 되어 있죠.

이 한 픽셀 픽셀이 투명도를 나타내는 한 자리의 float 숫자라고 생각해 보세요.

흰색은 불투명도가 100% 이므로 1이고요
검은색은 완전히 투명하므로 0이고요
그 중간은 각각 그 % 에 맞는 색이겠지요.

즉 이 이미지들은 전부 한 픽셀 픽셀이 한 자리 소숫점 숫자란 말입니다.

여러 번 얘기했다는건 중요한 거예요 밑줄 좍 그으라고.


그러므로 이 숫자덩어리 알파 채널을 Blend Value 에 넣으면 어떻게 되겠습니까?

이렇게 된다고요

두 이미지가 블렌딩 된다고요

알파 채널의 픽셀이 흰색이면 1이니까 풀이 나오고, 알파 채널의 픽셀이 검은색이면 0이니까 호랑이가 나오고, 그 중간이면 그 중간이 나온다고요.

별 거 아니죠? :) 정말 쉽잖아요? 포토샵에서 레이어 올리는거 다 이렇게 동작하는 거예요. 똑같아요.


... 그치만 정말 별게 아닐까요?
여기서 부터 시작해서 응용되는게 장난이 아닌데???



2. 정말 별게 아닐까요?

제가 요즘 게임테크 강연 준비하느라 좀 바쁩니다 (후후후)
강의를 더 길게 하고 싶은데 이번주는 좀 짧게 해야 겠어요.
http://www.zdnet.co.kr/news/news_view.asp?artice_id=20120308090801


그래서 오늘은 특별히! 숙제를 내 드리겠습니다.
어렵지 않아요. 위의 것의 응용입니다.
응용을 보여 드릴테니, '왜 이렇게 되는지' 이해해 보세요.

그리고 실습해 보세요. 이게 숙제입니다.
이해도 못하고 그냥 따라만 하면 때릴 거예요!!!

숙제 다 했으면 댓글 써!!!!

숙제 다 한사람만!!!!

자 첫번째 이미지입니다.

풀이 멀티플라이 레이어처럼 어두워졌네요? 왜 그렇게 되었을까요?
그리고 또 이 어두운 정도를 조절할 수 있을까요?

풀이 이번엔 밝아졌네요? 무슨 일이 일어난 걸까요?
너무 밝은데 조금 어둡게 할 수는 없을까요? 이미지 수정 없이 말이죠.

엇 호랑이가 많아졌어요!!! 무슨 일이 일어 난 걸까요? 따라 하실 수 있으시겠어요????



3. 오늘은 일단 여기서 끝냅니다.

게임테크 2012 강연 참가하고 나면, 이번엔 유니티 부트캠프에 또 강연 참가... OTL
그래서 바쁩니다.

그치만 이거... 쉬워 보이는데
이거에서 발전하면 별별거 다 만듭니다.

예를 들어

이렇게 얼룩이 알파 채널로 따져 있는 이미지와

깨끗하고 작은 벽돌 이미지 하나만 있으면

이렇게 얼룩진 벽도 간단히 만들 수 있구요.

더 응용해서 다다다음 시간쯤 되어서 더 실력이 올라가면 말이죠

맥스에서 실시간으로 동작하는 맵에디터를 만들 수도 있어요


다음 시간에는 버텍스 칼라를 이용한 Liniar Interpolation을 해볼까... 하고 생각하고 있습니다.
자 그럼 오늘은 바빠서 이만 총총.

뿅

1. 믿어주세요 [본문으로]
2. 일단 모든 이미지는 shaderFX를 깔았을때 , 3Dmax 설치 폴더 아래의 map폴더에 자동으로 같이 깔리는 이미지를 사용하였습니다. 이 호랑이는 tiger.bmp 입니다. 깔려 있어요. [본문으로]
3. 숫자 넣는건 constant 라는거 잊지 않으셨죠? [본문으로]
4. 프로그래머들은 이 용어를 잘 알고 있습니다. 사운드건 인공지능이건, 두 값을 적절한 조건에 의해 섞어줘야 할 때 "그거 그냥 리니어로 섞어줘!!!!" 라고 말하면 다 알아 듣습니다. :) [본문으로]