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

안녕하십니까 남들은 조낸 멋진거 막막 쓰고 인기높고 막 그러는데
저만 괜히 정말 아무것도 모르는 초보를 위한다고 너무 수준낮게 쓰느라
팀블로그 그래픽 반의 질을 떨어뜨리는건 아닐까 하고 걱정하고 있는 대마왕J 입니다.

나... 나도 쓸꺼야! 실버치매님처럼 멋진 글을!!!!





근데 생각해 보니까 하지만 난 어차피 수준이 초딩이잖아?
컨트롤 C+V 밖에 못하는

그러니 닥치고 저는 이 사이트의 낮은 레벨을 담당하는 것이 낫습니다.




시작합니다. 이히히 ~
==================================================================================================


1. 텍스쳐를 넣어 봅시다.

자 드디어 텍스쳐를 넣을 시간입니다! 텍스쳐를 넣는 것도 지극히 간단하지요.
아까 만든 것처럼 빈 화면에서 오른쪽 클릭을 해서 Maps로 간 다음,
이번엔 Color가 아니라 TextureMap을 선택합니다.

텍스쳐를 넣어야 하니까, 당연한 선택이겠지요?

자, 이렇게 TextureMap이 생겨났습니다.
아직 아무 그림도 없지요.

역시 이 것을 선택하면, 오른쪽에 인터페이스가 좌아악 펼쳐집니다...
이 옵션들은 사실 굉장히 기능이 많습니다. 각종 시멘틱(Semantic) 설정에, 텍스쳐 UV 채널, 샘플러 셋팅, 밉맵의 개수, 심지어 감마 코렉션(Gamma correction) 을 위한 기능까지 들어 있습니다.
간편하게 다루는 툴인데 비해, 상당히 많은 기능이 들어 있지요.

뭐 그치만 그딴건 아직 안봅니다. 신경쓰지 마세요

어쨌건 텍스쳐를 하나 넣어 봅시다.
아래 그림처럼, UI Name 아래 있는 버튼을 눌러 볼까요.

저는 D_grass.dds 라고 하는 풀 그림이 그려진 그림을 선택했습니다. ^[각주:1]
드디어 그림이 보이는 군요.

자, 이제 이 TextureMap을 왼쪽의 셰이더 루트의 Ambient Color에 연결해 주면 될텐데...
아까 칼라를 연결할 때에는 하나밖에 없었는데, 이젠 다양한 색깔로 여러 종류가 있습니다. 분홍색의 RGBA , 녹색의 RGB, 그리고 파랑색의 R,G,B,A ...

일단 결과를 보는게 급하지요! 답을 알려 드리겠습니다. 여기서는 색이 중요합니다! RGB라고 씌인 녹색 공과 Ambient color를 연결해 주세요! ^[각주:2]

그리고 이 쉐이더를 주전자와 연결시켜 주시면, ^[각주:3] 드디어 주전자에 텍스쳐가 입혀집니다!!!

축하드립니다. 드디어 텍스쳐를 연결하셨습니다. 이제 이곳 저곳에 연결해 보시고 끊어보시기도 하면서 가지고 놀아보세요. 잘 작동하는 것도 있고 잘 작동하지 않는 것도 있을 겁니다.

그리고 특히, 아래 그림의 이 부분을 제일 주목해 주세요.^[각주:4]
아래 그림의 붉은 박스 영역과 같이
RGBA 들이 같이 있기도 하고 , 떨어져 있기도 한 이 부분 말입니다.

우선 생각하기에 RGB 값이 연결되는 것은 당연하게 보이긴 합니다. 이미지는 보통 RGB로 구성되니까요.
하지만 알파가 포함된 RGBA , 그리고 r,g,b,a 가 각각 떨어져 있는 것도 있습니다.
이것을 어떻게 사용해야 할까요?

이걸 알기 위해서는 색상의 각 요소가 프로그램에서 어떻게 사용되는지를 알 필요가 있습니다.

2. Float 의 비밀

이전에 빨강 공을 만들때, float3라는 말을 언급했었지요?

자... 이게 무슨 소리인지 이제 알아볼 시간입니다. :)
원래대로 풀버전으로 설명하면 칼라의 bit 부터 시작해서 너무 길어지므로 최대한 축약해 보도록 하겠습니다.
풀버전 설명은 다음기회에 따로 준비하도록 하지요. 오늘은 간략하게 간락하게 쉽게 쉽게 ...

우선, 컴퓨터 그래픽에서의 '색' 에 대해서 생각해 보도록 하지요.
학교 수업시간에 배운바에 의하면, TV나 모니터의 빛은 '가산혼합법' 이라고 해서, 다 더하면 하얗게 되는 색이라고 합니다.

이런 그림 기억나시죠? 빨강색 , 녹색, 파랑색이 있고, 이 세 가지의 색을 모두 더한 색은 흰색이고, 세 가지의 색이 전혀 없는 색은 검은 색이다 ... 라는 거 말이죠.

이거와는 반대로, 잉크로 인쇄하는건 달라서, 섞으면 섞을수록 어두워지고... 다 더해도 진짜 검은색이 사실 안나오기 때문에 검은색을 따로 추가하고 어쩌고 해서 CMYK^[각주:5]다 ... 라는거 말이죠.

네, 그렇지만 우리들의 모니터는 가산혼합법으로 이루어지는 녀석이라, 3가지의 색 (Red,Green,Blue) 이 모여서 더해지는 색 구조를 따르고 있습니다. 그리고 색을 모두 더하면 흰색이 되구요.

만일 빨강색이 있다면, 우리 그래픽 디자이너들이 익숙한 포토샵에서는 이렇게 보이겠지요?

빨강색을 선택했더니, (R,G,B) 가 (255,0,0) 이라고 합니다.
이건 그래픽 디자이너분들한테는 매우 익숙한 광경이지요.
그렇다면 흰색은 무엇이겠습니까?
흰 색은 RGB가 모두 최고 밝은 상태이므로 (255,255,255) 겠지요?

그렇다면 검은색은 ?
검은색은 RGB에 아무런 값도 없는 상태를 의미하니 (0,0,0) 일겁니다.

자, 그럼 회색일때 RGB 값은 어떤 값일까요?

... 네 그렇습니다. (128,128,128) 입니다. ^[각주:6]

이렇게, 우리는 일반적으로 0~255 까지의 수를 가지는 세 가지의 색(RGB) 의 조합으로 모든 색을 표현하고 있습니다.
이 때, R, G, B 라고 불리우는 각 색의 값을 '채널' 이라고 부릅니다. 즉 색을 만들기 위해서는 3개의 채널이 필요하고, 우리가 일반적으로 사용하는 채널당 8비트 이미지는 ^[각주:7] 0~255 까지의 값을 가진 R,G,B 채널들의 조합으로 만들어 진다는 것이지요.

자, 다시 한 번 정리해 봅시다. 채널당 8비트인 이미지에서 RGB 값은,

R G B
빨강색은 ------------ (255, 0, 0)
흰색은 -------------- (255, 255, 255)
검은색은 ------------ (0, 0, 0)
회색은 -------------- (128, 128, 128)

이란 말입니다. 이해가시겠지요?

근데 프로그래밍에서는 이런 숫자를 쓰지 않습니다. 그 이유에 대해서 제대로 쓰면 또 양이 많아지기 때문에, 간단히 말해서 '컴퓨터가 원래 그렇게 돌아가기 때문임' 이라고 우기도록 하겠습니다

이힝힝. 모, 몰라서 그러는 거 아니라능!! 믿어달라능!!!


프로그래밍에서는 그럼 색을 어떻게 쓸까요?
바로 포프 스승님 강의를 읽어보셨으면 알만한 내용인, "% 로 표시합니다" 라는 겁니다.
즉

R G B
빨강색은 ------------ (100%, 0%, 0%)
흰색은 -------------- (100%, 100%, 100%)
검은색은 ------------ (0%, 0%, 0%)
회색은 -------------- (50%, 50%, 50%)

라는 거지요.
그리고 다시 이것을 소숫점으로 나타내면 Float(부동소수점)^[각주:8] 이 되는데요.
그럼 이렇게 나타나게 됩니다.

R G B
빨강색은 ------------ (1, 0, 0)
흰색은 -------------- (1, 1, 1)
검은색은 ------------ (0, 0, 0)
회색은 -------------- (0.5, 0.5, 0.5)

즉, float 이란 부동소수점으로 표시한 채널을 의미하며, 이것이 RGB 일 경우에는 소수점 3개가 필요하니 float3 라고 표시하는 겁니다. 최종적으로는 이렇게 표시되겠지요.

R G B
빨강색은 ------------ float3 (1.0, 0.0, 0.0)
흰색은 -------------- float3 (1.0, 1.0, 1.0)
검은색은 ------------ float3 (0.0, 0.0, 0.0)
회색은 -------------- float3 (0.5, 0.5, 0.5)

그러므로 이 그림에서 float3란, '3개의 소수점으로 이루어진 값' 이라는 의미가 되는 겁니다.
그러면 아래 그림에서 Ambient Color로 넘어가는 값은 float3(1.0, 0.0, 0.0) 이라는게 이해 되시겠지요?

여기서 또 하나 재미있는 것은, float3의 값을 받는 Ambient color 도 녹색 박스라는 겁니다. 다시 말해서 float3만을 받을 수 있다는 말이지요. color 니까 당연하겠지요.

3. Float을 그림으로 보자

float3 는 float + float + float 3개가 모여서 만들어 졌다는걸 아시겠지요?

그럼 이 이미지가 슬슬 이해 되실 겁니다.
RGBA 란? A 란 '알파 채널' 을 의미하지요. 투명도를 나타내는 바로 그 값이 포함된것 말이지요.
투명도 역시 0~255 라는 단계를 가질 수 있습니다. 즉 RGB에다가 A 가 추가로 포함되어서, 투명도가 포함된 이미지를 의미한다는 말이지요. 그러므로 이건 float으로 나타내면? float+float+float+float 4개가 모여 4자리니까 float4 라고 말할 수 있겠지요? 아래처럼 말이지요.

R G B A
빨강색인데 불투명 ------------ float4 (1.0, 0.0, 0.0, 1.0)
빨강색인데 완전투명 ---------- float4 (1.0, 0.0, 0.0, 0.0)
빨강색인데 절반정도 투명 ---- - float4 (1.0, 0.0, 0.0, 0.5)

그렇다면 각각 떨어져 있는 R, G, B, A 의 단위는 무엇일까요?


.... 네 그렇습니다. 그냥 float이지요. 한 자리 소숫점 숫자일테니까요.
이런 식이란 말입니다.

빨강색인데 R채널 ------------ float (1.0)
빨강색인데 G채널 ------------ float (0.0)
빨강색인데 B채널 ------------ float (0.0)

이 부분이 가장 중요하면서 초반에 그래픽 디자이너분들이 가장 많이 포기하는 부분이므로 좀 더 자세하게 써 보겠습니다.

자, 익숙해 보이는 포토샵 화면입니다. 풀 그림이 있고요, 채널 탭이 보입니다.
알파 채널이 있다는 것도 보이시지요? 그리고 지금 '눈' 마크가 RGB가 켜 있어서, RGB채널이 모두 보이고 있는 상태라는 것도 알 수 있습니다.

자 이제 채널을 하나 하나 따로 따로 보겠습니다.

Red 채널입니다. Red 채널만 활성화 시키자, 그림이 흑백으로 변했습니다.
이미지를 잘 보시죠. 무슨 의미일까요?
이 이미지의 한 픽셀 한 픽셀은, float 값들을 의미합니다. Red 값의 강도만 0.0~1.0 사이로 나타내면 되기 때문에, 흑백으로 충분한 것입니다.

즉 흰색 점들은 float (1.0) 을 의미하고, 회색인 점들은 float(0.5)를 의미합니다. 검은색 점은? 당연히 float(0.0) 을 의미하겠지요. 각 점은 밝기에 따라, 다양한 한 자리의 소수점 값을 가지고 있습니다.

이번엔 녹색 채널입니다. 아까보다 밝아 보이죠? 당연합니다. 그림 전체가 녹색에 가깝기 때문에 녹색 값이 높은 겁니다. 그래서 녹색 채널만 보면 밝아 보이는 거구요

Blue 채널을 보니 좀 어둡습니다. 즉 이 이미지에는 파랑색이 별로 들어가 있지 않다는 얘기겠지요.

알파를 보겠습니다. 역시 다른 채널과 마찬가지로, 흑백으로 되어 있습니다.
또한 다른 채널과 완전히 마찬가지로, 0인 부분 (투명한 부분) 은 완전한 검은색으로 되어 있고, 1인 부분 (불투명한 부분) 은 흰색으로 되어 있으며, 0.5 (반만 투명한 부분) 은 흰색으로 되어 있습니다.

이렇게 4개의 채널을 봤습니다.

...무언가 발견하신 것이 있는지?
사실, R,G,B,A 내 개의 채널은 아무런 차이가 없습니다! 모두 똑같은 'float1' 구조를 가지고 있습니다!
모두 각 픽셀당 소수점 하나만을 가지는 숫자로 되어 있을 뿐입니다. 즉 언제건 Red와 Green을 바꿔도 상관없고 , Blue와 Alpha를 바꿔도 문제없이 정상 동작합니다. 단지 이미지의 색이 달라질 뿐이겠지요.

그래서 아래와 같이 , R,G,B,A가 각각 따로 동일하게 취급을 받을 수 있는 것입니다.
이것이 가장 중요한, 채널과 float에 대한 간략한 개념입니다. (말씀 드렸다시피, 풀버전은 나중에...)

4. Opacity를 만들자.

프로그래머들은 Opacity라고 하면 잘 못알아 듣습니다. Alpha나 Transparant 라고 하면 잘 알아 들어도...
어쨌건 여기까지 잘 하신 상태란 말입니다.

이제 Opacity에 값을 추가할 차례입니다.
잘 보세요. Opacity는 파란 색 값을 원하고 있습니다.

파란 색 값이란? float 값을 의미합니다. 한 자리의 숫자요. 위에서 말한.
하긴 투명도 결정하는데 RGB 세 채널은 필요없겠죠. 한 자리면 됩니다. 투명한 것은 '얼마나 투명하냐 ' 라는 한 자리의 수만 있으면 되니까요.

흔히 그래픽만 하시던 분들이 쉐이더를 공부할때 이 부분에서 혼동을 많이 하시는데, 3Dmax의 Opacity는 "흑백으로 된 RGB" 이미지를 따로 만들어서 Opacity에 넣지요. 이것은 그거랑 다릅니다. 그정도로 필요 없습니다.
사실 Opacity를 표현하기 위해서는 '채널 하나' 만으로도 충분하고, 그래서 알파 채널 하나만 있으면 투명도를 결정하는데 충분하게 사용할 수 있다는 말입니다.

자, 알파 채널 (A) 를 클릭해서 끌어내 봅니다. float 이 나오는 것을 알 수 있습니다!!

즉 지금 이 그림이 나오고 있는 것이지요?

이것을 Opacity 에다가 끌어 놓으면 되는 것입니다.

주의할 점은, float은 반드시 float에 넣어야 하고, float3는 반드시 float3에 넣어줘야 한다는 겁니다.
Opacity는 파란색 (float) 만을 받는 값이기 때문에, 반드시 float을 넣어줘야지,
여기다가 녹색 (RGB)데이터를 넣어봐야 들어가지도 않습니다.

자! 결과물이 드디어 나왔습니다. 원하던 모양이 나왔네요.^[각주:9] 이것이 채널을 사용하는 법입니다.
RGB 채널은 Ambient Color에 연결했고, A 채널은 Opacity에 연결했습니다.

이번 강의는 여기서 끝입니다 . 잘 하셨어요.
그런데 퀴즈가 하나 있어요... 이해하셨나 테스트!

만약 Opacity에 A 채널을 넣지 않고, B나 G, R 채널을 끌어다 놓아도 될까요?






정답은

됩니다!!! B 채널을 Opacity로 끌어다 놓았습니다.
Alpha 채널과 똑같은 float 이기 때문에 당연히 됩니다. 그것만 맞으면 뭐든지 들어간다니깐요.
지금 현재 B채널은 Ambient Color에서도 쓰이고 있고, Opacity 에도 쓰이고 있군요.

대신 투명도가...

이 이미지의 강도에 맞게 결정되었다는건 이해하시겠지요? 자, 놀랍지요? 이것이 기존에 그래픽 디자이너들이 잘 모르던, 채널의 속사정입니다. 가장 중요하면서, 가장 기초가 되는 바로 그 부분이지요.

각각의 채널은 동등한 구조의 float으로 구성되어 있고, 이게 단지 순서에 따라 Red냐 Green이냐 Blue냐 Alpha 이냐를 결정하고 있으며, 이걸 서로 섞어도 일단 서로 호환은 된다는 말입니다.

이걸 잘 이해하셨다면, 이제 오늘 강의는 진짜로 끝입니다. 다음부터 재미있어 지겠군요.

===================================================================================================

- 다음 시간에는, 쉐이더를 가지고 놀아보는 시간입니다. 산수야 놀자! 입니다.
모든 색의 채널이 0.0~1.0 사이의 숫자라는 것을 알았으니, 이것을 더하고 곱하고 가지고 놀아봅시다.

- 시간이 된다면, 조금 더 이미지를 조합해 봅시다. 재미있을겁니다.

1. 이 텍스쳐 파일은 ShaderFX를 설치하면 자동으로 깔리는 텍스쳐 중 하나입니다. 저는 C:Program FilesAutodesk3ds Max 2009maps 안에 있네요. [본문으로]
2. Ambient Color에만 연결하는게 지겨우신 분들은 Diffuse Color나 Self-illumination에도 연결해 보세요. 재미있는 변화가 일어날 겁니다. [본문으로]
3. 쉐이더와 주전자를 동시에 선택한 채, Tools / Assign Material to selection을 해주면 됩니다. [본문으로]
4. 어떻게 Texture Map 오브젝트가 저렇게 크게 보이게 할 수 있느냐고요? 마우스 휠을 굴려보세요. 확대, 축소가 됩니다. 마우스 가운데 버튼을 누른채 이동하면 패닝이 되구요. [본문으로]
5. Cyan, Magenta, Yellow, Black 을 의미합니다. [본문으로]
6. 사실, 모니터의 출력특성에 따른 색상보정으로 감마 코렉션(Gamma correction) 이라는게 적용되어서, 진짜 회색은 128,128,128 이 아닙니다만 여기서는 그 얘기를 무시하고 넘어가겠습니다. 분명 실버치매님이 써주실 거다에 한표. ㅋㅋㅋ [본문으로]
7. 채널당 8비트는 R,G,B 채널들이 각각 2의 8승 = 256 단계 로 이루어져 있다는 말입니다. 물론 채널당 다른 비트도 존재합니다. [본문으로]
8. 소수점이 있는 수를 표현할때 사용하는 방식이라고 생각하시면 편합니다. 물론 어느 정도 한계치가 있어서, 너무 큰 수나 너무 작은 수는 표현 불가능하지만 일반적인 셰이더 작업을 위해서는 충분하고 남습니다. [본문으로]
9. 참고로, 맥스 2012에서는 잘 나오지 않습니다. 현재 사용하고 있는 맥스는 2009 버전이며, 2010 버전에서도 잘 나오던걸로 기억합니다.. [본문으로]