본문 바로가기
튜터리얼_스터디

(셰이더그래프)아티스트를 위한 URP 셰이더 Shader #5 - 노드 기본 조작 / 연산과 감마

by 대마왕J 2021. 7. 24.

아티스트가 셰이더를 할 때에 제일 중요한 것이 있습니다. 바로 '색을 숫자로 인식하는 것' 

왜냐면 어차피 셰이더라고 하는것은 색을 출력하는 것이고, 최종적으로 색을 출력하려면 들어오는 색들을 가지고 '연산' 해서 출력해야 하거든요 

그러니 셰이더를 배울 때에는 '색' 을 연산하는 법을 익혀야 합니다. 
즉 일단 '색' 을 숫자로 인식해야 뭘 할 수 있다는 말이죠! 

수              학 

아 그래요 숫자라고 하니까 수학같죠 사실 셰이더의 본질은 수학이라고도 하고. 생각하기도 싫을 거예요. 

하지만 직접 해보면 어렵지 않아요. 기초 셰이더는 기껏해야 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 

 

반응형

댓글