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

(스터디 정식 인원이 되었어요 와아)

 

1. 모델에 텍스쳐를 입히는 과정

2. UV 더 자세히 알아보기

3. 가독성을 좋아지게 하는 몇몇 기능

1. 모델에 텍스쳐를 입히는 방법

'머테리얼에 텍스쳐 넣으면 그대로 입혀지던데 여기서도 그냥 텍스쳐 그대로 노드에 붙이면 되겠지?'

텍스쳐 그대로 꽂으려 하면 안꽂아져요

참고로 Split도 안돼요

뭔가 다른 방법이 있다는 뜻이죠

 

Sample Texture 2D

보면 오른쪽에 있는 출력값에 RGBA들이 있는 걸 볼 수 있습니다

여기서 이제 왼쪽에다 입력 노드 연결시키고 해서 나온 출력을 마스터에 끼워넣으면 텍스쳐가 입혀지는것이죠

 

그럼 입력값이 뭐뭐가 있는지 봅시다

Texture(T2)

텍스쳐를 받습니다 매핑한 이미지요.(T2는 Texture 2D의 줄임말)

 

UV(2)

평면인 텍스쳐를 모델에다가 어떻게 씌울거냐 하는 정보 같은 거에요 3D툴에서 언랩했던게 요 정보에 해당하는 것이죠. 그리고 (2) 라고 옆에 적혀있으니 Vector2라는 것인데 그이유는

언랩할 때 수정하는 저 점 하나하나의 위치값을 지정해주고 그 정보를 저장하는건데,

그 위치값이 가로(U)/세로(V) 즉, Vector2거든요 (사실상 U=x, V=y)

암튼 그래서 저 UV 쪽에는 이런 데이터를 넣어야되는데 사실 특별한 상황 아니면 그냥 기본으로 넣어져있는 UV0 그대로 놔둬도 상관은 없어요

Sampler(SS)

이건 처음 보는 거라서 한번 찾아보니까

SamplerState 라는 자료가 따로 있나봐요

혹시나 싶어서 블랙보드에서 찾아봤더니

아 역시 있었습니다

인터페이스를 보아하니 느낌이 텍스쳐 옵션 건드리는? 그런것같네요

 

얘는 특이하게도 Exposed가 안되고 레퍼런스도 자동으로 만들어져서 자기마음대로 못바꿉니다

필터가 리니어이고, Wrap이 Repeat라서 레퍼런스가 자동으로 SamplerState_Linear_Repeat로 되있죠

저 옵션 바꾸면 레퍼런스 이름도 알아서 바껴요

 

근데 요것도 굳이 연결 안해놔도 상관없어요

 

2. UV 더 자세히 알아보기

1 - UV의 원래 이름

2 - UV를 눈으로 보기

3 - Tiling / Offset

1 - UV의 원래 이름

사실 UV의 이름은 원래 따로 있습니다

texcoord 라는 이름이죠

그리고 texcoord는 vector4로 되어있고, 그 안에 vector2인 UV를 두개 담고있는 구조로 되어있습니다

여기에 나오는 UV(2)가 바로 오른쪽에 있는 UV0, UV1 이런 부분을 말하는것이고,

저기에 꼽는 요 UV0은 texcoord를 가리킵니다(사실 이걸 UV라고 표기해놓는 거 자체가 잘못된 표기였던 거죠)

 

이름을 헷갈리게 지어놔서 다시 그림으로 설명하자면

UV(2)에 texcoord(유니티에선 요걸 UV라고 표기해놓음)를 연결시키면 texcoord안에 있는 UV0이 들어가게 됩니다

파티클을 하나 만들어서 Renderer->Costom Vertex Streams의 체크를 키면 더 명확하게 알 수 있습니다

UV와 texcoord의 차이를 제대로 알고 있는게 중요할 것 같네요

2 - UV를 눈으로 보기

칼라는 사실 벡터입니다

+

UV도 벡터입니다

=고로 UV도 칼라로 볼 수 있습니다

 

직접 해봅시다

노드 이름이 UV이지만 속지마세요 texcoord입니다

texcoord는 Vector4고, UV는 Vector2라는 점을 생각하면 구분하기 편할거에요

 

암튼 texcoord를 생성하셨다면 바로 눈으로 uv를 색상값으로 보실 수가 있을겁니다

처음엔 이게 뭔 색깔인가 싶었는데

3d 툴에서 UV 필때 이 영역이 Vector2(0, 0) ~ Vector2(1, 1)로 되있단 말이죠

여기에서 볼 때도 마찬가지입니다

Vector2(0, 0) ~ Vector2(1, 1)로 되있어요

Vector2(x, y) == Vector2(R, G) 고요?

그럼 x값이 늘어날수록 점점 빨간색이 되고, y값이 점점 늘어날수록 초록색이 된단 말이죠?

따로 떼서 보면 이런식으로 x값을 빼낸 결과물은 오른쪽으로 갈 수록 값이 오르니까 오른쪽으로 갈 수록 점점 하얘지고

y값을 빼낸 결과물에서는 위쪽으로 갈 수록 값이 오르니까 위쪽으로 갈 수록 점점 하얘집니다

(하얘지는 이유는 vector1을 넣어서 rgb 모두 값이 적용되기 때문)

 

하얀색 말고 색 있는 버전으로 봅시다

x값은 그대로 r쪽에 이으면 이런식으로 나오고,

y값은 그대로 g값에 넣으니까 이렇게 나옵니다

 

그리고 예상되듯이 둘이 합친게

요 색깔입니다

 

3 - Tiling / Offset

저 UV를 갖다가 연산을 통해서 타일링이랑 오프셋 기능을 만들수가 있는데요

 

위에서 uv는 기본적으로 Vector2(0, 0) ~ Vector2(1, 1)까지 되있다고 했었죠

사실 저 숫자는 퍼센테이지를 의미합니다. 0~1은 0%~100%까지의 범위를 뜻하죠

이런식으로요

그래서 텍스쳐로 넣을 이미지의 비율이 어찌되든간에 저 안에 다 들어갈 수가 있게 되는 것이죠

 

그럼 저 texcoord값에 2를 곱하게 되면 어떻게될까요

x,y가 각각 2배가 되니까 Vector2(0,0) ~ Vector2(2, 2)의 범위가 되는것이죠

즉, Vector2(0% ~ 200%, 0% ~ 200%)의 텍스쳐를 받게 됩니다

 

좀 더 보기쉽게 텍스쳐를 넣어서 볼까요

아까 위에서 설명했던 Sample Texture 2D를 써봅시다

가로로 2번 반복되고, 세로로도 2번 반복되는 텍스쳐를 볼 수 있습니다

왜냐면 기존 texcoord에다가 2를 곱해서 끝이 200%가 되버렸거든요

 

그리고 결과를 보면 알 수 있듯, Tiling이 되었습니다!

즉, texcoord에 곱셈을 하면 Tiling이 된다는 것이죠

 

그럼 다음으로, Offset은 어떻게 연산해야할까요?

모든 위치에 동일한 벡터를 더해주면 됩니다

오른쪽으로 이동시키려고 보니까 버텍스 위치가 모두 (0.5,0)이 더해진 것과 동일하다는 걸 볼 수 있습니다

실제 연산한 모습입니다

 

결론

Tiling은 texcoord의 UV에 multiply를 한다

Offset은 texcoord의 UV에 add를 한다

 

3. 가독성을 좋아지게 하는 몇몇 기능

노드를 봤을 때 눈에 더 확 들어오게끔 할 수 있는 기능들을 설명합니다

여기있는 기능들은 셰이더 자체에 영향을 주지 않고, 오직 비주얼적인 기능만 합니다

 

1 - 그룹

2 - 서브그래프

3 - Sticky Note

1 - 그룹

자신이 선택한 노드들을 묶어주는 기능입니다

이런식으로 그룹으로 묶고싶은 노드들을 선택한 후, 선택한 노드에 마우스 오른쪽클릭 -> Group Selection을 누릅니다

그럼 이런식으로 그룹으로 묶어지게 됩니다

그룹 이름 바꾸기는 그룹 이름에 더블클릭을 하면 바꿀 수 있습니다

 

만약 그룹에 노드를 더 추가로 넣고싶다 하면

이런 식으로 기존의 노드를 드래그해서 그룹 안으로 넣으면 됩니다

2 - 서브그래프

그룹이랑 비슷한데, 얘는 선택한 노드 전체를 하나의 노드로 묶어버립니다

그룹으로 묶을때와 비슷하게 서브그래프로 묶고싶은 노드들을 선택한 후, Convert To Sub-graph를 누릅니다

그러면 서브그래프를 저장하는 창이 뜹니다

파일 형식도 shadersubgraph로 되있는걸 볼 수 있죠

적당한 곳에 아무 이름 정해서 저장해줍니다

저장을 하게 되면 선택한 노드들이 서브 그래프로 대체되고,

이 서브그래프를 더블클릭하면...

이렇게 아까 서브그래프로 만들려고 선택했던 노드들이 그대로 들어가있는 걸 볼 수 있죠

게다가 이렇게 파일로 저장이 되기 때문에

자주 쓰이는 기능들을 서브그래프로 여러개 만들어놓고 패키지파일로 갖고다니면 나름의 자원이 될 수 있지 않을까 싶네요

 

노드 특성상 간단한 기능 하나 만드는 데에도 쓸데없이 복잡해지는 감이 좀 있는데

이걸 어느정도 해소할 수 있는 기능 같습니다

대신 그룹과 달리, 그래프 안의 내용물은 그래프 내부로 들어가야만 볼 수 있기 때문에

구조까지 한번에 다 보기엔 불편한 단점이 있습니다

3 - Sticky Note

메모같은 거라고 보면 됩니다

빈 공간에 오른쪽클릭을 한 후, Create Sticky Note를 누릅니다

그럼 이렇게 Sticky Note가 생성되고, 쓰고 싶은 내용들을 적을 수 있습니다

내용 수정은 더블클릭을 하면 수정할 수 있고요

(근데 한글 안돼요)