본 아티클은 UI 및 간단한 VFX 제작에 도움이 될만한 Graphics 에 대한 이해를 돕기 위해 작성했습니다.


아직 한참 공부가 필요한 입장에서 이런 글을 쓰는 것이 혹여나 잘못된 정보를 퍼뜨리지 않을까 불안합니다만.

많은 분들이 게임 그래픽을 쉽게 이해하는데 도움이 되길 바라는 마음으로 작성해봅니다.

혹시 잘못된 부분 지적해주시면 고치도록 하겠습니다.


추후에 실제 Shader Code 작성 및 VFX 제작을 위한 튜토리얼도

시간님이 허락하신다면... 제작해보도록 하겠습니다.


매끄러운 전달을 위해 반말로 작성된 점 양해부탁드립니다.

문의 사항은 포스팅에 댓글로 적어주시면 최대한 답변 드리겠습니다.


감사합니다. :D




2편 - UVW란?




XYZ - 1 = UVW

(충격적인 네이밍 센스.. 역시 개발자들이란..)



UV Coordinate (UV 좌표) 라고 하는 값은 RGB, XYZ 와 같이 UVW 라는 세 개의 값을 갖는다.

하지만 3차원 좌표값을 필요로 하지 않는 특성상 W 값은 제외하고 주로 UV 두 개의 값만을 사용한다.


이것은 텍스쳐가 어떤 좌표에 그려질지에 대한 정보를 갖고 있고,

이미지로 표현하면 아래와 같은 영롱한 색상이 된다.


[ 지긋지긋한 놈.. ]



이러한 색상을 갖게 되는 이유는 각각의 픽셀들이

x 좌표 값을 0~1 까지, y 좌표 값을 0~1 까지 갖고 있는 두 값을 묶어서 (RGB로 표현하면 (x값, y값, 0) 이 된다) 저장하기 때문이다.


( ※ 일반적으로 UV 좌표 값은 2개의 값만 가지는 데이터 타입 (float2, fixed2, half2 등) 을 프로그램 내에서 연산하여 사용한다 )

 float, half , fixed 는 순서대로 값의 정확도에서 차이를 보이는데, UV coordinate 는 정확도를 요하는 값이기에 float 을 주로 사용한다 )

 각 데이터 타입에 대한 설명은 본 아티클의 난이도를 넘어가므로, 이 글에서 다루지 않는다 )


다양한 해상도의 텍스쳐를 모두 문제없이 불러들여야하므로 좌표값의 정확도가 중요하기에,  

저장할 수 있는 정보양에 비해 덩치가 큰 이미지를 사용하기보다는 프로그램 내에서 연산하여 사용하는 것이다.


아래의 그림을 보면 결과적으로 색을 가진 것 같이 보이지만, 

사실 각각의 픽셀들이 (0,0), (0, 0.01), (0, 0.02) .... ~ (1, 1) 등의 값을 표현하고 있다.




[ 각 값 사이에도 무수히 많은 좌표 값들이 존재한다 ]



Pixel shader 단계에서 이 좌표값 (Coordinate) 에 따라 텍스쳐의 이미지를 불러들인다.

간단한 UV scrolling 같은 경우, 각각의 좌표 값에 특정한 속도로 값을 더해주는 개념이라고 생각하면 된다.


이렇게 값을 더해주면 일정 시간이 흐른 후 좌표값이 1을 초과하게 되는데 

이 때 초과한 값을 어떻게 처리하느냐에 따라 아래의 예시와 같이 다르게 보인다.


먼저, 1을 초과한 좌표 값을 다시 0부터 반복되게 하면 해당 픽셀에서 불러들이는 이미지의 좌표값이


0.1 0.2 0.3 0.4 .... 0.8 0.9 1.0 0.0 0.1 0.2 .... 0.8 0.9 1.0 0.0 0.1 0.2 0.3 ....


이런 식으로 반복되게 되고, [스크롤 예시1] 과 같이 보인다.

( ※ Unity Image Setting 에서 Repeated 와 같다고 생각하면 된다 )




[ 스크롤 예시1 - X 값에만 특정한 값을 더해주어 수평으로 움직임 ]



위와 다르게 1을 초과하더라도 좌표값을 초기화하지 않을 때는, 

말하자면 좌표 범위를 초과한 상태가 되고 [스크롤 예시2] 와 같이 마지막 픽셀이 반복적으로 보이게 된다. 

( ※ Unity Image Setting 에서 Clamp 와 같다고 생각하면 된다 )



[ 스크롤 예시2 ]



자, 그럼 UV 좌표에 값이 다른 방식으로 작용했을 때 어떻게 되는지 살펴보자. 



[ UV 좌표 X 1 ~ 5 ]


UV의 Tiling 을 조절할 때에는 UV 좌표 값에 특정 값을 곱해주면 된다.

1보다 작은 수를 곱해주면 확대, 1보다 큰 수를 곱해주면 축소된다고 볼 수 있다.

( ※ 최적화를 위해 나누기는 가급적 사용하지 않는다 예를 들어, a / 10 보다는 a x 0.1 을 사용하는 것이 좋다 )





[ 삼각 함수를 적용한 이미지 ]




이러한 UV 값은 활용하기에 따라 무한한 활용성을 가지는데,

약간의 이해있으면 아래와 같이 이미지 없이 그림을 그리는 것도 충분히 가능하다.



[ Sprite 없이 Shader Language 로만 만든 이미지 in Unity (영상 링크) ]



이제 이 UV 좌표 라는 데이터가

얼마나 많은 활용성을 가진 개념인지 대충 감이 오는가?


이 외에도 Shader 는 수 없이 많은 정보를 이용해서 시각효과를 만들어낸다.

World 에서의 좌표, 카메라로부터의 거리, Vertex가 받는 빛을 활용하기도 한다.


Shader 의 가능성에 설레는 독자의 심장 소리가 여기까지 들리는듯하다


피의 복수의 두번째 장이 끝이났다.

그럼 이제 막장으로 넘어가보록 하자..




궁금하신 내용 댓글로 달아주시면 확인하는데로 답변 드리겠습니다. :)

질문 사항이 다른 분들에게도 공유될 수 있게 가급적 공개 댓글로 적어주세요.


감사합니다.

  1. 와우쭈 2018.07.13 10:06

    복수는 누구에게 하는건지 궁금합니다

+ Recent posts