The Element Buffer Object

In the last post I managed to render a single triangle to the screen.

But what if we want to draw something more complicated like a rectangle. We could draw two triangles next to eachother the same way we've done this. However, this would mean defining duplicate points for each triangle in the rectangle for the vertices that overlap. If we were rendering larger models, we should work to avoid this overhead.

OpenGL allows us to store the connected vertices as indexes in a new buffer object, called the Element Buffer Object (or EBO). It is declared and initalised similar to our VBO. Firstly let's change our vertex data to be appropriate for this, and delcare our indices.

31float32 vertices[] = {
32     0.5f,  0.5f, 0.0f,  // top right
33     0.5f, -0.5f, 0.0f,  // bottom right
34    -0.5f, -0.5f, 0.0f,  // bottom left
35    -0.5f,  0.5f, 0.0f   // top left
36};
37
38uint32 indices[] = {
39    0, 1, 3,    // triangle 1
40    1, 2, 3     // triangle 2
41};

If we draw the data as we've changed it now, since we're specifying the size of the data as 3 points, we should see one triangle in our rectange, which is exactly what we get.

Now creating our EBO like so:

113uint32 vertexArrayObject;
114uint32 vertexBufferObject;
115uint32 elementBufferObject;
116glGenVertexArrays(1, &vertexArrayObject);
117glGenBuffers(1, &vertexBufferObject);
118glGenBuffers(1, &elementBufferObject);
119
120glBindVertexArray(vertexArrayObject);
121
122glBindBuffer(GL_ARRAY_BUFFER, vertexBufferObject);
123glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
124glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, elementBufferObject);
125glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

And to render using our new data; in the main render loop, we replace the glDrawArrays call with a call to glDrawElements instead.

135while (!glfwWindowShouldClose(window)) {
136    glClearColor(0.106f, 0.035f, 0.122f, 1.0f); // Sets colour to clear buffer with
137    glClear(GL_COLOR_BUFFER_BIT); // Clears buffer with last set colour
138
139    glUseProgram(shaderProgram);
140    glBindVertexArray(vertexArrayObject);
141    //glDrawArrays(GL_TRIANGLES, 0, 3);
142    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, nullptr);
143
144    glfwSwapBuffers(window);
145    glfwPollEvents();
146}

And that's it! We're drawing a rectangle

We can see the composing triangles by setting the polygon draw mode to GL_LINES instead of the default fill, using glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);

Some Extra Practice

Learn OpenGL has some exercises listed that it recommends completing before moving on to the next section, I want to check I've properly digested how everything works so I'll be listing my thought process for each problem, as well as my solution.

Exercise 1

"Draw 2 triangles next to eachother using glDrawArrays by adding more vertices to your data"

I want to keep as much of the stuff I've implemented up to this point as I can. So, since we it requires using glDrawArrays I can comment out anything to do with the EBO. Declaring the points for the two triangles requires two sets of nine points:

31float32 vertices[] = {
32     0.5f,   0.5f, 0.0f,    // t1 top
33     0.75f, -0.5f, 0.0f,    // t1 bottom right
34     0.25f, -0.5f, 0.0f,    // t1 bottom left
35
36    -0.5f,   0.5f, 0.0f,    // t2 top
37    -0.75f, -0.5f, 0.0f,    // t2 bottom left  
38    -0.25f, -0.5f, 0.0f,    // t2 bottom right
39};

Our glDrawArrays call needs to specify the 6 points we are drawing, the stride and size is already set by our call to glVertexAttribPointer call outside of the render loop.

glDrawArrays(GL_TRIANGLES, 0, 6);

Excercise 2

"Now create the same 2 triangles using two different VAOs and VBOs for their data"

It was tempting to create a second array of vertices for this excercise, however we can keep the same array and just use referencing to properly set the start and size when buffering the data.

I think we also need to bind the correct vertex array before loading the points into the buffer. So immediately after creating our new VBO and VAO, with all the others, we need to first bind the appropriate VAO before loading all the points into the VBO. Finally, since the binding changes, we need to configure the vertex attributes for each VBO and VAO as well.

125glBindVertexArray(vertexArrayObject1);
126glBindBuffer(GL_ARRAY_BUFFER, vertexBufferObject1);
127glBufferData(GL_ARRAY_BUFFER, sizeof(vertices) / 2, &vertices[0], GL_STATIC_DRAW);
128glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float32), nullptr);
129glEnableVertexAttribArray(0);
130
131glBindVertexArray(vertexArrayObject2);
132glBindBuffer(GL_ARRAY_BUFFER, vertexBufferObject2);
133glBufferData(GL_ARRAY_BUFFER, sizeof(vertices) / 2, &vertices[9], GL_STATIC_DRAW);
134glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float32), nullptr);
135glEnableVertexAttribArray(0);

Then in our main render loop, we bind the appropriate VAO before making our glDrawArrays call for it.

148while (!glfwWindowShouldClose(window)) {
149    glClearColor(0.106f, 0.035f, 0.122f, 1.0f); // Sets colour to clear buffer with
150    glClear(GL_COLOR_BUFFER_BIT); // Clears buffer with last set colour
151
152    glUseProgram(shaderProgram);
153        
154    glBindVertexArray(vertexArrayObject1);
155    glDrawArrays(GL_TRIANGLES, 0, 3);
156        
157    glBindVertexArray(vertexArrayObject2);
158    glDrawArrays(GL_TRIANGLES, 0, 3);
159
160    glfwSwapBuffers(window);
161    glfwPollEvents();
162
163}

And this appears to work as intended!

Excercise 3

"Create two shader programs where the second program uses a different fragment shader that outputs the color yellow; draw both triangles again where one outputs the color yellow"

This one should be fairly trivial, we can re-use the fragment shader since nothing changes on that end, and then to make it yellow we change what we set FragColor to. I've picked a fairly "gold" yellow for this.

#version 330 core
out vec4 FragColor;

void main() {
    FragColor = vec4(1.0, 0.843, 0.0, 1.0);
}

105uint32 yellowShader = glCreateShader(GL_FRAGMENT_SHADER);
106glShaderSource(yellowShader, 1, &yellowShaderSrc, nullptr);
107glCompileShader(yellowShader);
108{
109    int32 success;
110    int8 infoLog[512];
111    glGetShaderiv(yellowShader, GL_COMPILE_STATUS, &success);
112    if (!success) {
113        glGetShaderInfoLog(yellowShader, 512, nullptr, infoLog);
114        fprintf(stderr, "Fragment (yellow) shader compilation failed.\n%s", infoLog);
115        return -1;
116    }
117}

Now we need to compile and link the new shader to a new program for the yellow triangle.

134int32 yellowProgram = glCreateProgram();
135glAttachShader(yellowProgram, vertexShader);
136glAttachShader(yellowProgram, yellowShader);
137glLinkProgram(yellowProgram);
138{
139    int32 success;
140    int8 infoLog[512];
141    glGetProgramiv(yellowProgram, GL_LINK_STATUS, &success);
142    if (!success) {
143        glGetProgramInfoLog(yellowProgram, 512, nullptr, infoLog);
144        fprintf(stderr, "Shader program link failed.\n%s", infoLog);
145        return -1;
146    }
147}
148
149glDeleteShader(vertexShader);
150glDeleteShader(fragShader);
151glDeleteShader(yellowShader);

Now to actually make one of the triangles yellow, we need to swap the shade program in the main render loop.

186while (!glfwWindowShouldClose(window)) {
187    glClearColor(0.106f, 0.035f, 0.122f, 1.0f); // Sets colour to clear buffer with
188    glClear(GL_COLOR_BUFFER_BIT); // Clears buffer with last set colour
189
190    glUseProgram(shaderProgram);
191    glBindVertexArray(vertexArrayObject1);
192    glDrawArrays(GL_TRIANGLES, 0, 3);
193
194    glUseProgram(yellowProgram);
195    glBindVertexArray(vertexArrayObject2);
196    glDrawArrays(GL_TRIANGLES, 0, 3);
197    // glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, nullptr);
198
199    glfwSwapBuffers(window);
200    glfwPollEvents();
201}

And just like that we have a yellow triangle.

Wrapping it up

This hasn't been my first attempt at learning OpenGL, however writing about it on here has lead me to actually understand what I'm doing. I never ended up getting much further than this bit where I am now. So from here-on out everything will be completely new territory for me. Next up is learning more about shaders. The main function for this project is getting a bit crowded now, so I might end up addressing that in the next section as well.