UV Texture Coordinates and Texture Mapping - OpenGL / DirectX

원문 : http://thedev-log.blogspot.kr/2012/07/texture-coordinates-tutorial-opengl-and.html

이 글은 필요에 의해 모자란 번역실력으로 번역한 글입니다. 

이해를 돕기 위해 원문을 보시길 추천드립니다.

나는 지금 학생이 아니라서, WebGL을 좀 심도있게 살펴보고 새로운 

3D와 그래픽 개념을 배우기 위해 노력하고 있다.

범프매핑, 그림자 매핑 같은 것들을 배우기 전에 텍스처 매핑에 대해 기반을

다지기 위해 간단한 튜토리얼을 적기로 했다.

나의 생각으로는 새로운 것을 배울 때 좋은 방법은 관련된 

위키피디아 페이지들을 검색하는 것이다.

그러므로 여기 글을 읽기 전이든, 일고 나서든 위키피디아 페이지를

한번 열어서 읽어보길 권장한다.

텍스처 매핑이 처음 사용된 것이 에드윈 캣멀의 1974년 박사학위 

논문이었다는 것을 알고 있는가?

불과 몇년뒤에 Atari(게임회사)에서 사용되어진건 그다지 놀랄일이 아니다.

텍스처 좌표는 mesh를 생성하기 위해 2D 또는 3D 지오메트리에서 

고정 이미지를 사상시키기 위해 사용되어졌다.

텍스처 좌표를 정의하는 몇가지 방식이 있다.

어느 방식이든 기준은 u,v 짝으로 이루어 지고, 0~1범위의

floating 값을 갖는다는 것이다.

기본적으로 어떤 종류의 텍스처 좌표 개념이든 특정 지오메트리의 정점에

사상시키기 위해 좌표를 사용해야 한다.

정점들 사이에 있는 픽셀들 값은 보간되어진다.

모든 종류의 3d 오브젝트들은 2d 텍스처를 사용하여 사상시킬수 있지만, 

사상시키는 작업은 다른 모양을 가진 오브젝트들에서 다르고, 특정 오브젝트는

다른 오브젝트보다 더 힘들수도 있다.

나는 대부분의 스튜디오에서 일반적인 작업 흐름이 첫번째로 지오메트리를 만들고,

그리고 나서 모델을 펴고 텍스처를 그리고, 오브젝트의 정점에 텍스처 좌표를 정확하게 

매칭시키기 위해 툴을 사용한다고 생각한다.

매핑된 데이터는 그리고 나서 프로그래머에게 넘겨진다.

나는 모델링 방면에서는 경험이 없기 때문에 이 작업에 대해서 더 자세히 아는 사람이

있다면 그에대해 듣고싶다. 

많은 그래픽 라이브러리들이 텍스처를 사용자 정의 매핑을 지정하는 프로그래머에 대해

몇가지 매커니즘을 가지고 있는 반면, 간단한 지오메트리에 대해서는 

사용자를 위해 기본 방법으로 이것들을 처리한다

즉, 좌표 시스템이 어떻게 설정되든지 상관없이 항상 0~1 사이의 floating 값으로 설정된다.

일반적으로,  이는 우리가 텍스처의 비율로서 특정 위치를 지정하는 것을 의미한다.

정점들 사이의 값을 보간할 필요가 있기 때문에 이렇게 하는게 쉽다.

비록, 우리 모두가 학교에서 데카르트 좌표를 배웠고 가장 단순하더라도,

텍스처 좌표로 잘 사용되지는 않는다.

대신에, 텍스쳐는 UV라고 불리는 텍스처 좌표에 따라 매핑된다.

일반적으로 UV좌표는 이미지의 가로나 세로에 상관없이 같은 범위를 지정한다.

지오메트리에 텍스처를 매핑할때 데카르트 좌표를 사용하지 않더라도,

디지털 이미지는 데카르트 그리드로 저장되어지기 떄문에 관련이 있다.

각각의 단일 픽셀은 그리드의 하나의 사각형이다.

하나의 이미지는 개별로 정량화 할수 있는 픽셀들로 이루어져

첫번째 픽셀 1x1에서 시작하여 마지막 픽셀은 img_width x img_height가 될 것이다.

이제 사용 가능한 범위의 값을 가지고 있고 이 값들을 0~1사이에 floating 값으로

모두 매핑시키려 하는데, 어떻게 할수 있을까?

첫번째로 해야 하는 일은 각 값을 최대 가능 범위의 값으로 나누는 것이다.

수학에 관해서 하루종일 이야기 할수 있지만 그냥 좀 더 정식적인 방법을 보자.

만약 우리가 이미지를 데카르트 그리드에서 정렬되어진 x,y 짝들로 정의한다면,

그 이미지의 텍스처 좌표를 U = x/(img_width) 와 V = y/(img_height)와 같이

정렬되어진 U,V 짝들의 범위로 정의할 수 있다.

가로 700 세로 512 픽셀을 가지는 텍스쳐를 예로 들어보자.

픽셀은 완벽히 정사각형이고 모두 같은 크기므로 우리는 700x512개의 

픽셀들을 가지고 있다.

UV 텍스쳐 좌표가 310x400에서 얼마인지 알수있는지 보자.

텍스쳐 좌표는 아래와 같이 계산할 수 있다.

U = 0.44286 (310/700) V = 0.78125 (400/512)

나는 OpenGL과 DirectX에서 똑같이 유효한 튜토리얼을 만들거다.

위에서 언급했던 내용은 실제로 두 예에 적용된다.

실제로 단지 시작점이 어디인지가에 대해 두 API들은 동의하지 않았다.

내 생각에 사람들이 어떤 일을 하기위해 최고의 방법은 없고

모든 사람들이 항상 동의하는 것은 아니라는 것을 깨닫는게 중요한거 같다.

여러경우에서 일을 처리하기 위해 하나 이상의 시스템을 배워나가야 한다.

텍스처 좌표의 경우 OpenGL과 DirectX의 큰 차이 처럼 말이다.

OpenGL에서 텍스처 좌표의 시작점은 왼쪽아래이며,

DirectX에서는 왼쪽 위 이다.

이는 우리의 첫번째 좌표(x)가 두 시스템에서 같을거라는 걸 의미한다.

두번째 좌표(y)는 둘 사이에서 뒤집혀야 한다.

아래의 간단한 이미지가 이 차이점을 말해준다.

두번째 좌표(y)를 1로감산함으로써 이 작업을 해줄 수 있다.

DirectX to OpenGL --- (U,V) --> (U, 1-V)

OpenGL to DirectX --- (W,X) --> (W, 1-X)

DirectX (U,V)=(0.4, 0.75) --- 40% from left, 75% from top

OpenGL (U,V)=(0.4, 0.75) --- 40% from left, 75% from bottom

DirectX (U,V)=(0.4, 0.25) --- 40% from the left, 25% from top / 75% from bottom

OpenGL (U,V)=(0.4, 0.25) --- 40% from the left, 25% from bottom / 75% from top

Reference Link

- UNITY_UV_STARTS_AT_TOP

- unity doc 플랫폼 별 렌더링 차이

- unity doc - Predefined shader preprocessor macros

- 유니티 실행시 GL, DX 선택

- UV Texture Coordinates and Texture Mapping

- Unity, 널 사랑하지만 너의 UV만은 용납할 수 없다.