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

에라 모르겠다. 원래 3일이 발표날인데, 이미 두 개나 써놔서 그냥 오늘 올리겠습니다!!! 3일날 또 올라갑니다!!!
콱 일주일에 하나씩 써버릴까!!!!
-----------------------------------------------------------------------------------------------



밝힐 것이 있습니다.
사실 여기서 shaderFX를 강의하고, 이 강의가 자연스럽게 포프님의 쉐이더 강의로 이어지는 것이 목표였습니다.
포프님의 강의가 물론 매우 쉽다는 것 인정합니다만, 지금의 제 수준에는 그렇다는 거고...
제가 처음 쉐이더에 관심가지던 그래픽 디자이너였던 4-5년 전에는 그 정도도 결코 쉬운게 아니었었다는거지요!!! 프로그램 몰라!! 어려워!!! 그게 뭐야!!! 이쁘지도 않은 영어 메모장으로 일을하다니 이 천한것들

그리고 나서 다시 유니티 쉐이더로 와서 ... 그래픽 디자이너들이 간단한 유니티 쉐이더 정도는 직접 코딩할 수 있게! 하는게 목표였는데... (겜브리오 쉐이더로 할까 하다가 , 겜브리오 쉐이더보다 유니티 쉐이더가 훨씬 쉽게 짤 수 있어서..)

한 3강 써보다 보니 이 속도로 쓰다간 원하는 걸 다 쓰려면 산 3-4 년 걸릴 것 같지 뭡니까 이히히히
그래서 걍 그냥 맘편하게 ShaderFX 만 집중해서 쓰기로 생각했습니다. 그래서 제목도 맨 앞에 'ShaderFX를 이용한' 이라고 붙였지요. 아무도 관심없었다는거 잘 알지만.
어쩐지 덕분에 게임개발 포에버 사이트에서는 제가 오래오래오래 글 쓸 것 같은 생각이 들긴 합니다만 ... ㅋ

하여간 그래서 오늘 강의 시작합니다.


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

1. Float을 산수로 가지고 놀자.

모든 색은 float3로 이루어질 수 있다고 저번 시간에 말씀드렸습니다. 그러니까 모든 그림의 한 픽셀 한 픽셀들은, 각각 float3의 색상 구조로 이루어져 있다는 거지요.

이렇게 모든 그림을 3자리 소숫점인 float3로 인식을 하는 '개념' 이 매우 중요합니다.
제가 강의를 해 본 결과에 의하면, 그래픽 디자이너에게 가장 부족한 개념이 이 부분이었거든요.

자 , 저번 시간의 약간의 복습입니다.
일단, 회색 주전자가 있네요. 만만한게 주전자죠. 넹.

2377579

자 , 이 주전자의 텍스쳐를 빨리 숫자로 생각해 보세요! 3,2,1 땡!





넹

float3(0.5,0.5,0.5) 일겁니다.^[각주:1]



여기까지는 쉽게 순간적으로 생각해 낼 수 있어요.
그럼 이제 다시 한 번, 약간의 산수를 해 봅시다. 색상은 잠깐 생각하지 마세요.




float3(0.5,0.5,0.5) 의 각각 요소에다가, 0.5 씩을 더하면 어떻게 될까요?
즉 float3(0.5,0.5,0.5) + float3(0.5,0.5,0.5) 라는 말이죠.



그래픽 디자이너라고 무시한다고 생각하실 수도 있겠지만 ...
아시잖아요. 우리같이 그림만 그리고 살아온 사람들은 가끔 돈계산도 깜빡깜빡 합니다. 으흐흐.
간단하지요?

float3(0.5,0.5,0.5) + float3(0.5,0.5,0.5) = float3(1.0,1.0,1.0) 입니다.
... 흰색이네요??!??

넹 , 수학적으로는 알겠고, 이번엔 잠깐 봉인해놨던 색으로 생각해 보지요.

float3(0.5,0.5,0.5) + float3(0.5,0.5,0.5) = float3(1.0,1.0,1.0) 이니까,
회색 에다가 회색 을 더하면 흰색이 된다.

라는 말씀이지요?
달리 말하자면,
'색끼리 더하면 값이 올라간다. 즉 밝아진다는 뜻이다' 라는 말이 됩니다.^[각주:2]

자 이제 그럼 이걸 직접 만들어서 증명해 봅시다.


2. ShaderFX로 연산해 보기


뭐 간단합니다. 회색 + 회색 이니까요. 만들어 봅시다.

일단 이 상태에서 시작합시다.

회색 칼라 노드를 하나 더 만듭시다. 빈 화면에서 오른클릭 -> Maps -> Color 를 선택하면 됩니다.^[각주:3]

그리고 색상은 회색으로 지정합시다. 회색 노드가 두 개가 되었습니다.

자 이젠 덧셈 기호가 필요합니다.
이게 셰이더 코딩으로 하면 그냥 A+B 하면 되는데, 노드 구조에서는 굳이 이것도 노드를 만들어줘야 합니다 .
이게 사실 좀 귀찮긴 한데 개념적으로만 보면 쉽긴 하죠. 익숙해지면 귀찮아요 ㅋㅋㅋ

다시 빈 화면에서 오른쪽 클릭해서 Math / MathOperator 를 만듭니다. 이게 연산자 노드예요.

연산 노드가 나왔습니다. 기본은 * 연산으로 되어 있습니다. 오른쪽 메뉴에서 + 로 바꿔줍시다. 그럼 오퍼레이터가 + 로 바뀝니다.

둘을 더해야 하니까, Input A 와 Input B 에다가 회색 노드를 연결시켜줍니다.
그리고 결과물을 Ambient Color 에 연결해 줍니다.

자, 개념이 쉽게 잡히지요? 두 회색을 더한 겁니다. 즉 float3(0.5,0.5,0.5) + float3(0.5,0.5,0.5) 를 만들었고, 결과물을 Ambient Color로 연결한거지요.

자, 결과물이 나왔습니다. 흰색입니다. float3(1.0,1.0,1.0) 이 나왔지요.


만약 이걸 곱하기 (*) 로 바꾸면 어떻게 될까요?



자, 이렇게 나옵니다. 이제 쉽게 예상하실 수 있으시겠지요?
float3(0.5,0.5,0.5) * float3(0.5,0.5,0.5) = float3(0.25,0.25,0.25) 지요.
소수점 숫자들끼리 곱하기를 하면 숫자가 더 작아집니다. 그러니까 더 어두워진다는 거지요!

자 더 어두워졌지요? 배경이 꽤 새까맣기 때문에 그렇게 안보이지만, 회색보다는 더 어두운 회색이 되었습니다.
이것은 포토샵에서의 레이어 모드 중, Multiply 랑 똑같습니다!!^[각주:4]

알면 재밌습니다.

셰이더 연산을 할 때에는 위에서 본 것과 같이 덧셈과 곱셈 연산을 주로 쓰고, 뺄셈은 가끔 쓰고, 나눗셈은 거의 안쓰다시피 합니다. (2로 나누나 0.5를 곱하나...)^[각주:5] 뭐 그래도 다른 것도 한 번 해보시고 이해해 보시면 더 좋겠지요?

숙제가 있습니다. 흑백으로만 하면 재미없으니까, 칼라를 가지고 놀아보세요. 빨강 (1.0, 0.0, 0.0) 과 파랑 (0.0,1.0, 0.0) 을 각각 더해보거나 곱해보면 무슨 일이 생길까요? 그리고 왜 그런 결과가 나올까요?

3. 상수 추가하기

미리 얘기했듯 저는 정말로 쉬운 강의입니다.
어려운 예제같은건 안해요 우후후
어려운 예제하면 내가 힘들걸랑

그러니깐 이번엔 위의 예제랑 똑같은거 하나 또 만들어 봅시다.

지금 위의 연산은 이런거였죠?
float3(0.5,0.5,0.5) + float3(0.5,0.5,0.5)
다행히 위의 그림은 단색입니다. 즉, 어떤 부분의 픽셀을 선택하더라도 전부
float3(0.5,0.5,0.5) + float3(0.5,0.5,0.5)
라는 거지요.



복잡한 이미지의 칼라라면, 픽셀마다 색이 다르겠지만 저 단색 칼라는 어딜 찍어도 float3(0.5,0.5,0.5) 입니다.





그러니까.






요런것도 가능해져요.

float3(0.5,0.5,0.5) + 0.5

이것도 똑같은 결과가 나오게 됩니다.
뭐 일단 해볼까요?
일단 아래 그림에서 시작해 봅시다.

두 노드 중 하나를 지워보고, 하나를 숫자로 (상수로) 바꿔봅시다.
일단 노드 하나를 선택해서 DEL 키를 눌러 지웁니다.

지우고 나면, Input B 가 비지만, 위 그림의 오른쪽 화살표를 보면 기본값이 1.0이 들어가고 있다는 것을 알 수 있습니다.^[각주:6]
자 이것 말고, 상수 노드를 따로 만들어서 추가해 봅시다.

위 그림처럼, Maps/Constant 를 추가해 봅시다. 이게 상수입니다.

이제 조금 익숙해졌을테니, 조금 빨리 진행해 보지요. Constant 노드를 만들면, float 이 빠져나오는 것을 알 수 있습니다. 한 자리 숫자지요. 그리고 이 숫자는 오른쪽 메뉴에서 수정할 수 있습니다. 실시간으로요!!!
이걸 Input B 에 연결하면, float3(0.5,0.5,0.5) + 0.5 가 됩니다.

이제 이것이 float3(0.5,0.5,0.5) + 0.5 라는걸 아실 수 있으실 겁니다.

숫자를 바꿔 보시고, 곱셈으로도 바꿔 보시고 ... 조금 가지고 놀아 보세요.


4. 더하면 밝아지고 곱하면 어두워집니다.

오늘 내용의 결론입니다.
이미지를 더하면 밝아지고,
곱하면 어두워집니다. (소숫점이거든요. 소숫점은 곱할수록 작아지지요)
여태까지 흑백 이미지만 가지고 노니 재미 없으니까 그냥 추가한 겁니다. :)

그럼 이제 위의 내용을 곰곰히 생각해 보면서, 아래의 다양한 내용을 이해하도록 해 보세요. 직접 해보셔도 좋겠습니다.




1. 이전에 만들었던 것처럼 풀 이미지에 0.5를 더하면, 밝아집니다.

0.5가 아닌 0을 더하면 변화가 없겠지요? 한번 해보세요.

2. 풀 이미지에 1.0을 곱하면? 그대로입니다.
곱하기를 하지 않고 1.0을 더하면 하얗게 날라갔겠지요?

3. 그럼 풀 이미지에 0.5를 곱하면? 어두워집니다.
0 을 곱하면 완전 검은색이 되겠지요?

위 3가지 예제가 모두 이해 되셨습니까?


자, 이렇게 해서 '칼라를 숫자로 인식하는 것' 을 저번 시간에 했고,
이번 시간에는 '그렇게 숫자로 인식한 칼라를 덧셈과 곱셈 등 수식으로 연산해 보는 것' 을 해봤습니다.

다음 시간에는 이제 각종 메터리얼 옵션들을 간단하게 사용해 보도록 하겠습니다. 이미 만져보신 분들도 계시겠지만...

1. 무채색이 될수록 RGB 숫자가 같아지지요. RGB가 완전히 같은건 그야말로 흑백 이미지. 요 개념 자주 쓰입니다. 밑줄 쫙. [본문으로]
2. 흔히들 '포토샵의 Scren 이 이 원리로 밝아지는 거다' 라고 말씀하시는 분들이 계신데 엄밀히 말하면 다릅니다. 포토샵의 Screen 공식은 (1.0 - ((1.0 - base) * (1.0 - blend))) 이고요. 지금 글과 같이 단순히 더하기만 하는 것은 Add 라고 부릅니다. 포토샵의 레이어 속성에는 이게 없고, 에프터 이펙트에는 있지요. [본문으로]
3. 다른 요령도 가르쳐 드리겠습니다. 이미 만들어져 있는 Color 노드를 선택하고, Ctrl+C 를 눌러보세요! 아아 저는 Ctrl+C 가 너무 좋아요!!! 아흥 하악하악 [본문으로]
4. 포토샵의 Screen 블렌딩은 단순한 덧셈이 아니지만, Multiply는 단순한 곱셈이 맞습니다 :) [본문으로]
5. 사실 나눗셈은 일반적인 경우에 계산이 꽤 드리기 때문에, 보통은 0.5를 곱한다고 합니다. [본문으로]
6. B가 1.0이므로, 사실 결과는 0.5+1.0 이므로 float3(1.5,1.5,1.5) 겠지만, 컴퓨터 그래픽에서 1이 넘는 색상은 그냥 흰색일 뿐이므로 float3(1.0,1.0,1.0)과 차이가 없는 결과물이 나옵니다. [본문으로]