밝힐 것이 있습니다.
사실 여기서 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 랑 똑같습니다!

알면 재밌습니다.

셰이더 연산을 할 때에는 위에서 본 것과 같이 덧셈과 곱셈 연산을 주로 쓰고, 뺄셈은 가끔 쓰고, 나눗셈은 거의 안쓰다시피 합니다. (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)과 차이가 없는 결과물이 나옵니다. [본문으로]