Skip to content
This repository was archived by the owner on May 19, 2024. It is now read-only.

4. A colored cube

Jump to bottom
Lubos Lenco edited this page Oct 26, 2018 · 4 revisions

(Reference)

In this tutorial we move on to render a little more triangles. For simplicity, we store cube vertices and colors directly in code.

    // An array of vertices to form a cube
    static var vertices:Array<Float> = [
      -1.0,-1.0,-1.0,  -1.0,-1.0, 1.0,  -1.0, 1.0, 1.0,
       1.0, 1.0,-1.0,  -1.0,-1.0,-1.0,  -1.0, 1.0,-1.0,
       1.0,-1.0, 1.0,  -1.0,-1.0,-1.0,   1.0,-1.0,-1.0,
       1.0, 1.0,-1.0,   1.0,-1.0,-1.0,  -1.0,-1.0,-1.0,
      -1.0,-1.0,-1.0,  -1.0, 1.0, 1.0,  -1.0, 1.0,-1.0,
       1.0,-1.0, 1.0,  -1.0,-1.0, 1.0,  -1.0,-1.0,-1.0,
      -1.0, 1.0, 1.0,  -1.0,-1.0, 1.0,   1.0,-1.0, 1.0,
       1.0, 1.0, 1.0,   1.0,-1.0,-1.0,   1.0, 1.0,-1.0,
       1.0,-1.0,-1.0,   1.0, 1.0, 1.0,   1.0,-1.0, 1.0,
       1.0, 1.0, 1.0,   1.0, 1.0,-1.0,  -1.0, 1.0,-1.0,
       1.0, 1.0, 1.0,  -1.0, 1.0,-1.0,  -1.0, 1.0, 1.0,
       1.0, 1.0, 1.0,  -1.0, 1.0, 1.0,   1.0,-1.0, 1.0
    ];

    // Array of colors for each cube vertex
    static var colors:Array<Float> = [
      0.583, 0.771, 0.014,   0.609, 0.115, 0.436,   0.327, 0.483, 0.844,
      0.822, 0.569, 0.201,   0.435, 0.602, 0.223,   0.310, 0.747, 0.185,
      0.597, 0.770, 0.761,   0.559, 0.436, 0.730,   0.359, 0.583, 0.152,
      0.483, 0.596, 0.789,   0.559, 0.861, 0.639,   0.195, 0.548, 0.859,
      0.014, 0.184, 0.576,   0.771, 0.328, 0.970,   0.406, 0.615, 0.116,
      0.676, 0.977, 0.133,   0.971, 0.572, 0.833,   0.140, 0.616, 0.489,
      0.997, 0.513, 0.064,   0.945, 0.719, 0.592,   0.543, 0.021, 0.978,
      0.279, 0.317, 0.505,   0.167, 0.620, 0.077,   0.347, 0.857, 0.137,
      0.055, 0.953, 0.042,   0.714, 0.505, 0.345,   0.783, 0.290, 0.734,
      0.722, 0.645, 0.174,   0.302, 0.455, 0.848,   0.225, 0.587, 0.040,
      0.517, 0.713, 0.338,   0.053, 0.959, 0.120,   0.393, 0.621, 0.362,
      0.673, 0.211, 0.457,   0.820, 0.883, 0.371,   0.982, 0.099, 0.879
    ];

Since we also want to pack colors with vertices, we need to adjust vertex structure.

    // Define vertex structure
    var structure = new VertexStructure();
    structure.add("pos", VertexData.Float3);
    structure.add("col", VertexData.Float3);
    // Save length - we store position and color data
    var structureLength = 6;

We modify pipeline to enable depth-testing.

    // Set depth mode
    pipeline.depthWrite = true;
    pipeline.depthMode = CompareMode.Less;

Now copy all the data into vertex buffer. For each vertex, we pack x,y,z position and r,g,b color.

    // Copy vertices and colors 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, colors[i * 3]);
      vbData.set(i * structureLength + 4, colors[i * 3 + 1]);
      vbData.set(i * structureLength + 5, colors[i * 3 + 2]);
    }
    vertexBuffer.unlock();

Since Kha only draws indexed vertices, we create a dumb index array and pass our indices.

    // A 'trick' to create indices for a non-indexed vertex data
    var indices:Array<Int> = [];
    for (i in 0...Std.int(vertices.length / 3)) {
      indices.push(i);
    }

    // Create index buffer
    indexBuffer = new IndexBuffer(
      indices.length, // Number of indices for our cube
      Usage.StaticUsage // Index data will stay the same
    );

    // Copy indices to index buffer
    var iData = indexBuffer.lock();
    for (i in 0...iData.length) {
      iData[i] = indices[i];
    }
    indexBuffer.unlock();

Notice we also need to adjust clear function to have proper depth-testing.

    // Clear screen
    g.clear(Color.fromFloats(0.0, 0.0, 0.3), 1.0);

Our vertex program grows again, now working with color.

#version 450

// Input vertex data, different for all executions of this shader
in vec3 pos;
in vec3 col;

// Output data - will be interpolated for each fragment.
out vec3 fragmentColor;

// 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);

	// The color of each vertex will be interpolated
	// to produce the color of each fragment
	fragmentColor = col;
}

And a fragment shader.

#version 450

// Interpolated values from the vertex shaders
in vec3 fragmentColor;

out vec4 fragColor;

void main() {
	// Output color = color specified in the vertex shader,
	// interpolated between all 3 surrounding vertices
	fragColor = vec4(fragmentColor, 1.0);
}

You can access complete sources here.

Check out final output.

Clone this wiki locally