230501 자체 엔진 개발 : Texture System
https://github.com/ohbumjun/GameEngineTutorial/commit/78b8a6bc619757867e8fd1b1c0997972fe40eccb
feat(Engine) Create Texture, Texture Sub Classes · ohbumjun/GameEngineTutorial@78b8a6b
Show file tree Showing 11 changed files with 8,415 additions and 91 deletions.
github.com
https://www.youtube.com/watch?v=gtuvxBaefHs&list=PLkaVDtEaS2nYqfACk9Cx4JgP6nW0kY5o-&index=4
Texture 클래스 구성
Texture
- Texture2D
- OpenGLTexture2D
- VulkanTexture2D
- Texture3D
- OpenGLTexture3D
...
...기본적인 클래스 구조는 위와 같다.
1) 형태와 관계없이 Texture 라는 공통 형태를 처리해야 하는 경우가 있으므로 최종 Base Class 로 세팅한다.
2) 2d, 3d 등 Texture의 형태에 따라 다르게 처리하는 로직이 존재할 수 있으므로, Texture2D, Texture3D 등으로 구분한다.
3) 당연히 각각의 2d, 3d, cube ... 등에 대해서 Cross Platform 을 구성하기 위해 실제 Concrete Class 에 해당하는 OpenGLTexture2D 와 같은 클래스들을 만든다.
Texture 코드
class Texture
{
public :
virtual uint32_t GetWidth() const = 0;
virtual uint32_t GetHeight() const = 0;
virtual void Bind(uint32_t slot = 0) const = 0;
};
class Texture2D : public Texture
{
public:
virtual ~Texture2D() = default;
static Ref<Texture2D> Create(const std::string& path);
};class OpenGLTexture2D : public Texture2D
{
public :
OpenGLTexture2D(const std::string& path);
virtual ~OpenGLTexture2D();
virtual uint32_t GetWidth() const override;
virtual uint32_t GetHeight() const override;
virtual void Bind(uint32_t slot = 0) const override;
private :
uint32_t m_Width;
uint32_t m_Height;
std::string m_Path;
uint32_t m_RendererID;
};
OpenGL channel 에 근거한 Texture 세팅 과정
OpenGLTexture2D::OpenGLTexture2D(const std::string& path) :
m_Path(path)
{
int width, height, channels;
// OPENGL 은 Texture Coord 가 아래 -> 위 방향으로 증가한다고 계산
// 하지만 stbl 은 위에서 아래 방향으로 증가한다고 계산
// 따라서 그 값들을 뒤집어 줘야 한다.
stbi_set_flip_vertically_on_load(1);
// channels : 한 픽셀에 몇개의 채널이 존재하는지 ex) rgb, rgba -> 각각 3개, 4개
stbi_uc* data = stbi_load(path.c_str(), &width, &height, &channels, 0);
HZ_CORE_ASSERT(data, "Failed to load image");
m_Width = width;
m_Height = height;
GLenum internalFormat = 0, dataFormat = 0;
switch (channels)
{
case 3 :
{
// rgba : format / 8 : bits for each channel
internalFormat = GL_RGB8;
dataFormat = GL_RGB;
}
break;
case 4 :
{
internalFormat = GL_RGBA8;
dataFormat = GL_RGBA;
}
break;
}
HZ_CORE_ASSERT(internalFormat && dataFormat, "format should not be 0");
// buffer data 를 gpu 가 인식할 수 있는 형태로 만들기
// + 만들어낸 Texture Object 를 가리키는 ID 리턴
glCreateTextures(GL_TEXTURE_2D, 1, &m_RendererID);
// gpu 쪽에 Texture Buffer 가 들어갈 메모리 할당
glTextureStorage2D(m_RendererID, 1, internalFormat, m_Width, m_Height);
// gpu 쪽에 넘겨주기
// - texture 가 원래 크기보다 smaller 하게 display 될때, Linear Interpolation 적용
glTextureParameteri(m_RendererID, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
// - texture 가 원래 크기보다 크게 하게 display 될때, Neareset Interpolation 적용
glTextureParameteri(m_RendererID, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
// texture data 의 일부분을 update 하는 함수
// - m_RendererID : Update 할 Texture Object
// - Texture Level : 0
// - Position where update should begin : (0,0)
// - Region being updated : m_Width, m_Height
// - Data Type
glTextureSubImage2D(m_RendererID, 0, 0, 0, m_Width, m_Height, dataFormat, GL_UNSIGNED_BYTE, data);
stbi_image_free(data);
}
위 코드에서 중요한 것은 channels 라는 변수를 이용하는 것이다.
channel 이란 해당 텍스쳐 파일의 각 픽셀이 몇개의 channel 을 이용하는가에 대한 변수이다.
예를 들어 RGB Format 의 텍스쳐 파일은 R,G,B 총 3개가 될 것이고
RGBA Format 은 4개가 될 것이다.
각 텍스쳐 파일 포멧에 따라 OpenGL Texture Data 를 생성할 때 반드시 해당 Format 에 맞게 세팅해줘야 한다.
이전에도 말했듯이 실제 GPU 상으로 넘겨지는 Texture Data 는 byte 배열일 뿐이다.
그리고 GPU 에서는 우리가 세팅한 Texture Format 에 따라 해당 byte 배열로부터 4 * float 을 하나의 픽셀로 인식할지,
3 * float 을 하나의 픽셀로 인식할지 결정하는 것일 뿐이다.
예를 들어 할 때 2가지 문제가 발생할 수 있다.
1) 데이터를 잘못 읽는다.
- 텍스쳐 포멧 : RGBA Format <--> OpenGL : RGB Format 으로 세팅
- Texture 파일의 'alpha' 채널값을, GPU 가 'R" 값으로 읽을 수 있다. 따라서 이상하게 Texture 가 보일 수 있다.
2) 데이터가 터질 수 있다.
- 텍스쳐 포멧 : RGB Format <--> OpenGL : RGBA Format 으로 세팅
- 예를 들어, OpenGL 이 RGB가 아니라, RGBA 를 하나의 픽셀로 읽기 위해
한 픽셀에 대해 float 값 하나만큼 더 읽어들이는 것이다. 예를 들어 Texture 의 픽셀이 총 100개 이고, RGB Format 이면 100 * (3 * 4) = 1200 byte 가 된다. 그런데 OpenGL 은 100 * (4 * 4) = 1600 byte 만큼의 바이트를 읽어들이려고 하니 메모리가 터지는 것이다.
Texture Filtering
추가적으로 봐야할 사항은
// - texture 가 원래 크기보다 smaller 하게 display 될때, Linear Interpolation 적용
glTextureParameteri(m_RendererID, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
// - texture 가 원래 크기보다 크게 하게 display 될때, Neareset Interpolation 적용
glTextureParameteri(m_RendererID, GL_TEXTURE_MAG_FILTER, GL_NEAREST);위의 코드이다.
구체적인 개념은 다른 링크를 참조
https://m.blog.naver.com/ruvendix/221405407212
Texture 입히기 (코드)
이를 위해서는 Texture Coordinate 를 알아야 한다.
흔히 UV 좌표라고도 불린다.
참고 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=znfgkro1&logNo=80181835458
먼저 각 정점을 정의하는 데이터에 TexCoord 에 해당하는 내용도 추가한다.
float squareVertices[5 * 4] = {
-0.5f, -0.5f, 0.0f, 0.0f, 0.0f, /*Bottom Left */
0.5f, -0.5f, 0.0f, 1.0f, 0.0f, /*Bottom Right*/
0.5f, 0.5f, 0.0f, 1.0f, 1.0f, /*Top Right*/
0.5f, -0.5f, 0.0f, 1.0f, 0.0f, /*Bottom Right*/
0.5f, 0.5f, 0.0f, 1.0f, 1.0f, /*Top Right*/
-0.5f, 0.5f, 0.0f, 0.0f, 1.0f /*Top Left*/
};
당연히 Layout 에도 TexCoord 에 대한 정보를 추가해서 GPU 측에 각 정점 데이터가 어떻게 구성되었는지 알려줘야 한다.
아래와 같이 Float2 에 해당하는 buffer 정보를 추가한다.
Hazel::BufferLayout squareVBLayout = {
{Hazel::ShaderDataType::Float3, "a_Position"},
{Hazel::ShaderDataType::Float2, "a_TexCoord"}
};
Texture 를 입히는 Shader 코드는 아래와 같다
#type vertex
#version 330 core
layout(location = 0) in vec3 a_Position;
layout(location = 1) in vec2 a_TexCoord;
uniform mat4 u_ViewProjection;
uniform mat4 u_Transform;
out vec2 v_TexCoord;
void main()
{
v_TexCoord = a_TexCoord;
gl_Position = u_ViewProjection * u_Transform * vec4(a_Position, 1.0);
}
#type fragment
#version 330 core
layout(location = 0) out vec4 color;
in vec2 v_TexCoord;
uniform sampler2D u_Texture;
void main()
{
color = texture(u_Texture, v_TexCoord);
}위에 sampler2D 에 해당하는 u_Texture 변수를 gpu 측에 넘겨주는 코드는 아래와 같다.
// Texture 에 해당하는 객체 생성
m_Texture = Hazel::Texture2D::Create("assets/textures/RandomBox.png");
// Texture 관련 Shader 객체 생성
m_TextureShader.reset(Hazel::Shader::Create("assets/shaders/Texture.glsl"));
// Texture Shader Bind 시키기
std::dynamic_pointer_cast<Hazel::OpenGLShader>(m_TextureShader)->Bind();
// 0번째 Slot 에 묶인 Texture 객체를 "u_Texture"라는 이름으로 사용하겠다. 라는 옵션 세팅
std::dynamic_pointer_cast<Hazel::OpenGLShader>(m_TextureShader)->UploadUniformInt("u_Texture", 0);
/*
void OpenGLShader::UploadUniformInt(const std::string& name, const int& val)
{
GLint location = glGetUniformLocation(m_RendererID, name.c_str());
glUniform1i(location, val);
}
*/
// 해당 Texture 를 0번째 slot 에 bind 시킨다.
m_Texture->Bind();
/*
void OpenGLTexture2D::Bind(uint32_t slot = 0) const
{
// 0 번 슬롯에 해당 Texture Object 정보를 mapping 시킨다.
glBindTextureUnit(slot, m_RendererID);
}
*/