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

1. ShaderFX 메터리얼


자... 지금까지 배운 것들을 잠깐 정리해 보겠습니다.

a. 칼라 노드를 만들 수 있게
되었습니다.



원하는 칼라가 출력되는 노드를 만들 수 있게 되었습니다.

b. 텍스쳐 노드를 만들 수
있게 되었습니다.

사실 정식으로 쉐이더 코드를 짜려면, 텍스쳐 샘플러를 선언하고, UV 를 버텍스 쉐이더에서부터 받아서 픽셀 쉐이더로 넘겨오는 과정부터 거쳐야 하지만, 맨 첫 강의때 말했듯 이건 그래픽 디자이너를 위한 강의이므로 '일단 간지나게 만들고 공부는 나중에 한다' 라는 구조로 진행합니다 후후후
그러므로 여러분은 텍스쳐 노드를 만들 수 있게 되었습니다.

c. 텍스쳐 노드의 채널을 따로 따로 다룰 수 있게 되었습니다.



RGBA로 이루어진 텍스쳐 채널 구조를 배우게 되었습니다. 각각은 float으로 이루어진 상수이고, 이것들이 모여서 칼라와 투명도를 정합니다. 그리고 따로 사용할 수도 있습니다.

d.상수를 만들 수 있게 되었습니다.



상수, 별 거 아닙니다. 그냥 숫자입니다. 1+1 같은 공식에서 1이 상수란 말입니다. 여기서는 float 이라고 해도 문제 없겠지요. 어차피 보통 소숫점을 쓰니까요.

e. 연산자를 만들 수 있게 되었습니다.



사칙연산이 가능하게 되었습니다. 이것도 별 거 아니죠. 1+1 에서 +를 만들 수 있게 되었다는 건데... 물론 곱하기나 빼기 등도 만들 수 있게 되었습니다. 거의 사용하지는 않지만 나누기 부호도 만들 수 있게 되었구요.

f. 이 출력물들을 연결할 수 있게
되었습니다 .


이 출력물 노드들을 이리 얽히고 저리 얽히게 만들어서 출력할 수 있게 되었습니다. 그리고 Ambient Color에 연결할 수 있게 되었습니다. (여태까지 Ambient Color에만 연결하신 분은 없으시겠지만)

생각보다 꽤 많은 것을 했네요!

지겨우셨을지도 모르지만, 사실 위 내용은 ShaderFX를 다루기 위한 기본 조작 같은 것입니다. 이제 여기에 함수가 추가되면 재미있는 기능이 발현되게 되지요. 그 때부터는 본격적 실습입니다 실습 !

그러기 위해서 오늘은 ... 배운것을 총 정리하는 겸 해서
ShaderFX 메터리얼을 배워보도록 합시다!
별 거 아닙니다. 이 왼쪽에 있는 진짜 루트 노드 말예요 이거.

여기에 연결하는거 배워보도록 하자는 거지요.
겸해서 라이팅에 대한 기본적인 지식을 쬐끔 배워보는 시간을 가지도록 하겠습니다.

제대로 배우시고 싶다고요? 제대로 배우려면 하나당 한 번의 강의로 해야 해요.
그러니 그건 나중에 , 라이팅을 직접 만들 때가 옵니다. 그 때 알려 드릴께요 .
그전에 실버치매님이 알려주시겠지





오늘 강의를 따라하면 드디어 이런 이미지를 만들 수 있게 됩니다.
그런대로 볼만하지요?

2. Diffuse Color 연결하기

Diffuse Color는, 확산광 (擴散光) 이라고도 불리며^[각주:1] , 복잡하게 설명하면 어려워지지만, 간단하게 이렇게 생각하면 일단 편합니다.

"빛 때문에 밝고 어두워지는 색깔"

나중에 자세히 말하겠지만, Diffuse Color에서 가장 밝은 부분은 1이고, 가장 어두운 부분은 0입니다. 당연하게도 중간쯤 밝은 부분은 0.5겠지요.^[각주:2]
그리고 이 값이 텍스쳐에 곱셈 연산이 됩니다. 즉 가장 밝은 부분은 텍스쳐의 고유한 색상이 되고, 가장 어두운 부분은 검은색이 되는 거지요.

그러므로, 아래 그림처럼 텍스쳐 노드를 만들고, RGB 채널을 Diffuse Color에 연결해 주면 그것으로 끝입니다.
빛의 밝고 어두움에 따라 음영이 지는 주전자를 볼 수 있습니다.
D_cobblestone.dds 를 적용하였습니다.^[각주:3]

2. Ambient Color 만들어 연결하기

지금 당장 책상 아래를 보세요. 빛이 전혀 닿지 않는 곳임에도 불구하고 새카맣지 않고, 어스름히 보입니다.
그렇지 않습니까? 이것은 무엇 때문일까요?

이 세상에는 많은 물체가 있고, 그 물체들은 태양으로부터 나온 빛을 받아 반사하거나 , 흡수하고 있습니다. 때문에 빛이 직접 닿지 않는 곳이라 하더라도 새카맣게 보이는 경우는 없지요.

이 계산을 실제로 한다면 엄청나게 복잡할 수 밖에 없습니다 .때문에 이런 '환경 반사광' 을 직접 계산하지 않고, 단순히 칼라를 더해 (+) 줌으로써 이를 흉내내 주곤 하지요. 이것이 환경광 (Ambient light) 입니다.

이 빛은 방향성도 없고, 그냥 전체 화면에 일정 색을 더해주는 것 뿐입니다. 이것은 어떤 환경이냐 따라 다양한 색을 가지는데요. 쉽게 말해서 석양이 질 때는 붉은 계열 색을, 맑은 날에는 푸른 계열의 색을 쓰는 것이 일반적입니다.

아주 맑은 날은 건물의 어두운 부분이 하늘색입니다. 이것이 Ambient light.
자, 이렇게 Ambient Color에는 그냥 단색 칼라를 연결해 주도록 합시다.^[각주:4]

잘 보이게 하기 위해서 조금 강하게 넣었습니다. 조금만 밝아도 화면 전체가 밝아지니, 아주 어두운 색을 조심스럽게 쓰는 것이 요령입니다. 칼라를 조절하고 Set 버튼 누르는 것을 잊지마세요.



3. Specular Color 만들어 연결하기
Specular Color는 정반사 (正反射 : Specular Reflection) 의 색상을 의미합니다. 이것은 광원으로부터 나온 빛이 바로 반사하여 시야에 들어오는 '하이라이트' 를 의미하는데요.
자세한 내용은 실버치매님의 글 http://gamedevforever.com/17 을 읽어보시면 되겠습니다.^[각주:5]

여기서는 그냥 색을 넣어주기만 하면 가동됩니다.
일반적으로 아무 생각 없을 때에는 흰 색을 넣는데요. 실버치매님의 글을 읽어보시면 사실 이렇게 간단한게 아니라는걸 아실 수 있으실 겁니다 .

그래도 우리는 초보니까 흰 색을 넣지요 헤헷.

간단하게 Specular 라이팅이 활성화 되면서, 칼라도 들어갔습니다. 물론 흰색은 좀 이상하지요. 원하시는 색으로 바꾸셔도 무방합니다. 정렬의 빨강색이라던가
심지어, float3가 들어가니까 RGB텍스쳐를 따로 만들어 적용하는 것도 가능합니다.^[각주:6]



4. Specular Level 연결하여 조정하기

이제 그 아래 있는 Specular level입니다. 이것은 스페큘러의 강도 같은 것을 결정하는건데요, float 하나가 들어간다는 것을 알 수 있습니다. 즉 0~1 사이의 값으로 강도를 조절한다는 거지요.
물론 상수를 하나 만들어서 저기다 연결해도 잘 작동합니다만...

자, 지금 더 돌 재질을 잘 보세요. 무슨 느낌인가요? 마치 덕수궁 돌벽같은 느낌이 아닌가요? 돌이 튀어나와있고 돌들 사이에 시멘트로 매워진 벽 느낌이요.
여기서는 그래서 돌 재질이 있는 부분만 반짝이고, 경계선 부분은 반짝이지 않게 하려면 어떻게 해야 할까요?
뭔가... 마스킹이 있어야 하겠지요? 돌 부분은 살리고 경계선은 죽이는.. 그런 이미지가 필요할겁니다.
그리고 그 마스킹 이미지가 이미 있습니다.

Diffuse Texture 로 사용했던 이미지의 Display Alpha 옵션을 켜보세요. 이건 이 이미지의 알파 채널이 있다면, 그 알파 채널이 어떻게 생겼나 보여주는 겁니다.

그걸 켜 보니까 이미지가 바뀝니다! 흑백의 알파 채널 이미지가 나옵니다.
네, 이 이미지는 알파 채널을 가지고 있었던 겁니다. 그것도 저런 모양으로.
마스킹으로 쓰기에 딱 좋은 이미지로 보입니다.

이전에도 누차 말씀드렸지만, 알파 채널에 그림이 있다고 전부 투명도는 아닙니다. 그 채널을 'Opacity' 에 연결했을때 투명도가 되는거지, 아무 짓도 하지 않으면 어떤 채널에 있는 이미지건 그냥 float 덩어리일 뿐이란 말씀입니다.

이 오브젝트는 투명도가 필요 없습니다. 즉 이미지의 알파 채널은 어차피 쓰지 않는단 말이지요.
그래서 우리는 이 알파 채널을 Spacular level로 쓰기로 결심하였습니다. 이어줍시다.^[각주:7]

연결했습니다 . Specular 영역이 잘 보이도록 Specular Color를 빨강으로 바꿔 보았습니다. 어떻게 보입니까?
돌이 있는 부분은 Specular 가 강하게 들어갔고, 돌이 없는 사이의 부분은 매우 약하게 들어갔다는 것을 볼 수 있습니다.
마스킹 이미지도 보시면, 밝은 부분이 아주 흰 색이 아니고 어두운 부분이 아주 검은 색도 아닙니다.
그래서 이렇게 적절한 강도로 들어간 것입니다. 위에 소개한 실버치매님의 글을 읽어 보신분은 아시겠지만, 완전히 Specular가 없는 물체는 없는 법이니까요. 오히려 이게 더 자연스럽다고 할 수 있겠습니다.




5. Glossiness 연결하여 조정하기
Glossiness는 Specular의 퍼짐 정도를 조절하는 메뉴입니다. 둔탁한 오브젝트일수록 Specular가 퍼질 것이고, 유리나 잘 닦은 당구공처럼 매끄러운 오브젝트일수록 Specular가 강하고 얇게 맺힐 것입니다. 이걸 조절하는 겁니다.

이건 단순하게 상수로 조절해 주도록 하겠습니다.
굳이 이젠 설명할 필요도 없겠지요. 직접 비교해 보세요.

1일때에는 넓게 퍼집니다.

10 정도 되니까 좀 줄어드는 군요.

100 정도 되니까 더 작아졌습니다.

물론 이것도 float이기 때문에 아까 Specular level에서 사용한 Alpha 채널을 마스킹으로 이용할 수 있겠습니다만, 그냥은 못쓰고 * 10 정도를 해 줘야 조금 쓸만할 겁니다. 그치만 여기서는 해도 잘 안보일것 같아서 넘어가도록 하지요. 다음에도 할 기회는 충분합니다.

자 이제 값을 20정도로 하고 Speculat Color도 다시 흰 색으로 만들었습니다.





6. Self - Illumination 만들어 연결하기
Self-illumination (자기 발광 自己發光) 은 스스로 빛나는 효과 같은 것을 만들때 사용됩니다. 스스로 빛을 내는 발광체 표현을 할 때 주로 사용되지요. Diffuse Color의 음영값과 상관없이 자신의 칼라가 언제나 나타나게 되는 특징이 있습니다.^[각주:8] 셰이더 프로그래밍에서는 Self-illumination이란 말을 거의 쓰지 않고, Emission 이라는 말을 주로 사용합니다


사실 이번엔 안 쓸 재질이지만, 특별히 시험삼아 잠시 텍스쳐를 넣어 보았습니다.
caustics_001.bmp 가 적절해 보이는군요.^[각주:9]

뭔가 빛나는 것처럼 보입니다.

시험삼아 넣어본 것이니, 삭제하도록 하겠습니다.





7. Normal map 넣어보기
네에 Normalmap입니다. 뭔가 마법의 텍스쳐같은 Normal맵이죠. 분명 폴리곤이 없는데도 막 울퉁불퉁해지는!!!
그 이유 같은건 역시 나중에 알아보고, 일단 넣어보도록 해보겠습니다.

노말맵을 만들 때에는 일반 텍스쳐처럼 만들면 안됩니다.
빈 화면에서 오른쪽클릭을 하고 Maps/NormalMap을 선택합시다.

일반 텍스쳐를 선택하면 안됩니다. 노말맵은 -1.0~ 1.0 사이의 값이 필요해서, 그냥 텍스쳐 영역을 쓰면 안되거든요.^[각주:10]

그리고 여기에 N_cobblestone_ati.dds 를 넣어주겠습니다.
잘 나옵니다

...Opacity는 안넣겠습니다. 뭐 다 알잖아요?

오늘은 이렇게 메터리얼에 값 넣는 것을 해 보았습니다. 중간에 연산자 같은거 넣고 막 이러면... 복잡하게 할 수 있어 보이죠? 앞으로 하다보면 다 하게 됩니다. 힘내세요!

다음 시간에는 뭘 할까요? 이런걸 생각하고 있긴 한데..
- Lerp로 텍스쳐 섞기
- 큐브맵 사용해 보기

1. 난반사광 이라고도 불리며, 산광이라고 불리는 등, 여러 가지 용어로 불리우고 있습니다. 그냥 Diffuse light 라고 부르는 것이 나을 것 같습니다. [본문으로]
2. 추후에 이 계산을 직접 수식으로 만들어 보게 됩니다. 그 때 더 자세히 알아보도록 하지요. [본문으로]
3. 빛을 직접 설치하고 싶으신 분은, Directional light 하나를 설치해 보십시오. 여러 개도 가능하지만, 현재 설정으로는 한 개의 Directional light 밖에 적용되지 않습니다. [본문으로]
4. 물론, IBL 이나 Ambient Cube 등의 발전된 기법들도 사용됩니다만 아직도 많은 게임들은 단순한 Ambient Color를 쓰는 경우가 많으므로 우리도 그렇게 하는 것이 아무런 문제가 되지 않을것입니다. [본문으로]
5. 저는 이거보다 더 잘 쓸 자신이 없어서요. 데헷. [본문으로]
6. 텍스쳐가 한 장 더 필요하게 되므로 리소스도 사용하게 되고 만들기도 귀찮은 작업이 되지만, 최신 게임에서는 실제로 이렇게 만들어서 적용하고 있습니다. 당장 여러분의 다음 프로젝트에서도 쓸 지도 모르지요! 아니면 이미 쓰고 있다던가!!! [본문으로]
7. 실무에서도 엄청나게 많이 쓰이는 요령입니다. 텍스쳐는 무조건 아껴야 하거든요. 남는 채널이 있으면 무언가의 마스크로 꼭 쓰도록 합시다. [본문으로]
8. 뭔가 거창해 보입니다만, 사실은 Ambient와 다른게 하나도 없는 녀석입니다. Self - illumination에 넣지 않고 Ambient Color에 넣어도 완전히 똑같이 작동합니다. [본문으로]
9. 앗! 노드들이 어떻게 저렇게 작은 사이즈로 변했지요? 라고 생각하신다면, 노드를 더블클릭 해 보세요. :) [본문으로]
10. 뭐 지금부터 알 필요는 없지만.... 0.0~1.0 사이에 있는 값을 -1.0~1.0 으로 확장하는 법은 *2-1 을 해주면 됩니다. 이런 놀라운 (?) 공식을 '매직 넘버' 라고 합니다 :) [본문으로]