내용 정리
- UV
- UV 제어 (Tiling And Offset)
- UV 애니메이션 (Time)
- 응용
- 불 이펙트
- 풀 애니메이션
UV(Texcoord)란?
텍스쳐 좌표계
3D 모델링을 시작하면서는 텍스쳐 작업을 하기 위해 3D 모델의 표면을 평면으로 표현하는 것
이라고 배우며, 아래의 사진들과 같이 전개도로 보면 이해하기 쉽습니다.
여러 예시와 실습으로 같이 이해해봅시다.
왜 UV인가?
3D 공간이서 수평, 수직, 높이를 이미 X, Y, Z로 사용하고 있기 때문에 U, V는 2D 공간에서 수평, 수직 축을 나타냅니다.
X-U
Y-V
Z-W
저번 포스팅에서 RGB를 float3(0.0,0.0,0.0)의 숫자로 이루어져 있었듯이 UV의 위치도 float2(0.0,0.0)로 0~1의 숫자로 이루어져있습니다.
그렇기 때문에 어떤 크기의 이미지든 백분율로 정사각형의 한 장에 나타낼 수 있습니다.
+ UV 축 위치에 대해
유니티와 언리얼의 UV의 축은 서로 다른데 그 이유는 언리얼은 DirectX 기반이고, 유니티는 OpenGL 기반으로 이루어져 있기 때문입니다.
DirectX? OpenGL?
ko.wikipedia.org/wiki/DirectX [DirectX 위키백과]
ko.wikipedia.org/wiki/OpenGL [OpenGL 위키백과]
둘 다 확인해보면 간략하게 API 표준 규격이라는 것을 알 수 있습니다.
그럼 API는 무엇인가
API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)
응용 프로그램에서 사용할 수 있도록, 운영 체체나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다.
기능들을 그래픽으로 빠르게 나타내기 위한 것이라고 이해할 수 있습니다.
결론은 서로 다른 인터페이스 규격을 사용해서 UV의 좌표 축이 서로 다르다는 것 같습니다.
UV 시각화해보기
R-X-U
G-Y-V
B-Z-W
위에서 UV의 위치가 float2(0.0,0.0)의 숫자로 이루어져 있다는 것을 쉽게 이해하기 위해서 눈으로 확인해봅시다.
Split으로 UV의 RGB를 따로 봐보겠습니다.
아래 이미지가 결과입니다.
R과 G가 0~1의 그라데이션으로 이루어져 있으며, float2이기 때문에 B는 없다는 것 까지 확인했습니다.
이제 유니티의 UV가 빨강 노랑 초록으로 알록달록하게 표시되는 이유도 좌표의 숫자를 색으로 표현해놨기 때문이라는 것을 알 수 있습니다.
UV 제어해보기
UV가 숫자라는 것을 알았으니 조금 가지고 놀아봅시다.
Add
하나는 그대로 있고 하나는 아래로 내려와 보입니다. 이렇게 보이는 이유는 더한 값만큼 UV의 위치 값이 변했기 때문입니다.
텍스쳐 설정 Wrap Mode에서 Repeat로 설정되어있다면 이미지가 계속 반복되어 위와 같은 결과가 나오게 됩니다.
Multply를 이용한다면 UV값이 변하며 아래와 같이 타일링을 적용시킬 수 있습니다.
이런 기능을 Tiling And Offset으로 바로 적용할 수 있습니다.
Time을 이용한 UV 애니메이션
배운 기능으로 UV 애니메이션을 만들어봅시다.
이동하기 위해는 시간 개념이 필요하기 때문에 Time을 이용합니다. Add로 UV와 Time을 더하면 텍스쳐가 우측 상단 대각선 방향으로 움직이게 됩니다.
우측 상단으로 이동하는 이유는 x, y에 동시에 타임 값을 더해줘 (1.1) 방향으로 계속 이동하기 때문입니다.
기초는 알았으니 응용을 해봅시다.
연습 1 가로로 흘러가는 애니메이션 만들기
대각선 방향이 아닌 한 방향으로만 흘러가도록 만들어봅시다.
과정
방금 배운 기초를 활용해봅니다.
X, Y가 움직이고 있는 상태에서 X만 움직이게 하려면?
일단 각자 다른 행동을 할 수 있도록 나눠봅니다.
X만 움직이려면? X에만 Time값을 더해주면 되지 않을까
나눠놨으니 다시 합치는 과정도 필요할 겁니다.
무사히 가로로 움직입니다.
+ 간략하게 Time을 R로 UV와 더하는 방법도 있습니다.
연습 2 애니메이션의 방향과 속도를 조절할 수 있게 만들어보자
한 방향으로 이동할 수 있게 되었으니 여러 방향으로 이동하며, 속도도 조절할 수 있도록 만들어 봅시다.
과정
우선 Time의 속도를 조절할 수 있도록 해봅시다. 연습 1의 간략한 방법에서 변형하여 제작합니다.
속도를 조절하기 위해서는 Multply를 이용합니다. 값에 따라 속도가 달라지고, 0을 곱하면 멈추며. 0 이상 이하로 이동 방향이 달라집니다.(0 이하의 수를 곱하게 될 시 -방향으로 이동하기 때문)
다른 방향으로도 이동할 경우 multiply를 하나 더 추가합니다. float1도 float2 또는 float4(Properoies에는 float1 또는 float4만 추가 가능하기 때문)으로 바꿔 주가 된 multiply와 연결해 줍니다.
두 multiply를 combine으로 합치면 X, Y의 값에 따라서 다양한 방향과 속도로 이동할 수 있습니다.
응용
불 이펙트 만들어보기
타닥타닥
사용한 텍스쳐 (알파 있음)
위아래가 연결되어있는 텍스쳐를 이용해서, 불이 위로 타오르는 듯한 연출을 해봅시다.
연습 1에서 가로로만 이동했다면 이번에는 세로로 이동하기 때문에 Time값을 G로 내보내 줍니다. Time과 Combine 사이의 Multiply는 방향을 바꿔주기 위해 -1을 곱해준 것입니다.
텍스쳐가 어둡거나 색이 마음에 안 든다면 조정할 수도 있습니다.
여기에 불의 형태를 넣어줍니다.
불의 형태를 가진 텍스쳐를 다른 텍스쳐와 합치는 과정이 필요합니다. 두 알파 이미지에 Multiply를 이용하면 값이 0인 검은색 부분 위주로 이미지가 결합됩니다. RGB이미지는 Add로 더 밝게 합쳐줍니다.
여기까지 진행하면 이런 겉이 조금씩 움직이는 불 이펙트가 나오게 됩니다.
여기에 일렁이는 표현을 더해줍니다.
Time을 보면 단색의 이미지로 나타나며 UV애니메이션에 적용할 시 균일하게 텍스쳐 전체가 이동하게 됩니다. 그러나 아래의 텍스쳐같이 각 위치의 값이 다른 이미지를 넣으면 어떻게 될까요?
아래 사진과 같이 다른 부분이 서로 다른 속도로 이동하게 됩니다. 이것을 불 이펙트에도 적용시켜봅니다.
이미지의 색상을 조절함으로 일그러짐의 강도를 조절할 수 있습니다.
위의 튀어나오는 부분은 텍스쳐에서 외각의 여백을 늘리는 방법 등으로 해결 가능합니다.
응용 2
풀 애니메이션
오늘 배운 내용들과
자료로 가지고 있는 텍스쳐를 이용해 제작해보았습니다.
속도 조절, 강도 조절이 가능합니다. (그러나 너무 강하게 하면 아래 텍스쳐가 위에 튀어나옴)
'Unity3D > shader_스터디' 카테고리의 다른 글
| [Unity 쉐이더] properties 추가 (2) | 2021.03.06 |
|---|---|
| [쉐이더] 버텍스 컬러 활용 (0) | 2021.02.12 |
| [쉐이더]색깔 놀이2_Lerp (0) | 2021.01.23 |
| [쉐이더] Float과 색깔 놀이 (0) | 2021.01.16 |
| [쉐이더] 초보자가 알아보는 텍스쳐 포맷 (0) | 2021.01.16 |
