아티스트가 셰이더를 할 때에 제일 중요한 것이 있습니다. 바로 '색을 숫자로 인식하는 것'
왜냐면 어차피 셰이더라고 하는것은 색을 출력하는 것이고, 최종적으로 색을 출력하려면 들어오는 색들을 가지고 '연산' 해서 출력해야 하거든요
그러니 셰이더를 배울 때에는 '색' 을 연산하는 법을 익혀야 합니다.
즉 일단 '색' 을 숫자로 인식해야 뭘 할 수 있다는 말이죠!
수 학
아 그래요 숫자라고 하니까 수학같죠 사실 셰이더의 본질은 수학이라고도 하고. 생각하기도 싫을 거예요.
하지만 직접 해보면 어렵지 않아요. 기초 셰이더는 기껏해야 0~1 정도만 사용하고, 사칙연산 정도면 충분하거든요!
물론 고급 기술이 되면 어려워지지만 그건 알게 뭐야
흠흠.. 자 그럼 셰이더 그래프로 연산을 해 보겠습니다.
셰이더 그래프 준비하기
이번에는 프로퍼티스 작업은 필요없으니까요. Black Board와 Graph Inspector 는 꺼주고 시작해 보겠습니다. 너넨 잠깐 들어가 있어.
Vertex 와 Fragment는 중요하니까 화면을 좀 옮겨서 보기 편하게 만들어 보지요. 직접 드래그로 옮겨도 되지만,
마우스 가운데 버튼을 누르고 화면을 움직여도 됩니다. 유니티와 같지요.
휠을 굴리면 줌 인 아웃 된다는 것 정도는 상식적이니까 굳이 설명하지 않을께요 지금 했잖아
자 그럼 이런 화면으로 만들어 보세요. 물론 이 셰이더는 메터리얼에 적용이 되고, 메터리얼은 저 오브젝트에 적용되어 있는 상태여야 합니다. 뭐 그건 아셔야죠? (모르시면 앞 부분을 다시 보고 오세요)
여기서 중요한건 Fragment 부분의 Base Color 부분이예요. 이 부분의 색을 바꾸고 Save Asset 을 누르면, 색이 바뀌는 것을 볼 수 있습니다. 즉 Base Color라는 부분이 오브젝트와 연결되어 있는거죠!
이제 기본 조작은 어떻게 하는지 감 잡았으니, 노드 조작을 조금 더 해 봅시다.
눈치채셨는지 모르겠지만, 칼라 피커는 0~255 단위와 0~1 단위, HSV 단위로 바꿔서 볼 수 있게 되어 있습니다.
지금 우리한테는 0~1 단위가 잘 어울리겠죠
노드를 꺼내서 연결하고 끊기
- 노드를 만드는 법 : 스페이스바를 누르거나, 빈 곳에서 오른클릭해서 Create Node를 선택합니다.
- 칼라 노드를 꺼내는 법 : Input / Basic / Color 노드를 선택합니다. 혹은 Create Node 창에서 바로 Color를 직접 검색합니다.
- 노드를 연결하는 법 : 노드의 Out 을 잡고 끌어서 Fragment의 Base Color에 연결합니다.
- 노드 연결을 끊는 법 : 연결된 노드의 '선' 을 직접 선택하고 Del 키로 지워 버립니다.
Out은 (4) 라고 씌여있고 BaseColor는 (3) 이라고 씌여 있죠? 게다가 은근슬쩍 분홍색에서 노랑색으로 바뀌고 있어...
예에 이거 진짜 완벽하게 얼렁뚱땅인 드립인데요 . 첨보고 한참 웃었음. ㅋㅋㅋㅋ
저게 그러니까 .. 칼라 노드는 float4예요. 대충 이런 느낌. XYZW랑 RGBA는 같은 거거든요. 그냥 부르는 이름차이지. float4 랑 Vector4 는 같은거고, XYZW 랑 RGBA 는 같은거.. 근데 저건 RGBA 잖아요? 근데 알파 채널은 솔직히 칼라라고 볼 수 없잖아요? 그냥 알파지.
그래서 사실 모니터에 '색' 을 출력하려면 RGB만 필요한거거든요? 하나 필요 없잖아??? 그러니까 이거란 말인데, float4를 float3에 억지로 밀어 넣으니까 자연스럽게 A 채널이 버려지면서 float3로 눈속임 되는 광경을 보고 계십니다 ㅋㅋㅋㅋㅋ 야 뭔데 스리슬쩍 4를 3으로 바꾸는건데???? ㅋㅋㅋ
그렇다고 A 가 어디 없어진건 아니고요. 꺼내쓰는 방법이 다 있습니다. 나중에 설명드릴께요
지금은 그냥 따 된 상태임.
노드 연산해 보기 : 덧셈
자 여기서 갑자기 급 질문. '회색과 회색을 더하면 무슨 색이게요?'
어서 얘기해요. 5,4,3,2,1
여기서 ... 회색? 이라고 하시거나 멈칫 하셨던 분들은
아직 색을 숫자로 생각하실 준비가 안 되신 분들입니다.
회색은 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)
이렇게 딱! 하고 나와야 정상입니다! 즉
회색 더하기 회색은 흰색! 이라고 나와야 정상이죠
중요한 관문이니까 꼭 뼈에 새기고 넘어가세요.
네 그럼 실험해 보죠 진짜 그런지.
1. 칼라 노드를 만들고 회색으로 바꿉니다.
2. 노드를 Ctrl C + V 로 복사하고, 덧셈을 위해 Add 노드를 꺼냅니다. 덧셈은 Add니까요
3. 회색 두 개를 덧셈에 연결해 줍니다. 회색 + 회색을 만들려는거죠. 그리고 그걸 Fragment의 Base Color에 연결해 줍니다. 그러면 회색 더하기 회색이 흰색임을 알 수 있
....엥??????
아니 회색 더하기 회색이 왜 회색이 되는거죠??? 저건 흰색이 아니잖아?????
아아니이 좀 자세히 보면 '아주 약간 밝아진 회색' 같은게 되었잖아요???!!? 저 저ㅓㅓ저저게 뭐지????ㅁㅁ?니ㅏㅓ시ㅏㄴ아ㅓ사ㅣㅣㅇㄴ???.?
자 지, 진정하시고 저건 흰색이어야 원래 맞아요.
근데... 칼라 노드가
감마 (Gamma)
로 들어와서 그러는 거예요. 뭔소리야
참 이 부분은 쉽게 설명하기 (게다가 짧게) 설명하기 힘든 부분인데요.
궁금하신 분은 제가 만든 동영상을 보고 오시는게 좋겠어요
이론을 알고 싶으시면 아래 3개 영상은 꼭 보시는게 감마가 뭔지 이해하시기 좋고요
위에 저 덧셈 부분은 https://youtu.be/lUvsEfqOkUo?t=606 부분에 설명이 되어 있으니 , 아래 영상을 다 보시고 마지막 부분에서 저 부분을 좀 더 자세히 보시면 내용을 이해할 수 있습니다.
자 그럼 오늘은 여기까지!!!
https://www.youtube.com/watch?v=Xwlm5V-bnBc
https://www.youtube.com/watch?v=oVyqLhVrjhY
https://www.youtube.com/watch?v=lUvsEfqOkUo
'튜터리얼_스터디' 카테고리의 다른 글
(셰이더그래프)아티스트를 위한 URP 셰이더 Shader #6 - 스위즐링(swizzling) (1) | 2021.08.06 |
---|---|
(셰이더그래프)아티스트를 위한 URP 셰이더 Shader #5 - 노드 기본 조작 / 연산과 감마2 (0) | 2021.07.25 |
(공통이론)아티스트를 위한 URP 셰이더 Shader #4 - 색과 숫자 (1) | 2021.07.23 |
(HLSL)아티스트를 위한 URP 셰이더 Shader #3 - 프로퍼티스2 (4) | 2021.07.22 |
(HLSL)아티스트를 위한 URP 셰이더 Shader #3 - 프로퍼티스1 (6) | 2021.07.21 |
댓글