[OpenGL] Texture 로드

■ Texture

텍스처는 오브젝트에 디테일을 추가하기 위해 사용되는 이미지이다.
오브젝트에 텍스처를 매핑하여 더 사실적이고 세밀한 외관을 가질 수 있다.

● Mapping

텍스처 매핑이란 2D 이미지(텍스처)를 오브젝트의 표면에 적용하는 기술이다.

텍스처를 삼각형에 매핑하기 위해 삼각형의 각 Vertex에 텍스처의 어느 부분이 해당하는지를 알려주어야 한다.
따라서 각 정점에는 텍스처 이미지의 어느 부분을 샘플링할지를 지정하는 텍스처 좌표가 있어야 한다.
이후 프래그먼트 보간(Fragment Interpolation)이 나머지 프래그먼트에 대해 작업을 수행한다.

- 텍스처 좌표
2D 텍스처 좌표는 x, y축 상에서 0부터 1까지의 범위를 가진다.

텍스처를 삼각형에 매핑하기 위해 Vertex Shader에 3개의 텍스처 좌표를 전달하면 Vertex Shader는 그것들을 Fragment Shader에 전달하고 Fragment Shader는 각 Fragment에 대해 텍스처 좌표를 깔끔하게 보간한다.

 

float texCoords[] = {
0.0f, 0.0f,  // bottom left
1.0f, 0.0f,  // bottom right
0.5f, 1.0f   // top
};

* 좌측 하단이 (0, 0), 우측 상단이 (1, 1)

- 샘플링
텍스처 좌표를 사용하여 텍스처 이미지에서 색상을 추출하는 것을 'Sampling'이라고 한다.

텍스처 샘플링은 다양한 방식으로 수행될 수 있기 때문에 OpenGL이 텍스처를 어떻게 샘플링해야 할지를 우리가 지정해주어야 한다.

● Wrapping

텍스처 좌표는 일반적으로 (0, 0) ~ (1, 1)의 범위를 가지지만, 이 범위를 벗어나는 좌표를 지정하면 어떻게 될 지 옵션을 제공한다.

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_MIRRORED_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_MIRRORED_REPEAT);

○ 매개변수
1. 텍스처 타겟을 지정
2. 옵션과 어떤 축에 적용할 것인지 지정 (S, T, R 축은 각각 x, y, z와 동일)
3. Wrapping 옵션 지정

○ Wrapping 옵션
- GL_REPEAT : 텍스처 이미지를 반복한다 (기본 동작)
- GL_MIRRORED_REPEAT : 좌우 반전된 이미지를 반복한다
- GL_CLAMP_TO_EDGE : 좌표를 0과 1사이로 고정해 가장자리가 늘어난 패턴을 만든다.
- GL_CLAMP_TO_BORDER : 범위를 벗어난 좌표는 사용자가 지정한 테두리 색상을 갖는다. (glTexParameterfv 함수를 이용하여 테두리 색도 추가로 설정 필요)

● Filtering

텍스처 좌표는 해상도에 의존하지 않지만, 부동 소수점 값일 수 있다. 따라서 OpenGL은 텍스처 좌표를 어떤 텍스처 픽셀(Texel)과 매핑할지 결정해야 한다. 이것은 특히 큰 객체에 저해상도 텍스처를 사용할 때 중요하다. 

○ Filtering 옵션
- GL_NEAREST : OpenGL의 기본 텍스처 필터링 방법이다. GL_NEAREST로 설정되면, OpenGL은 텍스처 좌표에 가장 가까운 중심을 가진 텍셀을 샘플링된 색상으로 선택한다. (nearest neighbor 또는 point filtering으로도 알려져 있음)
- GL_LINEAR : 텍스처 좌표의 인접한 텍셀들로부터 보간된 값을 취하여, 텍셀들 사이의 색상을 근사한다. 텍스처 좌표에서 텍셀의 중심까지의 거리에 따라 이웃한 픽셀들의 혼합된 색상이 반환된다. ((bi)linear filtering으로도 알려져 있음)
→ GL_NEAREST 옵션은 픽셀들이 명확히 보이고 GL_LINEAR 옵션은 매끄러운 패턴을 생성한다.

텍스처 필터링은 확대 및 축소 작업(크기를 키우거나 줄일 때) 모두에 대해 설정할 수 있다. 따라서 두 가지 옵션에 대한 필터링 방법을 glTexParameter 함수를 통해 지정해야 한다.

 

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

 

● Mipmaps

렌더링 시 멀리 떨어진 오브젝트의 텍스처로 작은 크기의 텍스처를 사용하여 성능을 향상시키고 앨리어싱을 감소시키는 기법이다.

glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR_MIPMAP_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glGenerateMipmap(GL_TEXTURE_2D);

 

glGenerateMipmap 함수를 호출하여 OpenGl이 mipmap을 자동으로 생성한다.
축소 필터링 옵션을 _MIPMAP_ 옵션으로 대체한다.

* 텍스처 확대 작업 시(필터링 옵션 중 확대(MAG) 필터로 설정한 경우)에는 mipmap 효과가 없다 (mipmap은 텍스처가 축소될 때 사용되기 때문)

■ Texture 로드 및 생성

텍스처를 사용하기 위해 응용 프로그램에 텍스처를 로드해야 한다.

● 텍스처 로드

- stb_image.h
stb_image.h는 파일 형식을 로드할 수 있고 프로젝트에 통합할 수 있는 가장 많이 쓰이는 '싱글 헤더 이미지 로드 라이브러리'이다.

다운로드 : https://github.com/nothings/stb/blob/master/stb_image.h

헤더파일을 다운로드하여 프로젝트에 추가한 후 C++ 파일을 추가한다

#define STB_IMAGE_IMPLEMENTATION
#include "stb_image.h"

STB_IMAGE_IMPLEMENTATION을 정의함으로써 전처리기가 헤더 파일을 수정하여 관련된 정의 소스 코드만 포함하도록 하여 헤더 파일을 .cpp 파일로 변환한다.

int width, height, nrChannels;
unsigned char *data = stbi_load("container.jpg", &width, &height, &nrChannels, 0);

stbi_load 함수를 호출하여 이미지를 로드한다.
* 매개변수 : 이미지 파일 경로, 너비, 높이, 컬러 채널의 수

● 텍스처 생성

이전의 OpenGL 객체들과 마찬가지로 텍스처는 ID로 참조된다.
객체 생성 및 바인딩 이후 glTexImage2D 함수를 호출하여 텍스처를 생성한다.

 

glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);

- glTexImage2D 매개변수
1. 텍스처 타겟
2. mipmap 레벨 수동 지정 (기본 = 0)
3. 텍스처 포맷
4. 텍스처 너비
5. 텍스처 높이
6. 항상 0
7. 원본 이미지의 포맷
8. 원본 이미지의 데이터 타입
9. 실제 이미지 데이터

● 전체 과정

// 객체 생성
unsigned int texture;
glGenTextures(1, &texture);

// 바인딩
glBindTexture(GL_TEXTURE_2D, texture);

// 텍스처 Wrapping / Filtering 옵션 설정
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);

// 텍스처 로드
int width, height, nrChannels;
unsigned char *data = stbi_load("이미지 파일 경로", &width, &height, &nrChannels, 0);

// 텍스처 생성
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB, width, height, 0, GL_RGB, GL_UNSIGNED_BYTE, data);
glGenerateMipmap(GL_TEXTURE_2D);

// 메모리 반환
stbi_image_free(data);