[Unity 쉐이더] Tiling & Offset, UV애니메이션

UV란?

UV애니메이션

타임값

이동

텍스쳐를 이용한 애니메이션

응용2- 풀 애니메이션

 

---

UV란?

 

Texcoord

텍스쳐 좌표계

3D 모델링이 끝나면 텍스쳐를 입혀야하죠.

그 텍스쳐를 오브젝트의 어디에 입힐지 UV를 피면서 각 버텍스에 저장 해줍니다.

 

위와같은 UV 정보는 색상과 같이 숫자로 저장됩니다.

R float3(1,0,0)

G float3(0,1,0)

B float3(0,0,1)

RGB 색상값이 float3으로 저장되듯이 UV도 x,y좌표를 0~1의 float2로 나타냅니다.

그렇기 때문에 어떤 크기의 이미지든 백분율로 정사각형의 한 장에 UV 정보를 담을 수 있습니다.

각 모서리 사이의 값은 선형보간(lerp)로 보간됩니다. 

 

---

시작하기 전 할 것

1. 코드 정리하기

2. 대소문자 주의

 

Tiling & Offset

 

UV이동을 해봅시다. 원리는 아래 사진들과 같습니다.

 

텍스쳐의 Wrap Mode는 기본적으로 Repeat로 되어있어 (0,0)과 (1,1)을 넘어갈 시 같은 이미지가 반복해서 나타나게 됩니다. 흔하게 보는 타일링이죠. 

 

 

Offset

그래서 UV에 float2(x,y) 값을 더하면 UV전체에 값이 더해지면서 아래처럼 UV위치가 이동 합니다. 이것이 오프셋

float4 변수명 = tex2D (_텍스쳐 변수명, IN.uv_텍스쳐 변수명 + 이동값);

UV는 float2이기 때문에 더할 때도 float2(x,y)값을 더해줄 수 있습니다.

 

 

 

Tiling

 

2를 곱했다고 했을 때 (0.0)좌표는 2를 곱해도 0인 것과 같이 값에 따라 이동하는 결과가 다르게 나옵니다. 

2를 곱했을 시 아래와 같이 타일링으로 많이 보던 결과가 나오게 됩니다.

float4 변수명 = tex2D (_텍스쳐 변수명, IN.uv_텍스쳐 변수명 * 이동값);

float2를 더해줄 수 있습니다. 대신 x,y값이 서로 다를 경우 UV의 형태도 변화합니다. 

 

텍스쳐 변수를 재정의하면 에러가 뜹니다. 보기 편하라고 주석 처리를 안했습니다.

---

타임

 

이제 오프셋을 이용해 UV애니메이션을 제작해봅시다.

애니메이션 확인을 위해서 Animated Materials체크 확인하기.

 

타임 뒤의 속도 설정은 x,y,z,a로 간략하게 나타냅니다.

_Time. (t/20, t, t*2, t*3)

float4 c = tex2D (텍스쳐 변수명, IN.uv_텍스쳐 변수명 + _Time.y);

이렇게 더해줄 경우 x,y에 똑같이 Time값이 더해지며 (1,1)방향인 대각선 위로 올라가게 됩니다.

Time은 유니티가 켜지는 순간부터 작동되는 자체 시간으로 계산됩니다.

 

다른 방향으로 이동하기

 

이동 방향의 원리에 대해 이해할 필요가 있습니다. float2(x,y)로 이동하며 (0.0)을 기준으로 음수, 양수에 따라 아래 이미지처럼 이동합니다. 

 

개발새발

다음은 어디에 어떻게 더해줄 것인지 파악합니다. 

 

UV애니메이션은 UV에 Time을 더한 것

구현하려면 Time을 UV에 각각 얼마(x,y) 더할 것인지 정해야합니다.

다른 방향으로 움직이기 위해서는 UV에 각각 값이 다른 float2를 더해줍니다. 어떤 방식으로 더할지는 자유.

보기 좋으면 괜찮다고 생각합니다.

 

---

텍스쳐를 이용한 애니메이션

 

시작하기 전 알파값 출력

 

사용된 텍스쳐

 

 

 

노이즈 텍스쳐에 애니메이션을 추가하고, 움직이는 텍스쳐를 불 텍스쳐의 UV에 더하는 방식으로 제작됐습니다.

(주석 참고)

 

---

응용1

전에도했던 풀 애니메이션 제작하기 

 

사용 텍스쳐

움짤을 잘못끊어서 끊겨보임

과정, 전체 코드

 

 

위의 과정과 비슷하나 뱡향, 오프셋, 텍스쳐 수정 등 자잘한 부분만 수정 되었습니다.

이번에는 텍스쳐가 상단에 침범하는 부분을 Wrap Mode를 Clamp로 처리했습니다.