유니티 SRP 셰이더 그래프 - 4

1. UV 심화

2. 버텍스칼라

3. 그 외 기타

1. UV 심화

저번엔 UV와 벡터값 연산을 통해 Tiling / Offset을 조절해봤었습니다

이번엔 연산을 하긴 하는데 직접적인 벡터값이 아니라 칼라를 갖다가(칼라도 결국엔 벡터니까) 연산을 할겁니다

 

언릿 그래프를 하나 만들고 텍스쳐랑 uv를 받아서 마스터노드에 꽂아줍니다

 

그리고 UV와 연산할 칼라 노드를 꺼내줍니다

칼라 그대로 써버리면 출력값이 감마로 나와버리니까 Colorspace Conversion으로 알맞게 바꿔준 후 사용합니다

 

처음엔 일단 회색을 더해봅니다

벡터로는 (0.5, 0.5, 0.5)이고, 플러스 연산이니까 오프셋이 오른쪽 위로 0.5만큼 먹겠네요

적용해보면 진짜로 회색을 더한 결과물과, (0.5, 0.5, 0.5)의 벡터를 더한 결과물이 똑같은 걸 볼 수 있습니다

 

그냥 저런식으로 단색의 컬러값을 더할 때는 결과 연상이 비교적 쉽습니다

어차피 모든 위치에 같은 값이 계산되는 거니까요

 

하지만 텍스쳐를 더한다면?

결과"값"은 그렇다쳐도 어떤 모양이 나올지 감이 안잡힙니다

 

눈으로 봅시다

원본보다 왼쪽 아래로 찌그러진 걸 볼 수 있습니다

그럼 어떻게해서 저게 저런 결과가 나오게 된걸까요?

 

더한 텍스쳐를 벡터값으로 한번 바라봅시다

(가운데가 진짜 1,1은 아니지만 일단은 그렇다고 칩시다)

바깥으로 갈수록 까매지니까 0,0에 가까워질 것이고 중앙으로 갈 수록 밝아지니까 점점 1,1에 가까워지겠죠

 

그럼 이걸 UV랑 더했을 때 어떻게 될까요

(여기서도 1은 아니지만 1이라고 칩시다)

바깥으로 갈 수록 본래의 UV를 유지하고, 중앙으로 갈 수록 x,y에 값이 더해지게 됩니다

 

이렇게 된 UV에 텍스쳐를 넣으면

이렇게 UV에 들어있는 값에 매칭되는 텍스쳐의 위치를 그립니다

이걸 하나하나 계산해서 나온 결과물이 위에 나온 왼쪽아래로 눌린 이미지입니다

 

기존 위치값에서 값이 추가되면 더 오른쪽/위쪽의 위치를 그리기 때문에

결과로 나오는 이미지에서는 그와 반대로 왼쪽/아래쪽으로 눌리는 이미지가 나오게 되는것이죠

 

그리고 위에서는 흑백이미지의 컬러를 가져와서 가로/세로 모두 영향이 갔지만 만약 가로에만 영향을 주고 싶다면?

이런식으로 r값만 빼내서 더해주면 됩니다

(R,G,B,A) == (X,Y,Z,W) 니까요

 

색상 == 벡터 입니다

벡터 == 방향 입니다

색상 == 방향 입니다

즉, 위의 Combine 프리뷰에 나오는 빨간색도 방향입니다

점점 빨간색에 가까워질 수록, 결과에서는 더 "오른쪽"의 위치를 그리는 걸 볼 수 있습니다.

빨간색은 "오른쪽"이라는 방향을 갖고있는것이죠

 

그럼 초록색은 어떤 방향이라고 말할 수 있을까요?

g값은 y값과 매치되기 때문에 세로, 그리고 값이 상승하기 때문에 "위쪽 방향을 가지고 있다" 라고 말할 수 있습니다

 

좀 연구를 하다보면 이걸로 포토샵 효과같은것도 구현할 수 있지 않을까 싶네요

 

더 나아가선 이런 텍스쳐를 스크롤해서 물결 비슷하게 만들 수도 있고...

2. 버텍스 칼라

버텍스에 들어있는 정보 중에 칼라값도 있었죠

하지만 그걸 평소에 잊고 사는 이유는 그냥은 눈에 안보이거든요

 

그럼 어떻게 해야 버텍스 칼라를 볼 수 있을까요?

이러면 볼 수 있습니다

대신 진짜로 이렇게만 해놓으면 버텍스컬러만 출력하니까 다른 것들이랑 섞어서 써야겠죠

들어있는 정보는 칼라값과 똑같이 사용하면 됩니다

 

적용을 한 모습입니다만... 변화가 없죠 우리가 버텍스에 들어있는 칼라값은 안건들였으니까요

 

이걸 이제 Polybrush라는 유니티 내부 툴을 이용해서 버텍스의 칼라를 바꿔봅시다

패키지매니저에서 Polybrush를 설치합니다

그 후 보면 Tools라는 새로운 메뉴가 추가되고, 거기에 들어가서 Polybrush 를 키면 오른쪽과같이 Polybrush 창이 뜨게됩니다

보니까 다른 기능들도 있는것같은데 일단 우리는 칼라 수정하는것만 봅시다

저 빨간 네모박스로 체크해둔 버튼을 누르면 이렇게 칼라를 칠할 수 있도록 바뀌게 됩니다

이제 이걸 가지고 원하는 색 골라서 칠하게 되면

이런 식으로 색이 입혀지는 것을 볼 수 있습니다

 

다만, 이건 버텍스의 칼라값을 바꾸는 것이기 때문에 셰이더에서 버텍스칼라 사용을 안한다면 전혀 보이지가 않겠죠

이런식으로 전혀 보이지도 않을 뿐더러, Polybrush에서 "머테리얼에서 버텍스칼라를 안쓰고있다" 비슷한 뜻의 경고문구를 띄웁니다

3. 그 외 기타

1 - AlphaClipThreshold

2 - Sampler State

 

1 - AlphaClipThreshold

자, 이런식으로 알파가 들어있는 텍스쳐를 가지고 출력을 하려고 합니다

"이렇게 하면 따놓은 알파처럼 가장자리가 부드럽게 나오겠지?" 라는 생각을 가지고 결과를 보게되면...

뭔가 좀 많이 이상해요

좀 심각하게 많이요

 

이게 지금 일정 알파 이하가 되면 아예 텍스쳐를 짤라버린단 말이죠

난 분명 아무것도 안건들고 알파 연결만 해놨을 뿐인데 왜 이렇게되는거지 하고 처음 이 문제를 겪었을 당시에 몇시간동안 삽질을 했단말이죠

 

그래서 뭐때문에 저런 현상이 나타나는 것이냐

요놈의 값이 처음부터 0.5로 설정되있기 때문입니다

알파가 저 값 이하가 되면 아예 짤라버려요

 

위의 불 사진은 가장자리로 갈 수록 알파값이 줄어드니까 가장자리 중간쯤까지는 텍스쳐가 그대로 나오다가

0.5 아래가 되자마자 확 짤렸던 것이죠

 

(저거 대체 왜만든거야 아니 뭐 만든것까진 그렇다쳐 근데 왜 초기값이 0.5인건데 내가 저거때문에 얼마나 개고생을 했는데 하...)

 

2 - Sampler State

칼라텍스쳐 + UV스크롤링을 사용해서 불을 만들었는데

보면 빨간 네모친 부분이 삐죽 나온걸 볼 수 있습니다

왜냐면 원본 불 텍스쳐의 옵션이 Repeat라서 반복이 되고있기 때문이죠

 

그냥 단순히 텍스쳐 옵션을 Clamp로 바꾸는 방법도 있지만 다른 방법이 하나 더있습니다

바로 이 Sampler State라는 노드를 사용하는 거죠

여기서 Wrap를 Repeat대신 Clamp로 설정하고

Sample Texture 2D의 Sampler 쪽에 꽂아주면

이런식으로 굳이 텍스쳐옵션을 건들이지 않아도 텍스쳐가 반복되지 않는걸 볼 수 있습니다

유용하게 쓰일지는 모르겠지만 그래도 이렇게하면 어디에서는 반복되게, 다른쪽에서는 반복안되게 마음대로 쓸 수 있다는 장점이 있겠죠

 

Wrap 위에있는 Filter는 음... 리니어라고 써있길래 '어 아는 단어다' 하고 들어가봤더니

음...... 다음에 알아보는걸로...