Vertex 좌표, Texture좌표(UV 좌표)

버텍스 좌표 : 화면에 그려줄 좌표
텍스쳐 좌표 : 텍스쳐 이미지의 좌표

위에 두개의 내용으로만 보면 이해가 안될수도 있는데..

---

1.  버텍스 좌표계

우선 버텍스 좌표는 우리가 출력하는 디바이스 화면에서 그려줄 각각의 정점을 찍어서 그림을 그리기 위한 좌표이다.

 

예시로 정사각형을 그려보자면

vertics[0].position = D3DXVECTOR3(-0.5f, -0.5f, 0.0f);  // 0
vertics[1].position = D3DXVECTOR3(-0.5f, +0.5f, 0.0f);  // 1
vertics[2].position = D3DXVECTOR3(+0.5f, -0.5f, 0.0f);  // 2
vertics[3].position = D3DXVECTOR3(+0.5f, +0.5f, 0.0f);  // 3

 

요런 형식으로 정점을 찍어서 연결후 선을 이어서 그려주면 아래 그림처럼 디바이스 영역에 사각형으로 그려준다

---

2. UV 좌표계

위에 버텍스 좌표계와 다르게 UV 좌표계는 해당 그릴려는 이미지의 기준으로 아래와 같이 기준이 된다.

UV 좌표계는 무족건 0 ~ 1 사이 값으로만 지정되며

왼쪽 상단이 시작지점으로 0. 0 

우측 하단이 끝지점으로 1, 1

 

예시로 5각형으로 아래 코드처럼 만들고 출력을 하면

vertics[0].position = D3DXVECTOR3(-0.4f, -1.0f, 0.0f);  // 0 왼쪽 하단
vertics[1].position = D3DXVECTOR3(-0.8f, +0.4f, 0.0f);  // 1 왼쪽 상단
vertics[2].position = D3DXVECTOR3(+0.0f, +1.0f, 0.0f);  // 2 중앙 상단
vertics[3].position = D3DXVECTOR3(+0.8f, +0.4f, 0.0f);  // 3 오른쪽 상단
vertics[4].position = D3DXVECTOR3(+0.4f, -1.0f, 0.0f);  // 4 오른쪽 하단
		
vertics[0].UV = D3DXVECTOR2(0.3f, 1.0f); // 0
vertics[1].UV = D3DXVECTOR2(0.1f, 0.3f); // 1
vertics[2].UV = D3DXVECTOR2(0.5f, 0.0f); // 2
vertics[3].UV = D3DXVECTOR2(0.8f, 0.3f); // 3
vertics[4].UV = D3DXVECTOR2(0.6f, 1.0f); // 4

이런 형식으로 5각형 그려지는곳에 딱 맞게 그려줄수 있는데 여기서 위에 있는 정점 좌표와 UV 좌표의 값 비율을

약간 다르게 해보면...

 

이렇게 이상하게 되어버린다.. 사실 위쪽 그림도 비율이 약간 안맞다 

 

---

결론

1. UV, Vertex 좌표계는 서로 다르기 때문에 유의 해서 값을 넣어야 한다 

2. 5각형 같이 다른 도형에 그림을 그릴때 UV 좌표계와 비율을 맞춰야 한다

3. 그림을 넣을 UV 좌표계는 변경할때 다같이 비율 맞춰서 넣어야 그림이 알맞게 그려진다