텍스쳐 매핑

무게 중심 좌표의 활용

삼각형 칠하기

• 무게 중심좌표의 의미

• 무게 중심 좌표는 선형적으로 보간됨
• 따라서 무게중심좌표를 활용하면 삼각형의 내부를 칠할 때 선형적인 효과를 부여할 수 있음
• 이를 위해 각 점에 위치와 더불어 부가적인 데이터를 부여
• 이를 정점 (Vertex) 라고 함
• 아래는 정점에 좌표와 더불어 색상 속성을 부여한 데이터 구조

• 각 정점이 가지는 색상을 무게중심좌표에 따라 선형보간하면 다음과 같은 결과가 만들어짐

텍스쳐 (Texture) 매핑

• 이미지를 불러들여서 삼각형을 채우는데 사용하는 기법을 의미

• 삼각형에 붙이기 위해 게임이 불러들인 이미지를 텍스쳐 (Texture) 라고 함

• 이 이미지는 삼각형에 대응되는데 삼각형은 벡터 세 개로 조합해 만들어짐

• 그렇다면 여기에 대응되는 정보는 실수여야 하므로 텍스쳐 역시 벡터를 통해 관리됨

• 그래서 텍스쳐의 모든 요소는 가로 세로의 범위가 $[0, 1]$인 2차원 벡터로 관리됨

• 이것이 UV 좌표

• 삼각형을 실제로 화면에 표현하기 위해 픽셀화(Rasterization)하는 과정에서 데카르트 좌표는 스크린좌표로 옮겨지는데 여기에 대응되는 텍스쳐 또한 $UV$좌표를 통해 해당 무게중심좌표에 대응하는 색상을 얻어서 적용해주어야 함

• 화면을 구성하는 단위와 텍스쳐에 사용되는 이미지의 단위 모두 넓은 의미에서 픽셀(Pixel)이라고 하지만 렌더링 과정에서는 다음과 같이 용어를 구분

  • 텍셀(Texel) : 텍스쳐 이미지의 구성 단위.
  • 픽셀(Pixel) : 모니터 화면의 구성 단위.

• 여기서 삼각형이 그릴 픽셀 영역과 텍스쳐가 제공하는 텍셀의 영역 크기는 다르기 때문에 텍셀의 정보를 얻어 전달하는 과정에서 몇 가지 고려사항이 발생함

텍셀이 픽셀보다 큰 경우 (확대)

• 픽셀에 대응되는 텍셀이 더 큰 경우에는 다음의 두 가지 방법을 고려해 적용
  • 가장 가까운 텍셀의 색상 정보를 그대로 가져오기 : Nearest-neighbor interpolation
  • 해당 UV좌표를 둘러싼 네 개의 텍셀의 색상 값을 파악하고 이를 보간해 최종 색상을 구하기 : Bilinear-interpolation
  • 게임 엔진에서 이를 Filter Mode라는 설정으로 선택할 수 있게 제공
    유니티 엔진의 텍스쳐 설정

텍스쳐 매핑의 구현

• 다음과 같은 이미지에서 얼굴 영역에 대한 UV 좌표를 찾음

• 삼각형의 메시를 구축할 때 각 정점에 대응되는 UV 좌표를 지정

• 이를 구현한 최종결과는 다음과 같이 보여짐
• 실제 사용된 $64\times 64$의 작은 이미지이지만 Nearest-neighbor 보간 방식을 사용해 구현하면 픽셀 느낌을 그대로 살릴 수 있음

텍셀이 픽셀보다 작은 경우 (축소)

• 하나의 픽셀을 결정하기 위해 선택할 수 있는 텍셀이 여러 개가 된다면 이를 보다 번짐 현상을 없애고 효율적으로 구성하기 위해 축소된 이미지를 미리 만들어놓고 이를 활용하는 방법을 사용

• 인위적으로 축소된 텍스쳐를 밉맵(Mipmap)이라고 하며 이미지를 불러들일 때 다음과 같이 추가 이미지를 생성해 저장

출처 : 위키피디어 Mipmap

• 물체가 카메라로부터 지정한 거리만큼 떨어진다면 밉맵으로 생성된 텍스쳐 중 하나를 선택해 원 이미지 대신 이를 사용
• 밉맵은 어찌보면 깊이에 따라 적용되는 점점 작아지는 이미지 소스라고 할 수 있음
• 밉맵까지 고려해 3차원으로 보간해 픽셀을 계산한 방식을 Trilinear Interpolation

삼각형이 카메라에 비스듬히 배치된 경우

• 이러한 보간을 진행해도 면이 카메라에 비스듬히 배치된 경우에는 선형 보간을 사용해 해당 장면을 깨끗하게 표현하기가 쉽지 않음

• 이때 비스듬히 표현된 이미지들을 별도로 모아서 대신 제공하는 방식을 비등방성(Anisotropic) 필터링이라고 함

출처 : 위키피디어 anisotropic filtering

• 이 기법을 사용하면 비스듬히 표현된 면을 흐릿함 없이 깨끗하게 표현하는 것이 가능

출처 : 위키피디어 anisotropic filtering