(셰이더그래프)아티스트를 위한 URP 셰이더 Shader #5 - 노드 기본 조작 / 연산과 감마2
by 대마왕J2021. 7. 25.
자 그럼 그 다음 얘기를 또...
칼라 노드의 감마공간 변환
감마에 대해서는 보고 오셨나요? 이게 설명하기가 참 거시기 해서 거시기 하고 거시기 한데다가 코드에서는 잘 모르고 넘어갈 수 있는 개념이라 ( 셰이더에서는, 노드에서는 칼라 노드가 있지만 코드에서는 칼라 변수라는게 따로 없거든요. ) 첨에 이해하기 힘들단 말이죠
뭘까 얜
그러니 간단히 지난 시간 감마 얘기를 정리해 봅시다. 저번 편의 영상을 보셨다는것을 전제로 하고요. 그리고 또한, 칼라는 숫자와 같다라고 하는 기본 전제를 알고 있다는 데에서 시작해야 해요.
그럼 두 개의 노드를 불러 보겠습니다. 하나는 칼라 노드로 회색, 또 하나는 벡터 3 (float3) 로 0.5, 0.5, 0.5
어떻게 노드를 부르지? 하시는 분은 아래 영상을 따라하시면 됩니다.
사실, '엄밀하게 똑같지는 않잖아요! ' 하실 분들이 있어서 추가 설명하자면, Color는 Out이 4 이므로 float4(R,G,B,A) 이고 Vextor3는 X,Y,Z 이므로 Out이 3자리, 그리고 XYZ랑 RGB는 완전히 같은 것이므로 float3(R,G,B) 이므로 둘은 사실 다릅니다. 4자리랑 3자리니까요. 하지만 이전에 미리 말했듯이 최종 출력이 3자리만 받는지라, 어차피 마지막 A 는 무시되므로 일단 결과는 같다고 보시면 되겠습니다.
둘다 회색이므로, 우리가 알기론 0.5입니다만, 사실 저기서는 Vector3(float3) 가 맞는 값입니다.
그러므로 0.5, 0.5, 0.5 를 add로 두 번 더하면, float3(0.5, 0.5, 0.5) + float3(0.5, 0.5, 0.5) = float3(1.0, 1.0, 1.0) 이 되니까 아주 클리어 하고 문제 없습니다. 이론상 이게 맞아요.
하지만 색으로 더하면?
색은 리니어 칼라가 아닙니다. sRGB 상태예요. 그러니 사실 엔진에 들어와 있을 때에는 실제보다 어두워진 상태입니다. 요건 이해하기 좀 힘들거예요. 텍스쳐는 하드디스크에서 밝게 저장이 되고, 엔진으로 가져오면 리니어 공간으로 맞추기 위해 어둡게 떨어뜨리는데, 저 칼라 노드는 그냥 생성한 거잖아요? 이미 밝게 저장된게 없어요. 사실 원래부터 리니어인데, 노드로 가져올 때 저것도 '리니어 공간으로 맞춘답시고' 어둡게 떨어뜨리는 거예요. (URP는 기본이 리니어 공간입니다)
뭔 개소리야
이게 뭔 소리야???? 하시는 분은 뭐 당연합니다. 이해합니다. 저도 몇 년간 그래왔으니
그러니 잘 모르겠다! 싶으신 분은 당장 이해 안해도 됩니다. 이것만 보시고 외워버리세요 그냥 두면 양 쪽 공은 다르죠. 칼라 노드가 살짝 어둡습니다.
아하! float3 숫자가 정확하고 칼라는 뭔지 모르지만 좀 어둡구나!!! 감마인가 뭔가 때문이라는데!!!
일케 외우심 됨. 이해 안되는거 계속 붙들고 있어봤자 재미 없어요. 아 그냥 그렇구나 하고 고개만 끄덕이면, 아무도 당신이 감마를 이해 못했다는걸 눈치채지 못할 겁니다.
뻔뻔한 표정으로 따라해 보세요
그럼 뭘 어케 해야 하냐? 칼라는 그래서 '이놈이 리니어에 오신다고 어두워져 있으므로 다시 밝게 원위치 시켜야 되염' 하고 유니티에 가르쳐 줘야 합니다.
그것이 칼라스페이스 컨버전 (칼라 공간 변환) 노드 !!
이 노드를 이용해서, 칼라를 Linear -> RGB 로 공간변환해주면 다시 원래대로의 색을 찾아줍니다. 보통은 잘 모르고 넘어가실 수 있는데, 칼라는 이걸 해줘야 정확하다고 외우시면 좋습니다!!!
그러면 0.5 와 칼라 회색이 똑같아지는걸 확인 할 수 있습니다. 양 쪽 회색 공이 똑같죠?
창이 너무 커서 화면을 가린다면, 필요없는 창은 이렇게 접어두면 정리하기 좋습니다.
물론 덧셈 결과도 똑같아집니다.
칼라 노드는 칼라 스페이스 컨버전으로 Linear에서 RGB로 바꾸어줍시다!
자질구레한 셰이더 그래프의 조작법들
잠깐. 여기까지 하다 보니까 뭔가 셰이더 그래프는 조작하는 법이 더 있는거 같은 느낌이 들지요? 있습니다. 한 번 정리하는게 좋겠네요 슬슬 . 그럴 때가 되었어요
- 미리보기 접기
프리뷰 창은 미리보기에 좋지만 너무 커서 피곤하지요? 접을 수 있습니다.
여러 노드를 드래그로 선택하고 한 번에 접기도 좋아요 . 첨부터 접어서 나오는 옵션도 어디 있을법 한데
- 한 번 더 접기 (안쓰는 입출력값 숨기기)
한 번 더 접으면 연결되지 않는 노드를 숨기는 일을 할 수 있습니다. 그냥 상수로 넣어 놓은 숫자가 안보인다는 단점은 있지만 어쨌건 화면이 깨끗해지니..
- 노드 연결선 중간 연결노드 넣기
뭔가 이름이 있던 것 같은데.. 생각나면 추가할께요 . 이거 사실 아 - 무 역할도 안하는건데, ㅋㅋㅋㅋ 셰이더 그래프 해보신 분들은 아시겠지만, 저 선이 복잡해지면 서로 꼬이는게 보기 싫은데다가, 대각선이어서 더 보기 싫은 경우가 많지요? 그럴때 선 정리해주는 노드입니다. 연결선 위에서 더블클릭 해주면 생성되고 , 선택하고 Del 누르면 지워져요
- 그룹 만들기
그룹 만드는거 예쁘고 용이합니다. 단축키도 포토샵 그룹과 같은 Ctrl + G 한글로 이름을 넣어줄 수 있어서 좋아요.
스티키 노트는 포스트잇 같은건데, 이곳저곳에 잘 붙는다고 스티키(Sticky) 노트입니다. 그런데, 노랑색인건 포스트잇 같지만 어디 붙어다니진 않네요?!??! 메모를 서술할 때 쓸 수 있습니다. 코드로 따지면 주석. 노드로 짜면 분명 미래의 내가 못알아 볼 테니까 자세히 적어주는게 좋습니다. 안그러면 과거의 나를 저주할지도 몰라요
빨강 float3(1,0,0) + 노랑 float3(1,1,0) 이니까 숫자로는 float3(2,1,0) 이 되잖아요? 칼라는 0~1 만 되는데 2,1,0 이면 ... 흰색인데 빨간 느낌의 흰색쯤 되는 걸까요? 해보시면 됩니다.
에... 노랑이네요? float3(2,1,0) 인데, 결과는 float3(1,1,0) 과 같네요?
숫자로 해봐도 동일한 결과입니다. 네, 이건 현재 float3(2,1,0) 상태입니다만, 모니터에는 0~ 1 사이의 값만 표시하기 때문에 1 이상의 값도 전부 1로 보이는 겁니다. 마찬가지로 0 이하의 값도 전부 0으로 보이지요. 하지만 '보일' 뿐입니다. 실제로 값은 가지고 있어요.
이런걸 HDR 이라고 합니다. 1 이상 넘어가는 색상 값을 가지고 있는거. 나중에 포스트 프로세스의 블룸 같은거로 사용하기도 하죠
포토샵의 Linear Dodge 블렌드 옆에 (Add) 라고 씌여 있는 것을 보실 수 있으실 겁니다. 네, 포토샵의 이 블렌드 공식이 더하기예요. 그래서 셰이더와 완벽히 같게 동작합니다
우리가 덧셈 공식에 대해서 알아둘 것은, 일반적으로 우리는 0~1 의 수만 사용하므로 숫자를 더하면 값이 올라간다, 즉 '밝아진다' 는 것입니다.
더하면 밝아진다.
중요한 내용이예요
노드의 사칙연산 : 뺄셈 (Subtract)
네 뭐 생각하신대로입니다. 역시나 0 이하는 0으로 보인다는 것만 생각하심 됩니다. 뺄셈 노드는 Subtract 이죠
노랑에서 빨강을 빼면 float3(1,1,0) - float3(1,0,0) 이 됩니다. 즉 float3(0,1,0) 이 되어서 녹색이 되겠지요
포토샵에도 동일한 블렌드 모드가 있습니다. 회색 빼기 회색이니 검은색이 되겠지요
노드의 사칙연산 : 곱셈 (Multiply)
float3(1,1,0) * float3(1,0,0) = float3(1,0,0) 이 된 것입니다. 이렇게하면 감이 잘 안오죠? 회색이 중간에 끼어 있어야 감이 잘 오는데요
이것 역시 포토샵에 그대로 있습니다. 회색 * 회색 하면 어떻게 될까요?
0.5*0.5 이므로 0.25 가 됩니다. 즉
일반적으로, 색을 곱하면 어두워진다
라는 법칙이 나오게 됩니다. 아 물론 우리가 0~ 1을 사용한다는 전제여야만 하겠죠. 2나 3 같은걸 곱하면 밝아질테니.
노드의 사칙연산 : 나눗셈 (Divide)
나눗셈은 아무래도 쓰는 빈도가 높지는 않습니다. 요즘에는 큰 문제가 되지 않지만 곱셈보다 연산이 좀 무겁다는 얘기도 있고, 아무래도 직관성이 높지 않은 점도 있고요. ( 2로 나누나 0.5를 곱하나..) 게다가 0으로 나누면 에러가 납니다 ㄷㄷㄷ (저 분홍은 .. 에러의 색이죠) 그래서 조심히 써야 하는 녀석이지요 .
자 오늘은 감마 얘기와 노드의 기본 사용법, 그리고 간단한 사칙연산에 대해 알아 보았습니다. 다음 셰이더 그래프 시간에는 스위즐링과 다른 자릿수끼리의 연산에 대해 알아보도록 하지요!
다양한 색끼리 연산해 보고, 그 결과가 그 색이 나오는 이유를 숫자로 써서 알아보도록 합시다 ㅁ
댓글