[GPU] Texture Filtering (Bilinear vs. Trilinear vs. Anisotropic)

Graphics 관련 공부를 하면서 계속 새로운 것을 알게되고 정리해야 할 내용이 너무 많아지고 있다. 솔직히 이제는 새로운 정보에 대해서 제대로 이해하는지 걱정이 된다. Graphics 연산에 Texture는 정말 필수 요소이다. Object (Triangle)의 색상을 결정하는 과정에 Texture 이미지를 사용하게 된다. 쉽게 설명하면 Cube 물체가 있다고 생각하고 색종이로 Cube 물체를 감싸게 되면 Cube는 색종이 색을 가진 Cube 처럼 보인다. Texture 이미지는 Cube를 감싸는 색종이와 같다. Texture은 요즘 게임등에 아주 많이 사용된다. 정확히 말하면 아주 기본적인 요소이다.

보통 Object의 크기와 Texture 이미지의 크기가 완벽하게 같지 않기 때문에 색상을 선택하기 위해서 Nearest Neighbor Filtering, Bilinear Filtering, Trilinear Filtering 등을 사용한다. 이와 더불어 Anisotropic Filtering이라는 방법이 있다. Anisotropic Filtering은 Object가 비스듬하게 누워있는 경우에 색상 Quality를 향상하는 방법이다.

Nearest Neighbor Filtering

그림 1: Nearest Neighbor Filtering 방법 (출처 1)

Pixel 좌표를 기준으로 Texture에서 4개의 Pixel 정보 로딩한다. 그림 1은 4개의 Pixel 값을 로딩한 결과와 실제 Pixel의 좌표를 보여준다. 그림 1에 “+”로 표시된 부분이 실제 Pixel의 좌표이다. Nearest Neighbor Filtering은 현재 Pixel 좌표에 위치하는 색상은 단순히 선택하는 것이다.

그림 2: Nearest Neighbor vs. Bilinear Filtering 결과 이미지 (출처 1)

해당 방법은 단순한 방법이지만 Object의 크기가 Texture 크기보다 크거나, 작은 경우 색상이 계단처럼 각이지는 현상이 발생한다. 그림 2의 왼쪽 이미지는 Nearest Neighbor Filtering 방법으로 색상을 결정한 최종 이미지를 보여준다.

Bilinear Filtering

그림 3: Bilinear Filtering 방법 (출처 1)

Bilinear Filtering 방법은 Nearest Neighbor Filtering과 비슷하게 Pixel 좌표를 기준으로 주위 4개의 Pixel 값을 로딩한다. 하지만 단순 좌표 “+”에 해당하는 실제 Pixel 값을 바로 사용하는 것이 아니라 주위에 있는 4개의 Pixel 색상 값을 합쳐서(Interpolation) 최종 Pixel 색상을 선택하게 된다. 그림 3은 Bilinear Filtering을 사용하여 색을 결정하는 과정을 보여준다.  이처럼 4개의 Pixel 값을 혼합하여 만들기 때문에 그림2 오른쪽과 같이 약간 부드러운 형태를 가진다.

Trilinear Filtering

그림 4: Mipmap Texture 이미지 (출처 1)

Trilinear Filtering을 설명하기 이전에 Mipmap 설명이 먼저 필요한 것 같다. Mipmap이란 Texture 이미지를 2배씩 작은 크기로 만들어서 Texture를 여러개 만드는 것을 의미한다. 정확하지는 않지만 거의 항상 1/2 크기로 줄여서 Texture 이미지를 생성하는 것 같다. 그림 4는 Mipmap을 생성한 결과를 보여준다. 보통 Mipmap을 사용하면 작은 Object에 Texture를 사용하면 사이즈가 작은 Texture 이미지의 Pixel 데이터만 Loading하기 때문에 Memory Bandwidth를 적게 사용한다고 한다.

Trilinear Filtering의 경우 Mipmap으로 생성된 Texture 이미지 2개를 사용하여 최종 Pixel 값을 결정한다. 예를 들어 Object의 크기는 100 x 100이라고 가정하자. 그리고 Texture 이미지는 256 x 256 크기부터 32 x 32 크기까지 여러 개의 Texture 이미지가 Mipmap으로 생성되어 있다고 가정하자. Object의 색상을 결정하기 위해 Object와 크기가 비슷한 128 x 128, 64 x 64 크기의 Texture 이미지 2개를 선택한다. 2개의 Texture 이미지에서 Bilinear Filtering을 사용하여 2개의 색상을 결정하게 된다. 예를 들어 128 x 128 Texture이미지에 Bilinear Filtering을 적용한 Pixel 값이 128이고, 64 x 64 Texture 이미지에 Bilinear Filtering을 적용하여 얻은 값이 64라고 가정하자. Trilinear Filtering은 위 2개의 값을 다시 Interpolation 하여서 최종 색상값을 결정하게 된다. 128과 64를 Interpolation 하면 100이라는 값을 얻을 수 있다. 설명의 편의를 위해서 단순한 Interpolation 방법을 사용했다. 하지만, 아마도 Interpolation 방법도 여러가지가 있는 듯 하다.

그림 5. Bilinear vs. Trilinear Filtering에 따른 이미지 Quality 차이 (출처 2)

그림 5는 Bilinear과 Trilinear Filtering에 따른 이미지 차이를 보여준다.

Anisotropic Filtering

Anisotropic Filtering은 다소 어려운 주제인 것 같다. 실제로 구현방법도 다양하고 어떻게 Texture를 사용하여 Pixel 값을 결정하는지에 대한 이해를 다 하지 못하였다. 간단한 설명만 작성할 예정이고 시간이 나면 논문을 읽고 따로 정리해볼 계획이다. Anisotropic Filtering의 경우 특정 Object가 누워있거나, 대각선으로 비스듬하게 있을 때 Texture 이미지를 사용하여 값을 선택할 때 Quality를 향상하는 방법이다. 보통 Texture는 사각형으로 되어 있다. 하지만 우리가 게임을 하는 경우 대부분의 Object는 반듯한 사각형이 아니다. 간단한 예로 포트나이트, 배틀그라운드 같은 게임을 하면 사용자 캐릭터를 기준으로 땅이 비스듬하게 누워있다. 비스듬하게 누워있는 땅의 색상을 사각형 Texture 이미지를 사용하여 색을 결정하게 되면 캐릭터에서 가까운 부분은 이미지의 색상이 정확히 보이지만 캐릭터에서 조금만 멀어지면 이미지가 흐릿해지는 경향이 있다. 그림 6은 Bilinear, Trilinear, Anisotropic Filtering을 사용하여 Rendering 한 이미지의 결과를 보여준다.

그림 6: Bilinear, Trilinear, Anisotropic Filtering에 따른 결과 이미지 Quality 차이 (출처 5)

Bilinear와 Trilinear Filtering의 경우 캐릭터에서 멀리 있는 땅이 흐릿한 것을 볼 수 있다. Anisotropic Filtering은 Mipmap과 비슷하게 추가로 Texture 이미지를 더 생성한다. Mipmap의 경우 단순히 가로 세로를 1/2 크기로 줄여서 만든다. 하지만, Anisotropic Filtering의 경우 가로, 세로의 비율을 달리하여 Mipmap 이미지를 생성한다. 예를 들어 128 x 128 크기의 Texture 이미지를 64 x 128, 32 x 128, 128 x 64, 128 x 32등의 크기로 만들게 된다.

그림 7: Anisotropic Filtering Mipmap Texture 이미지 (출처 6)

그림 7은 Anisotropic Filtering에서 사용되는 Mipmap Texture 이미지이다. 그림과 같이 다양한 크기로 이미지가 생성된 것을 확인할 수 있다. Anisotropic Filtering은 Trilinear와 비슷하게 여러 개의 Texture 이미지의 색상값을 사용하여 최종 Pixel 색상 값을 결정하게 된다. 실제로 계산하는 과정은 구현방법에 따라 차이가 있을 수 있다고 한다. 정확하게 어떻게 하는지 이해를 하지 못해서 추가로 알게 되면 정리를 할 계획이다. 실제로 Sampling하는 Texture의 개수가 많기 때문에 이미지 Quality가 올라가는 만큼 GPU 부하가 증가한다고 한다. Anisotropic Filtering은 요즘 GPU에서 아주 많이 사용된다고 한다. 그림6과 같이 사용자가 느끼는 차이가 상당하기 때문에 많은 게임에서도 사용한다고 한다.

  • (18-12-10 추가) Anisotropic Setting 뒤에 보통 x16과 같은 숫자가 붙는다. 뒤 숫자 의미가 궁금해서 찾아보니 Sampling 하는 Pixel의 개수를 의미하는 것 같다. Trilinear Filtering의 경우 8개의 색상 Sampling을 통해서 최종 Pixel 한 개의 색상을 결정하게 된다. Anisotropic에서 x16의 경우 128개의 색상을 Sampling을 하여 최종 한 개의 Pixel 색상을 결정하게 된다. x8의 경우 64개의 Sample을 사용하여 하나의 Pixel 색상을 결정한다. 결과적으로 더 많은 Sample을 사용하여 최종 색상을 결정하게 되고 그로 인한 Bandwidth 사용량도 많이 증가한다. (출처 7)

출처

  1. https://learnopengl.com/Getting-started/Textures
  2. http://img.tomshardware.com/us/2004/06/03/ati/pic07.jpg
  3. https://en.wikipedia.org/wiki/Bilinear_filtering
  4. https://en.wikipedia.org/wiki/Trilinear_filtering
  5. https://www.geforce.com/whats-new/guides/aa-af-guide#1
  6. https://en.wikipedia.org/wiki/Anisotropic_filtering
  7. https://www.extremetech.com/computing/51994-the-naked-truth-about-anisotropic-filtering/1

 

Leave a Comment