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

우왕 - 벌써 9강이야 >_< /
라고 말씀드리고 싶지만 사실은
아직도 9강이야 ... 흑흑흑 입니다. 진도 언제나가 흑흑흑... 역시 설명을 쓸데없이 자세히 하는걸까... 흑흑흑...
뭐 어쨌건 게임테크 강연도 잘 끝났겠다. 일정이 빠듯하지만 빨리 다음 강의를 써야겠지요.

자... 그럼 또 오늘은 뭘 할까 얘기해 봅시다.

다들 아시겠지만 지금까지 이미지 합성을 주로 가지고 놀았습니다. 특히 채널을 가지고 놀았지요. 검은색은 0이고 흰색은 1이고 뭐 그런거지요. 그리고 거기서부터 모든게 시작되었다.. 뭐 그런 겁니다.

오늘은 여기에서 좀 더 진화된 내용을 하나 더 배워보도록 하지요. 지루하시다고요? 그래픽 디자이너 분들에게 익숙하지 않은 '색깔을 숫자로 바꾸는' 내용을 완전히 이해시키려면 반복이 최고라고요!

1. Vertex Color 그려보기

일단 배워 볼 것은, Vertex Color 입니다.

Vertex, 일명 '점' 은 많은 정보를 가지고 있습니다. 위치정보, UV 정보, 노말정보...

그리고 거기에 하나 더 해서 , float4의 '색' 도 가지고 있습니다. 오오오 , 자체적으로 RGBA도 가지고 있다는 말입니다 . 텍스쳐도 없이!!! ^[각주:1]

대충 이렇게 보입니다.

3d 그래픽 디자이너 분들이라면 뭐 쉽게 그리실 수 있으시리라 믿지만, 그렇지 않은 분들을 위해서 매우매우매우매우 귀찮지만, 이 대마왕께서 친히 vertex color를 그리는 법을 알려드려야 겠군요.

캬오

vertex color를 그리는 방법은 크게 두 가지가 있습니다.

우선 첫 번째 방법부터 알려드리지요.

플렌을 하나 만듭니다. 어떻게 만드냐고요? 이것까지는 건너뛸래요. 이젠 이정도는 만드실 수 있으시잖아요. 아닌가? 아니면 할 수 없죠. 옆의 사람한테 물어보세요. 이거 설명하기에는 시간이 아깝습니다. 우후후 ^[각주:2]

면 수는 조금 많은게 편합니다.

그리셨으면, 오른쪽 클릭하고, Convert To Editable Poly를 선택해서, Poly 오브젝트로 만들어줍니다. ^[각주:3]

Poly 오브젝트가 되었으면, 이번엔 오른쪽 메뉴에서 vertex 선택 모드를 켜 줍니다.
그럼 vertex들이 파랑색으로 보일겁니다.
화면의 일정 영역을 드래그해서, 원하는 만큼의 vertex를 선택하도록 합시다. ^[각주:4]

그럼 선택된 vertex는 빨강색이 됩니다.

이제 오른쪽 메뉴의 빈 구석을 마우스로 잘 뒤져보면, 빈 영역에서 마우스 아이콘이 손바닥으로 변하는 것을 볼 수 있습니다. 이 손바닥을 이용해서 메뉴를 위로 끌어 올리면, 'Edit Vertex Colors' 라는 메뉴가 보일겁니다.
color도 있고 alpha도 있네요.

자, 이제 color를 블랙으로 바꿔서, 선택된 vertex의 색을 검은 색으로 바꿔봅시다.

응? 분명히 바꿨는데 아무 일도 일어나지 않습니다???

아무 일도 일어나지 않았다면 정상입니다.

vertexcolor는 평소에 보이는 칼라가 아닙니다. vertex가 꽁꽁 숨겨서 가지고 있다가, 'vertexcolor를 보여줘라' 라는 명령이 있다던가 할 때에야 보여주는 녀석입니다.

믿어주세요.

그렇지만 우리는 지금 vertexcolor를 보고 싶습니다. 그렇다면 임시로 vertexcolor가 보이는 모드로 변환시키면 되지요.
아래 그림처럼, 다시 vertex 모드를 풀고 일반 오브젝트 모드로 돌아옵니다. ^[각주:5]

그 다음에 오브젝트를 오른쪽 클릭하고, Object Properties를 선택합니다.

Object Properties가 나오면, Vertex Channel Display를 체크해 주고 OK를 누릅니다.

VertexColor가 보입니다!!! 단 아까의 색은 다 없어지고, 지금은 vertexcolor만 보이게 됩니다. ^[각주:6]

자, 이제 vertex 모드를 켜고, vertex를 선택한 다음에 원하는 색으로 vertex를 물들여 보시기 바랍니다.^[각주:7]

vertex color가 아닌, 일반 텍스쳐 혹은 일반 오브젝트의 색을 보고 싶으시면, 다시 Properties에 가셔서 Vertex Channel Display를 꺼주시면 됩니다.

2. vertex color를 shaderFX로 써봅시다.

자, 위에서 vertex color를 그리는 법을 익혔습니다.

즉 vertex는 각각마다 개별의 color를 가질 수 있지만,
그 color는 평소에 보이는 것은 아닙니다. '보이게 해야' 보이는 겁니다.

...라는 얘기였죠.

그리고 Alpha도 있는 것으로 보아, float4 의 데이터를 가지고 있다는 것도 알 수 있습니다.
다시 말해서, 이 vertexcolor도 이전 시간에 배운 내용들과 같이 색상용으로, 혹은 마스킹 채널용으로 사용할 수 있다는 말입니다. 그럼 직접 해보도록 하지요.

자, 뭡니까? 뻔하죠? 지금까지 우리가 수없이 해왔던, Grass.dds 파일을 그냥 Texture로 해서 입혀놨을 뿐입니다!!!
아까 vertexcolor를 그렸던건, 하나도 보이지 않습니다!!!

당연하죠! 아까도 말했잖아요! 그냥은 보이지 않는게 정상이라니까요!! 분명히 vertex는 색상을 가지고 있습니다만, 안보이는게 기본이예요!!! ^[각주:8]

자, 이제 이걸 보이게 해 봅시다.

일단, vertex 에는 vertex color가 들어 있는 것을 알고 있으므로, 그 값을 입력받아와야 하니까, shaderFX의 빈 화면에서 오른쪽 클릭하고 Inputs / VertexColor를 받아옵시다.

이렇게 VertexColor를 쉽게 받아 왔습니다.

역시나 아이콘 참 좋아요. 점이 세 개 있고, 칼라가 그려져 있습니다. 훌륭하죠. 게다가 RGBA , float4로 이루어져 있는 것도 볼 수 있습니다. 이 녀석을 Texture 대신 연결하면, 당연하게도 이제 Vertex Color가 나옵니다!!!

즉, 텍스쳐와 vertex color를 곱하거나 더하거나 등등 해 주면, 아래와 같이 이제 텍스쳐와 함께도 나올 수 있다는 말입니다. 게임에서도 동일하게 사용 가능하죠.

요것이 대충 그린거긴 합니다만, 이 별거 아닌 기능을 만들어 놓고선 아티스트에게 쥐어주면, 갑자기 아트가 튀어나옵니다. 그게 아티스트들의 종특.

프로그래머들에게는 없는 '제약' 같은 것이 있기 때문에 오히려 '있는 것' 을 가지고 파 들어가는 능력이 특화된 것이 3D 그래픽 디자이너들입니다.

대충 생각해 봐도 이런데 쓸 수 있죠.

- 캐릭터 옷의 염색 등에 쓸 수 있습니다. 실제로 프리스타일이나 마비노기 (맞나..) 에서 사용되었죠
- 지형의 격자 단위가 모두 동일하다면, (동적 LOD가 일어나지 않는다면) 워포그로도 사용할 수 있습니다.
- 저사양을 목표로 하는 게임에서, 지형에 빛이나 그림자가 은은하게 먹은 느낌 등 색감을 풍부하게 주고 싶을 때 사용할 수도 있습니다.

위의 땅 그림에 vertexcolor가 사용되었습니다 물 아래는 녹색으로 칠하고, 나무 아래와 언덕에 음영처럼 보이는 것 모두가 vertex 칼라를 이용한 것입니다. 군데군데 밝은 것도 마찬가지고, 멀리 푸른 빛이 도는 땅도 vertexcolor로 칠한 겁니다.

그 외에도 사실, 안보이는 부분에서도 많이 사용할 수 있습니다.

- 간단한 RPG나 엑션 게임 등에서 지형의 속성을 정할때에도 사용할 수 있겠죠.
- 모바일 프로젝트처럼 가벼워야 하는 프로젝트에서는, 지형 텍스쳐 여러 장을 섞어줄 때 사용할 마스킹 텍스쳐 대신 사용할 수 있습니다.
- 기타 각종 마스킹에서도 응용할 수 있습니다.

그리고 장점 단점은 다음과 같습니다.

장점은, 무척 가격이 싼 기능이라는 겁니다. 텍스쳐가 들어가는 것도 아니고, UV가 필요한 것도 아니니까요.

단점은, vertex 간격이 조밀하지 않으면 매우 거칠게 보이며 , 어쨌건 텍스쳐로 그리는 것보다 덜 정밀하다는 것입니다. 채널 4개를 다 써버리면 더 쓸 수 없다는 것도 단점이구요.

3. 실시간 스플레팅 맵에디터를
만들어 봅시다.

자... 그럼 vertexcolor를 응용해서 실시간으로 동작하는 맵 에디터를 한번 만들어 볼까요?
좀 더 본격적으로 만들기 위해, 텍스쳐를 준비해 봤습니다. 나 잘했죠.

빨리 칭찬해줘요 하악하악

아래 텍스쳐를 받아서 써 보세요. 4개의 타일링 된 텍스쳐입니다.
출처는 무료 텍스쳐 사이트인 http://www.cgtextures.com 에서 가져온 겁니다.

     

이 네개의 타일링된 텍스쳐가 스플레팅으로 동작하는 맵에디터를 만들어 보도록 하겠습니다. vertex color를 그리는 방법은 위에 소개한 방법을 사용하시면 되겠습니다. ^[각주:9]

자, 일단, 이전에 만들었던 plane은 버리고, 새로 만들기로 하지요.
지금 막 만든 오브젝트니까, vertexcolor는 흰색일겁니다. 알파도 물론 1.0
float4(1.0, 1.0, 1.0, 1.0) 인 상태겠지요.

위에서 배운 방법대로, vertex color를 보이게 한 다음 모두 검은색으로 칠해줍니다.

그리고 다시 오브젝트 모드로 돌아옵니다. 이것이 기본.

역시 겉으로 보이는 것은 그대로입니다. 그렇지만 내부의 vertex color는 , float4(0,0,0, 1) 이 되어 있다는 걸 아실겁니다.^[각주:10]

이 부분은 매우 중요합니다. 흰 색으로 해 놓으면, RGB 값이 모두 1,1,1 이 되어서 마스킹 작업이 곤란하기 때문입니다.
...해보시면 알아요.

자 그럼 예제로 올려드린 첫번째 텍스쳐와 두 번째 텍스쳐를 불러 낸 다음, 첫 번째 텍스쳐만 보이게 해 줍니다.
Diffuse Color 에 연결해도 아무 문제 없습니다. 첫 번째 텍스쳐가 잘 나왔습니다.
그런데 두 번째 텍스쳐가 뭔가 뻘쭘해 보이는군요. 나 할 일 업ㅅ엉ㅋ

추가적인 노드가 두 개 더 필요합니다.
하나는 이번 시간에 배운,Input / Vertex Color 이구요
또 하나는 저번시간에 배운 Lerp, 즉 "리니어 인터폴레이션" Math / MaxLinierInterp 입니다.

후후후후 뭘 할지 짐작이 나시나요?
저번 시간 강의가 '조낸 쉽네' 하면서 그냥 슬쩍 읽기만 하신 분은 모르시겠지만,
사실은 지난 시간 강의가 이번 시간 강의를 위한 초석이었습니다!!! 밑밥이었구요!!! 낚시였습니다!!!

나는야 낚시왕

그렇습니다. 지난 강의에 나온 걸 그대로 하려고 하는 겁니다. 리니어 인터폴레이션을 이용한 텍스쳐 블렌딩 말이죠.

자.. 이걸로 이렇게 연결해 줍시다.
Lerp의 A소스와 B 소스는 텍스쳐 1과 2로, 그리고 Blend Value 에는 vertexcolor의 R 채널을 연결시켜 줍시다.
변화가 있습니까?
... 없다고요?

-생각해 보지요. 지금 저 Plane의 모든 버텍스는 무슨 색?
-검은색이죠?
-검은색이면 R채널은 몇?
-0.0 이죠? ^[각주:11]
-BlendValue에 0.0 이 들어가면 A 이미지가 나올까요 B 이미지가 나올까요? 당연히 A 이미지가 나오죠?

그래서 이렇게 해 놔도 변화가 없습니다. 네 변화가 없는게 당근 맞습니다 .

하지만, vertex를 선택해서, VertexColor를 빨강색으로 바꿔주면 어떨까?

넹, 빨간색이 출동하자, vertex color의 R 채널은 1이 되어 버리면서 두 번째 텍스쳐가 나오기 시작합니다!!! 오오오!!!
Opacity에 따라 서로 블렌딩도 조절할 수 있겠군요!!!

이걸 쉐이더 코드로 써 본다면...
FinalColor = lerp( InputA , InputB, VertexColor.r ) ;
이 한 줄로 처리할 수 있겠군요.. OTL 언제나 코드는 참 짧기도 하지..
언젠가는 유니티 쉐이더를 직접 짜보는 강좌를 할 수 있겠죠?

욕심이 생기니 다른 텍스쳐도 넣어 보고 싶습니다.
추가적인 텍스쳐와 노드를 추가해서 준비해 봅시다. 아래와 같이 말이죠^[각주:12]
추가된 것은 lerp 노드와 vertexcolor 노드, 그리고 새로운 추가 텍스쳐입니다.

그럼 이제 아까 나온 최종 결과를 다시 A에 넣고,
B 칼라는 새로 들어갈 풀 텍스쳐를 넣으며,
Blend Value는 vertexcolor의 g 채널을 연결해 놓는 겁니다.

이렇게 해 놓고, vertex color를 녹색으로 바꾸면!!!
그 부분에 풀 텍스쳐가 나오게 됩니다!!! 오오오!!!

그런데 사실, 위의 노드를 보면, 쓸데없이 vertex color를 두 번씩 입력받고 있습니다. 이건 낭비입니다! 비효율 코드예요!!! 만약 쉐이더 코드라면, 쓸 데 없이 vertex color를 두 번 호출하는 코드가 되었을 것입니다!!!

그래서 이렇게 바꿔줬습니다. 아까 한 번 받은게 있으니 거기서 G 값을 받아와서 쓰면 되잖아요.^[각주:13]
이렇게 하면 한 번 받은 vertexcolor의 R 값은 첫 번째 블렌딩에, G 값은 두 번째 블렌딩에 쓰게 되는 것을 알 수 있습니다. 조금 복잡해 보이지만 알뜰하죠.

팁 : 퀵 그룹을 써 봅시다.

잠깐 알려드릴 추가 기술이 있습니다.
슬슬 노드가 복잡해지기 시작하시죠? 원래 노드로 짜면 제일 큰 단점이 너무 보기가 힘들어진다는 것입니다.
때문에 좀만 복잡한 코드는 한 번 놓치면 끝장이예요.
그래서 이 복잡한 노드를 좀 더 가볍게 볼 수 있는 방법이 ... 더블클릭하면 노드가 작아지는 법이 일단 있군요.... 그거 말고요, 있습니다. 바로 퀵 그룹 (Quick Group)메뉴인데요.

일단 예를 들어 안건드릴 것 같은 노드들이 있다고 가정하면, 그걸 좌아악 선택합니다.

노드가 선택되었으면, Tools / Quick Group를 선택합니다.

선택한 노드들이 그룹이 되어서, 노드 하나로 압축되어 버립니다.
물론 다시 그룹을 풀 때에는 Quick Group 바로 아래에 있는 Un-Group 으로 풀어주면 됩니다.

덧: 이번 강의엔 별 필요 없습니다람쥐.

자 그럼 말 나온김에 B 채널까지.. 뭐 이젠 쉽겠죠. 결말로 급 전개입니다.
이렇게 만들면 됩니다. 세 번재 vertexcolor lerp입니다. 알아 보시겠죠?

이렇게 하면, vertexcolor를 파랗게 칠한 곳에는 네 번째 텍스쳐가 나오게 됩니다. 후후후후

A 채널까지 사용한다면, 무려 5개의 텍스쳐를 스플레팅으로 블렌딩 할 수 있는 거지요! 그래서 한 번에 처리할 수 있는 스플레팅 텍스쳐의 최대 장수는 5개입니다. ^[각주:14]

이렇게 해서 스플레팅의 기본은 끝내 봤습니다. 혹시나 원하시는 분을 위해서, 풀 버전의 노드를 다시 한 번 공개해 보도록 하겠습니다.

4. 숙제로 간지나는 텍스쳐 스플레팅 기능을 만들어 보기

강의가 사실 너무 길어져서 -_-;;; 여기서 줄이느라고 나머지는 숙제로 내 드리겠습니다.
오늘의 숙제는 두 개입니다!

첫 번째 숙제 : 위의 지형에서 텍스쳐 타일링 개수를 늘이고, 지형 높낮이를 만드세요.

간단한겁니다. 저 텍스쳐들은 지금 타일링이 가능한 텍스쳐라서 , 좀 더 지형처럼 텍스쳐가 나오게 할 수 있습니다. 입력받은 UV에 일정 숫자를 곱해서 타일링 시키던거 기억나시죠?

대충 노드는 아래 모양처럼 될 테고... 저저저번 시간 강의던가... 그때랑 연결시켜 응용하셔야 해요.

모양은 대충 아래처럼 나오겠죠.
UV를 각각 조절하게 만들면, 스플레팅 텍스쳐마다 개별로 조절할 수도 있겠죠.

두 번째 숙제: vertex paint 기능을 이용해서 진짜 맵에디터처럼 그려 보세요.

vertex paint 기능을 이용하면, 좀 더 그럴듯 하게 그릴 수 있습니다. 정말 부드럽게 브러쉬처럼 조절도 되고, 블렌딩도 훨씬 자연스러워 지며 , 보기에도 멋지게 됩니다.

이 부분은 max이므로 자세히 설명하지 않겠습니다. 이 강의는 그래픽 디자이너 분들을 위한 강의라서, 맥스의 조작방법은 매우 불친절하게 가르쳐 드린다는 것을 잊지 마시길.
어쨌건 모디파이어에서 vertex paint를 꺼낸 후,

그냥 vertexcolor를 그리기만 하면 상용 엔진의 맵에디터와 비슷한 느낌으로 맵을 제작할 수 있습니다. 슥슥슥슥. 타블렛펜을 이용하면 금상첨화.

그럼 뭐 이렇게 되는 겁니다. 해보세요 재밌습니다.

 

자 그럼, 오늘은 vertex color를 이용한 텍스쳐 스플레팅까지 해 보았습니다. 다음 시간엔 뭐할까나.. .뭐하지... 뭐하나...
에이 몰라. 다음 시간껀 다음에 생각할래요. 이미 너무 길어져서 귀찮!

유니티 컨퍼런스랑 NDC 준비도 해야 한단 말야!!!

2012/03/18 - [아트] - ShaderFX를 이용한, 그래픽 디자이너를 위한 기초 쉐이더 강좌 8강

2012/03/03 - [아트] - ShaderFX를 이용한, 그래픽 디자이너를 위한 기초 쉐이더 강좌 7강

2012/02/18 - [아트] - ShaderFX를 이용한, 그래픽 디자이너를 위한 기초 쉐이더 강좌 6강

2012/02/03 - [아트] - ShaderFX를 이용한, 그래픽 디자이너를 위한 기초 쉐이더 강좌 5강

2012/01/31 - [아트] - ShaderFX를 이용한, 그래픽 디자이너를 위한 기초 쉐이더 강좌 4강

2012/01/18 - [아트] - ShaderFX를 이용한, 그래픽 디자이너를 위한 기초 쉐이더 강좌 3강

2012/01/03 - [아트] - ShaderFX를 이용한, 그래픽 디자이너를 위한 기초 쉐이더 강좌 2강

2011/12/18 - [아트] - ShaderFX를 이용한, 그래픽 디자이너를 위한 기초 쉐이더 강좌 1강

 

1. vertex가 가지고 있는 , 즉 vertex가 가질 수 있는 정보가 뭐냐... 라는 것은 나중에 최적화 할 때 매우 중요한 정보가 됩니다. [본문으로]
2. 매우 불친절하게 알려드리자면... 오른쪽 메뉴에서 Create 탭에서 Plane을 누르고, 화면에서 드래그 하면 됩니다. [본문으로]
3. 프로그래머 분들을 위한 여담을 하자면, Poly라고 하는 구조는 맥스에서 만든 구조입니다. 삼각형이 아닌 다각형을 지원하는 구조지요. 물론 게임으로 컨버팅할때는 자동적으로 삼각형으로 다시 분할됩니다만, 맥스에서 모델링 할때에는 매우 편한 구조입니다. [본문으로]
4. 제 그림의 vertex가 유난히 크게 보이는 이유는, 보시기 쉽도록 설정에서 조정했기 때문입니다. 기본은 이렇게 안커요 ㅋ [본문으로]
5. 이건 굳이 안해도 되긴 합니다만.. [본문으로]
6. 우리는 아까 일부 vertex를 잡아서 검은색으로 칠했었습니다. 즉, 아무것도 손대지 않았을때의 기본 vertex color는 흰색이라는 것을 알 수 있습니다 . [본문으로]
7. 브러쉬로 편하게 그리는 또 하나 방법이 있습니다만, 이 방법도 뭐 그냥저냥 쓸데가 있는 방법입니다. [본문으로]
8. '왜 꼭 Ambient Color에 연결하냐' 라는 질문을 해주신 분이 계십니다. 이것은 별 이유 없습니다. 거기가 그냥 제일 빛 영향 안받고 텍스쳐가 잘보여서 넣는 것 뿐입니다 :) 여러분은 Diffuse에 넣으셔서 멋있게 보셔도 좋겠습니다. [본문으로]
9. 타블렛을 소지하신 그래픽 디자이너 분들은, vertexpaint 모디파이를 사용하시는 것도 좋겠습니다. [본문으로]
10. 마지막 1은 Alpha입니다. 우리는 color만 검은색으로 만들었잖아요? 이번 예제에서는 alpha는 번거러워서 안쓰렵니다 -_-;; [본문으로]
11. 그냥 0 이라고 해도 되구요. 0.0 이라고 쓰는 이유는 "이게 소숫점을 가질 수 있는 float " 이라는 의미로 주로 쓰는 겁니다. 왔다갔다 하곤 하죠. [본문으로]
12. 노드를 더블클릭하면 작아집니다! 노드를 선택하고 Ctrl+C 를 하면 노드가 복사됩니다!!! [본문으로]
13. 자, 슬슬 눈 돌아가시는 분들 생깁니다... [본문으로]
14. 지형을 만들때 일반적으로 5장까지 블렌딩을 제한하는 이유가 이것입니다. 만약 더 쓰게 되면, 2pass로 넘어가게 되어서 퍼포먼스에 안좋은 영향을 끼치기 때문이지요 [본문으로]