그동안은 도형만 계속 그려왔는데, 이번에는 텍스쳐를 사용해 이미지를 드로잉해보겠음ㅇㅇ


우선 다음과 같이 이미지를 하나 준비함(사실 이거 에렌엔진 로고임ㅋㅋ)




21b2d729abd828a14e81d2b628f1756f60856a




이미지를 가져와 출력하기 위해서는 기존 버텍스 정보에서 텍스쳐에서의 위치 정보를 추가해야 함


pub struct Vertex {
pub pos: Vec3,
pub color: Vec3,
pub tex_coords: Vec2, <- 이게 새로 추가됨
}




쉐이더 코드도 다음과 같이 텍스쳐 관련 코드를 추가함


#version 450

layout(binding = 0) uniform UniformBufferObject {
mat4 model;
mat4 view;
mat4 proj;
} ubo;

layout(location = 0) in vec3 inPosition;
layout(location = 1) in vec3 inColor;
layout(location = 2) in vec2 inTexCoord; <- 추가된 텍스쳐 위치값

layout(location = 0) out vec3 fragColor;
layout(location = 1) out vec2 fragTexCoord; <- 추가된 텍스쳐 위치값

void main() {
gl_Position = ubo.proj * ubo.view * ubo.model * vec4(inPosition, 1.0);
fragColor = inColor;
fragTexCoord = inTexCoord;
}


#version 450

layout(location = 0) in vec3 fragColor;
layout(location = 1) in vec2 fragTexCoord; <- 추가된 텍스쳐 위치값

layout(location = 0) out vec4 outColor;

layout(binding = 1) uniform sampler2D texSampler; <- 추가된 텍스쳐 샘플러

void main() {
outColor = texture(texSampler, fragTexCoord);
}





그리고 이미지 버퍼와 메모리, 또 메모리 복제 과정, 이미지 레이아웃 변경 등.... 벌컨 특유의 복잡한 과정들을 거치고... (이런건 설명을 생략하겠음;;)


유니폼 버퍼에 싸그리 넣어서 돌리면 ...








이렇게 잘 돌아갑니다...



웹에서는 다음 경로에서 확인 가능함

- WGPU: https://erenengine.github.io/eren/eren_render_shared/examples/test_texture.html

- WebGL: https://erenengine.github.io/erenjs/eren-webgl-render-shared/examples/test-texture/index.html



이렇게 사실상 렌더링에 있어서는 2D 게임을 만들기 위한 모든 준비가 끝남ㅋㅋㅋㅋ




관련 코드들

- vulkan 구현: https://github.com/erenengine/eren/tree/main/eren_vulkan_render_shared/examples/test_texture

- wgpu 구현: https://github.com/erenengine/eren/tree/main/eren_render_shared/examples/test_texture

- webgpu 구현: https://github.com/erenengine/erenjs/tree/main/eren-webgpu-render-shared/examples/test-texture

- webgl 구현: https://github.com/erenengine/erenjs/tree/main/eren-webgl-render-shared/examples/test-texture




다음 글에서는 3D 모델링 파일을 가져와서 한번 그려보겠음


그럼 오늘도 홧팅하고 더운데 건강 조심해!!!



바퀴2