Hello everyone,
Until now, I’ve been drawing only basic shapes, but this time I finally implemented texture mapping and rendered an actual image.
Preparing the Image
First, I prepared an image to use as a texture.
(For the record — this is the Eren Engine logo. 😄)
Updating the Vertex Structure
To render the image, I needed to extend the vertex data to include texture coordinates.
Here’s the updated vertex struct:
pub struct Vertex {
pub pos: Vec3,
pub color: Vec3,
pub tex_coords: Vec2, // newly added texture coordinates
}
Updating the Shaders
The shaders also required some changes to handle the texture.
Vertex Shader
#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; // added texture coords
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;
}
Fragment Shader
#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; // added texture sampler
void main() {
outColor = texture(texSampler, fragTexCoord);
}
Texture Setup
Setting up textures in Vulkan involved creating the image buffer, allocating memory, copying data, transitioning image layouts, and so on — all the usual Vulkan boilerplate.
(I’ll skip the full explanation here.)
Once all the data was set up and fed into the uniform buffers, I ran it and…
The Result
You can also check it out directly in your browser here:
With this, I’ve essentially finished implementing everything needed to create a 2D game renderer!
Source Code
Here are the links to the implementations for each backend:
-
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
In the next dev log, I plan to load and render a 3D model file.
Thanks for reading — stay cool, and happy coding! 🌟