Indexed Drawing with EBOs

The Problem: Redundant Vertex Data

Let's make the problem of vertex duplication concrete. To draw a rectangle using two triangles, our vertex data array would look something like this:

float vertices[] = {
    // First triangle
     0.5f,  0.5f, 0.0f,  // top right
     0.5f, -0.5f, 0.0f,  // bottom right
    -0.5f,  0.5f, 0.0f,  // top left 
    // Second triangle
     0.5f, -0.5f, 0.0f,  // bottom right (DUPLICATE)
    -0.5f, -0.5f, 0.0f,  // bottom left
    -0.5f,  0.5f, 0.0f   // top left (DUPLICATE)
};

We are storing 6 vertices (18 floats), but two of them are exact copies. The video below explains why this approach is suboptimal.

The Solution: Indexed Drawing

The solution is to store only the unique vertices and then create a separate list of indices that tells OpenGL which vertices to pick (and in what order) to form the triangles.

For our rectangle, we would have:

1. A vertices array with just the 4 unique corners.
2. An indices array that defines the two triangles by referencing the vertices' positions (indices) in the vertices array.

The code for this would look like this:

// 1. Define only the 4 unique vertices
float vertices[] = {
     0.5f,  0.5f, 0.0f,  // 0: top right
     0.5f, -0.5f, 0.0f,  // 1: bottom right
    -0.5f, -0.5f, 0.0f,  // 2: bottom left
    -0.5f,  0.5f, 0.0f   // 3: top left 
};

// 2. Define the order to draw vertices to form two triangles
unsigned int indices[] = {  
    0, 1, 3,   // first triangle
    1, 2, 3    // second triangle
};

This is the core concept of indexed drawing. We now need a way to send this indices array to the GPU.

The Element Buffer Object (EBO)

Just as we use a Vertex Buffer Object (VBO) to store vertex data, we use an Element Buffer Object (EBO) to store our index data on the GPU. The EBO is also often called an Index Buffer Object (IBO).

The process of creating and populating an EBO is almost identical to that of a VBO, with one key difference: the buffer target.

To see this process in action, the following video segment provides a great visual walkthrough.

Switching to glDrawElements

With an EBO, we no longer use glDrawArrays. Instead, we use glDrawElements. This function tells OpenGL to draw using the indices from the currently bound EBO.

glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

Let's break down its parameters:

• mode: GL_TRIANGLES, just like before.
• count: The number of indices we want to draw. For our rectangle, this is 6.
• type: The data type of the indices in the EBO. This must be an unsigned type, so we use GL_UNSIGNED_INT.
• indices: An offset into the EBO. Since we want to start drawing from the beginning of our index buffer, we provide a null pointer, which OpenGL interprets as an offset of 0.

The following clip reinforces the usage of this function and points out a very common beginner mistake.

How the VAO Ties Everything Together

You might be wondering: "How does glDrawElements know which EBO to use?" The answer, once again, is the VAO!

A VAO stores not only your VBO bindings and attribute pointer configurations but also the binding for the GL_ELEMENT_ARRAY_BUFFER. When you bind an EBO while a VAO is active, the VAO "remembers" that EBO.

This means your one-time initialization flow now looks like this:

1. glGenVertexArrays / glBindVertexArray (Create and bind your VAO).
2. glGenBuffers / glBindBuffer / glBufferData (Set up your VBO with vertex data).
3. glVertexAttribPointer / glEnableVertexAttribArray (Configure vertex attributes).
4. glGenBuffers / glBindBuffer / glBufferData (Set up your EBO with index data).
5. glBindVertexArray(0) (Unbind the VAO. It now stores the state for the VBO, its attributes, and the EBO).

After this setup, your render loop remains beautifully simple. When you call glBindVertexArray(VAO), OpenGL automatically restores the VBO and binds the correct EBO for you. All you have to do is call glDrawElements.

Conclusion

You've now learned one of the most fundamental optimization techniques in graphics programming. By using indexed drawing, you can render complex objects far more efficiently.

Key Takeaways:

• Indexed drawing avoids duplicating vertex data by defining unique vertices once and using a separate list of indices to define primitives.
• An Element Buffer Object (EBO) is a GPU buffer used to store this index data.
• You create and populate an EBO using the GL_ELEMENT_ARRAY_BUFFER target with glBindBuffer and glBufferData.
• Rendering is performed with glDrawElements, which uses the indices from the bound EBO to draw vertices from the bound VBO.
• The VAO encapsulates the EBO binding along with the VBO and attribute settings, simplifying the rendering process.

Preview of the Next Lesson:
So far, we've treated the small programs that run on the GPU—the shaders—as black boxes. In the next lesson, "Write a basic vertex shader in GLSL to process vertex positions," we will open up that box. You will learn the basics of the OpenGL Shading Language (GLSL) and write your very first vertex shader, giving you direct control over how each vertex is processed.