OpenGL

Indices buffer object (IBO)

The Index Buffer Object (IBO) stores the indices of the vertices to be drawn. It is also called Elements Buffer Object (EBO). IBO solves the problem of repeated flushing of the same vertex, which can reduce memory space waste and improve execution efficiency.

State of IBO also can be stored in VAO.

Let's we want draw a cube. It has 6 faces and 8 vertices.

Each face we can draw as 2 triangles (GL_QUADS mode depricated). Thus, we must provide 6 * 2 * 3 = 36 vertices. When vertices have additional attributes, we will use even more memory.

Another way is to use 8 vertices and specify the order in which the vertices are drawn in the IBO.

To draw the cube, we use the following vertex data from which the VAO and VBO will be created. Here each vertex has 3 coordinates and rgb values of color. If you wish, you can pack coordinates together, then place a color data.

Cube vertex data 
 fun newColoredCubeArray(): FloatArray {
    return floatArrayOf( 
        // front
        // coords              color
        -1.0f, -1.0f, 1.0f,  1.0f, 0.0f, 0.0f,
        1.0f, -1.0f, 1.0f,   0.0f, 1.0f, 0.0f,
        1.0f, 1.0f, 1.0f,    0.0f, 0.0f, 1.0f,
        -1.0f, 1.0f, 1.0f,   1.0f, 1.0f, 1.0f,
        // back
        -1.0f, -1.0f, -1.0f,  1.0f, 0.0f, 0.0f,
        1.0f, -1.0f, -1.0f,   0.0f, 1.0f, 0.0f,
        1.0f, 1.0f, -1.0f,    0.0f, 0.0f, 1.0f,
        -1.0f, 1.0f, -1.0f,   1.0f, 1.0f, 1.0f
        )
}
 public static float[] newColoredCubeArray() {
    return new float[]{
        // front
        // coords              color
        -1.0f, -1.0f, 1.0f,  1.0f, 0.0f, 0.0f,
        1.0f, -1.0f, 1.0f,   0.0f, 1.0f, 0.0f,
        1.0f, 1.0f, 1.0f,    0.0f, 0.0f, 1.0f,
        -1.0f, 1.0f, 1.0f,   1.0f, 1.0f, 1.0f,
        // back
        -1.0f, -1.0f, -1.0f,  1.0f, 0.0f, 0.0f,
        1.0f, -1.0f, -1.0f,   0.0f, 1.0f, 0.0f,
        1.0f, 1.0f, -1.0f,    0.0f, 0.0f, 1.0f,
        -1.0f, 1.0f, -1.0f,   1.0f, 1.0f, 1.0f};
}

MeshUtils.coloredCubeArray = [
     // front
     // coords         color
    -1.0, -1.0, 1,   1.0, 0.0, 0.0,
    1.0, -1.0, 1.0,  0.0, 1.0, 0.0,
    1.0, 1.0, 1.0,   0.0, 0.0, 1.0,
    -1.0, 1.0, 1.0,  1.0, 1.0, 1.0,
    // back
    -1.0, -1.0, -1.0,  1.0, 0.0, 0.0,
    1.0, -1.0, -1.0,   0.0, 1.0, 0.0,
    1.0, 1.0, -1.0,    0.0, 0.0, 1.0,
    -1.0, 1.0, -1.0,   1.0, 1.0, 1.0
];

Now array of indices of vertex. Vertices for each triangle are specified counterclockwise, because it will be important for texture mapping and lighting.

Cube vertex indices 
fun newCubeInd(): ByteArray {
    return byteArrayOf( // front
        0, 1, 2,
        2, 3, 0,  // right
        1, 5, 6,
        6, 2, 1,  // back
        7, 6, 5,
        5, 4, 7,  // left
        4, 0, 3,
        3, 7, 4,  // bottom
        4, 5, 1,
        1, 0, 4,  // top
        3, 2, 6,
        6, 7, 3
        )
}
public static byte[] newCubeInd() {
    return new byte[]{
        // front face
        0, 1, 2,
        2, 3, 0,
        // right
        1, 5, 6,
        6, 2, 1,
        // back
        7, 6, 5,
        5, 4, 7,
        // left
        4, 0, 3,
        3, 7, 4,
        // bottom
        4, 5, 1,
        1, 0, 4,
        // top
        3, 2, 6,
        6, 7, 3
        };
}
MeshUtils.cubeIndices = [
    // front face
    0, 1, 2,
    2, 3, 0,
    // right
    1, 5, 6,
    6, 2, 1,
    // back
    7, 6, 5,
    5, 4, 7,
    // left
    4, 0, 3,
    3, 7, 4,
    // bottom
    4, 5, 1,
    1, 0, 4,
    // top
    3, 2, 6,
    6, 7, 3  
];

IBO is created in same way as VBO.

Creating IBO

Drawing with IBO is similar to draw with VBO. But instead glDrawArrays we use glDrawElements functions.

glBindVertexArray(idVao)
//  glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, idIbo)

glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_BYTE, 0)

You can download full sources of colored cube on GitHub.