5. A textured cube
It is time to use texturing! Get the image below which will be used instead of cube colors. Save it into 'Assets' folder in root folder of your project.
To include image in project, we simple modify khafile to include all assets from 'Assets' folder.
let project = new Project('Empty');
project.addSources('Sources');
project.addShaders('Sources/Shaders/**');
project.addAssets('Assets/**');
resolve(project);We will no longer be using cube colors, but we need texture coordinates for each vertex.
// Array of texture coords for each cube vertex
static var uvs:Array<Float> = [
0.000059, 0.000004, 0.000103, 0.336048, 0.335973, 0.335903,
1.000023, 0.000013, 0.667979, 0.335851, 0.999958, 0.336064,
0.667979, 0.335851, 0.336024, 0.671877, 0.667969, 0.671889,
1.000023, 0.000013, 0.668104, 0.000013, 0.667979, 0.335851,
0.000059, 0.000004, 0.335973, 0.335903, 0.336098, 0.000071,
0.667979, 0.335851, 0.335973, 0.335903, 0.336024, 0.671877,
1.000004, 0.671847, 0.999958, 0.336064, 0.667979, 0.335851,
0.668104, 0.000013, 0.335973, 0.335903, 0.667979, 0.335851,
0.335973, 0.335903, 0.668104, 0.000013, 0.336098, 0.000071,
0.000103, 0.336048, 0.000004, 0.671870, 0.336024, 0.671877,
0.000103, 0.336048, 0.336024, 0.671877, 0.335973, 0.335903,
0.667969, 0.671889, 1.000004, 0.671847, 0.667979, 0.335851
];We need to load image before it is available. We simply do loadEverything() and wait for it to finish. This will load all assets specified in khafile.
public function new() {
// Load all assets defined in khafile.js
Assets.loadEverything(loadingFinished);
}Switching to loadingFinished, change vertex structure again to use UVs instead of colors.
// Define vertex structure
var structure = new VertexStructure();
structure.add("pos", VertexData.Float3);
structure.add("uv", VertexData.Float2);
// Save length - we store position and uv data
var structureLength = 5;Similar to mvp constant location, we will need texture unit location to set texture to shader. We will also store reference to our texture.
// Get a handle for texture sample
textureID = pipeline.getTextureUnit("myTextureSampler");
// Texture
image = Assets.images.uvtemplate;Copy positions and uvs to vertex buffer.
// Copy vertices and uvs to vertex buffer
var vbData = vertexBuffer.lock();
for (i in 0...Std.int(vbData.length / structureLength)) {
vbData.set(i * structureLength, vertices[i * 3]);
vbData.set(i * structureLength + 1, vertices[i * 3 + 1]);
vbData.set(i * structureLength + 2, vertices[i * 3 + 2]);
vbData.set(i * structureLength + 3, uvs[i * 2]);
vbData.set(i * structureLength + 4, uvs[i * 2 + 1]);
}
vertexBuffer.unlock();Before we start rendering, we want to ensure all data is prepared. Move the System.notifyOnFrames call from Main.hx to the end of loadingFinished function.
System.notifyOnFrames(render);On to render function, set texture in similar manner to mvp matrix.
// Set texture
g.setTexture(textureID, image);Vertex shader is modified to work with UVs.
#version 450
// Input vertex data, different for all executions of this shader
in vec3 pos;
in vec2 uv;
// Output data: will be interpolated for each fragment.
out vec2 vUV;
// Values that stay constant for the whole mesh
uniform mat4 MVP;
void main() {
// Output position of the vertex, in clip space: MVP * position
gl_Position = MVP * vec4(pos, 1.0);
// UV of the vertex. No special space for this one.
vUV = uv;
}Fragment shader using texture sampler.
#version 450
// Interpolated values from the vertex shaders
in vec2 vUV;
// Values that stay constant for the whole mesh.
uniform sampler2D myTextureSampler;
out vec4 fragColor;
void main() {
// Output color = color of the texture at the specified UV
fragColor = texture(myTextureSampler, vUV);
}You can access complete sources here.
Check out final output.
