대충 살아가는 게임개발자

우왕 - 벌써 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를 그리는 법을 익혔습니다.

...라는 얘기였죠.

그리고 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에 따라 서로 블렌딩도 조절할 수 있겠군요!!!

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

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

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

 

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

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

 

 

 

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

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

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

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

 

 

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

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

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

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

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

 

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

 

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

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

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

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

 

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

 

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

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

 

겜브리오 4.0 ? 라이트스피드?

애증의 겜브리오 4.0 발표를 보고 왔습니다.
2010년에 회사가 접히고 그 회사를 한국 게임베이스가 사서 ...
여태까지 아무 소식도 없어서 소리소문없이 사라진거 아니냐라는 괴소문이 돌았던 적도 있었지요.



그렇게 몇 년 동안 아무 소식도 안들리던 겜브리오가, 이번에 4.0 이라는 이름을 걸고!
첫 세미나를 열었습니다!
3.2던가 3.4 에서 갑자기 4.0으로 올렸다는 것은...
메이저 넘버를 올렸다는 것은 뭔가 대단한 변화가 있었다는 의미겠지요. 그렇지 않고서 이렇게 넘버를 올리진 않았을 테니까 말이죠.


겸해서 저는 아틀란티카의 유지보수를 위해서 뭔가 힌트라도 없을까 하는 마음으로 가 봤습니다.


강연장의 파이프 오르간이 굉장하네요



재미있는건 겜브리오가 두 개의 버전으로 나눠졌다는 겁니다.
겜브리오 4.0과, 겜브리오 라이트 스피드 2012 라는 두 개의 엔진으로 나눠져서 만들어 지고 있다는 거지요.
여기서 중요한건, 과거형이 아닙니다. '만들어지고 있다' 라는 현재 진행형입니다.


겜브리오 4.0은 C++ 로 만들어 졌으며 , 좀 더 가벼운 엔진을 지향한다고 하고
라이트스피드 2012 는 C#으로 만들어졌으며, 좀 더 하드코어한 프로젝트의 엔진을 지향한다고 합니다.
하지만 둘의 결정적인 차이는 잘 모르겠더군요.  "두 엔진 개발팀의 취향이 다르다" 정도밖에.



강연 내용도 둘이 서로 중첩되는게 대부분이고 말입니다.
겜브리오 4.0 같은 경우는 기초 프레임웍만 두고 나머지는 전부 뒤엎었다는 것으로 보아,
내부에서 무슨 이유에서인가 두 개의 개발팀으로 나눠서 개발되고 있는 느낌이었습니다. 

예전 라이트 스피드가 초기에 나왔을 때, 너무 큰 변화와 함께 불안한 안정성으로 인해
기존의 겜브리오 사용자들한테 외면을 많이 당했던 것 때문에 그럴지도... 
 


 4.0과 라이트스피드 2012 이 동시에 발표되었습니다.
아참 출시는 3.0은 4월 경이고 라이트스피드2012는 올해 말이라는군요.



어쨌거나 여전히 툴은 조금 번잡하고, 섬세하지 못하며, 직관적이지도 않습니다.
아티스트들이 원하는 것이 뭔지 전혀 모르는 것 같은 느낌.
아티스트들은 물 수정을 하기 위해 '독립된, 탑뷰의 다른 인터페이스를 가진 ' 툴을 띄우길 원하지 않습니다.
아티스트들은, 게임 화면 안에서 유저의 시선으로 물이 어떻게 보이는지 보고 싶을 뿐입니다. 그 자리에서 보면서 아주 익숙한 인터페이스로 작업하고 싶어 하지요.


외국에서 온 강연자들은 그저 빈 툴을 띄워놓고서는 "유연하다, 빠르다, 직관적이다" 라고만 말하고 있네요.
기존의 유저들을 좀 더 휙 하고 잡으려면 좀 더 강력한 모습을 보여주면 좋았을텐데 말이죠. 아쉬웠습니다.


                                                   메터리얼 에디터라고 하기엔 좀 썰렁...



예제도 좀 부족하고 고급 효과는 디퍼드 렌더러와 일부 포스트 프로세스 적용된 것 외에는 특이한게 없었습니다.  
스카이박스는 이제 들어갔고... 킥스타트는 3.2 때부터이던가 자랑하던것이구요

OpenGL 지원여부도, 일주일전에 관련 개발자를 뽑았다고 하네요. 모바일 지원도 내년 말이나 가능하지 않을까 라는 예상을 하더군요. ㅠㅠ


                                                     곧 = 내년 말. (2년 후)

또한 "2.6을 사용하는 회사는 여전히 맥스 9만 익스포트 플러그인으로 지원하는데 그 이상을 지원해줄 계획은 없느냐"
에 대한 답변은 ,
2.6.03 을 사용하면 2010 까지는 지원하지만, 어쨌건 2.x 버전의 지원은 더이상 하지 않는다 라고 하네요. ㅠㅠ

                                           이것은 실버치매님의 고군분투기 제작사례!!!!

어느덧 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을 해볼까... 하고 생각하고 있습니다.
자 그럼 오늘은 바빠서 이만 총총.

뿅

내 손 안에 왠 계약서 사본이 (...)

 

하지만 인디오더를 한 나는 4-5개월을 기다리게 되겠지.

달우팀장님 작품 >_< /
겜 만들면서 만난 사운드 크리에이터중 가장 음악 잘 만드는 아저씨 >_< /

삼품 음악 너무 좋아요

아 이 음악이 오케스트라로 연주되는거 보고 싶다...

... 는 낚시고,

뭐 일단 뭔가 무료인건 맞긴 맞습니다 :)

현재, 4월 9일까지 안드로이드 / IOS 라이센스가 한정 무료입니다!!!

기본 유니티 무료버전 (밝은 회색 인터페이스) 는 안드로이드와 아이폰 라이센스가 없는 버전이고
추가로 안드로이드나 IOS의 라이센스를 구매해야 하는 방식인데요,
4월 8일까지 구매가 무료입니다!!

$800 을 절약할 수 있어요!

https://store.unity3d.com/index.html

에 가셔서,

원래 무료 버전인 유니티 무료 버전을 선택하시면
안드로이드와 IOS 버전을 추가로 무료로 선택할 수 있습니다.
그리고 카트에 넣고 체크아웃하면 끝!

평생 사용 버전입니다 !!!
회사에서 프로 버전을 쓰는 사람들이야 뭐 별 필요 없겠습니다만
그래도 혹시 알아요? 나중에 아이폰으로 인디게임 만들어서 팔지? ㅋ

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

 

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

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 벡터' 입니다.
근데 재미있는 것은, 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 를 하면 반대로도 움직이겠지요!
다양한 숫자를 넣어보시고 테스트 해 보십시오.

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

바로


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

쉐이더에서 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] 

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

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



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

PT 다 만들었다!!!! 이걸로 1년 우려먹어야지?!??! 벌써 잡혀있는 강연만 4개.... OTL