7. 텍스쳐 다루기 (1) 이동(Translate), 배율(Scale) 기능 만들기

---

※ 현재 학습 중인 내용이므로 아직 완전하지 않은 내용일 수 있습니다.

내용에 대해서 피드백을 주시면 관련 내용 보완하여 작성하겠습니다.

---

이번 포스팅에서는  머티리얼에 텍스쳐를 배치하고, 

텍스쳐를 이동시키고, 배율을 조정하는 적용하는 방법에 대해서 알아보겠습니다.

 

1. UV와 텍스쳐의 배치

지난 포스팅에서 

UV란, 2개의 채널을 이용해서 만든 '좌표(Coordinate)'로,
Red 채널은 왼쪽에서 오른쪽으로, Green 채널은 위에서 아래로 
0에서부터 1까지 '순서대로' 표현합니다.

이 좌표는 '2차원 공간'을 정의하고, 
대부분의 머티리얼은 이 UV를 만드는 것으로 시작합니다. 

라고 말씀 드렸던 것 기억 하시나요?

그러니까 이 좌표 안에, 텍스쳐가 붙여 넣어지는 거라고 보시면 됩니다.

이미지가 붙기 위해서는 좌표 n,n에 표현이 되어야 하기 때문에 그렇습니다.

 

그럼 이 좌표를 조작하면 어떻게 될까요?

 

2. 이동하기(Translate)

먼저, UV는 좌측 상단이 (0,0)인 좌표라고 보시면 됩니다. 우측 하단은 상대적으로 (1,1)이구요.

이미지를 오른쪽으로 0.1만큼 옮기고, 아래쪽으로 0.2만큼 내리려면 어떻게 해야 할까요?

 

바로, 빼기(Subtract)입니다. 

X축 이동은 R채널에서 0.1만큼 빼주고, Y축 이동은 G채널에서 0.2만큼 빼주면 됩니다.

반대로 좌표를 좌측으로 이동시키려면? 더하기를 하면 되겠죠?

 

참조하실 수 있게 영상으로도 준비해 보았습니다.

 

정리하면 R채널에서 -는 오른쪽 +는 왼쪽,

G채널에서는 -는 아래쪽, +는 위쪽으로 이동한다고 생각하시면 됩니다. 

 

또한 더하기(add)연산을 할 때는 +시 왼쪽/위쪽으로, -오른쪽/아래쪽으로,

빼기(subtract)연산을 할 때는 +시 오른쪽/아래쪽으로, -왼쪽/위쪽으로 이동합니다.

+.-값일 때의 머티리얼이 반응하는 방향을 제어하는 의미도 포함되어 있다고 볼 수 있습니다.

 

3. 배율(Scale)

A) 1보다 큰 배율

이번에는 UV좌표를 곱해 보겠습니다. 

(2,2)를 각각 곱해 주면, 가로 2, 세로 2의 좌표가 완성됩니다.

그러면 필연적으로 한 공간에 값이 2배가 되었으니 길이는 상대적으로 절반이 되겠죠.

그러므로 텍스쳐는 '축소'되게 됩니다.

그리고 축소된 만큼, 좌표계는 반복됩니다. 

 

반복되는 이미지를 만들고 싶지 않다면,

텍스쳐 샘플(Texture Sample )노드의 상세 설정패널(Detail Panel)로 들어와

샘플러 소스(Sampler Source)를 Clamp로 바꾸면 반복되지 않습니다.

 

B) 1보다 작은 배율

그 반대의 경우, 0.5를 곱하든, 2로 나누든 상관없이 한 폭이 0.5가 되도록 계산해 줍시다. 

그러면 아까와는 반대로 길이는 상대적으로 2배가 되어 "확대"가 됩니다.

 

위 영상에서처럼 곱셈에서 1이상의 숫자를 입력하면 축소가 되고.

1미만의 숫자를 입력하면 확대가 되며, 

 

나눗셈에서 1 미만의 수를 입력하면 축소가 되고, 

1이상의 숫자를 입력하면 확대가 되는 것입니다.

 

노드간의 상호작용을 기억해 주셨으면 좋겠습니다.

---

원래는 UV연산에 이어서 텍스쳐 회전도 다뤄 보고 싶었습니다만,

난이도 조정을 위해 순서를 변경하였습니다.

 

분량이 조금 짧아도 양해 부탁 드립니다.