I was trying to understand this as well and now that I think I do, it would be prudent to post a code example aimed at
people less familiar with OpenGL architecture, as I found the previous examples not very illuminating and most tutorials
just tell you to copy paste the code without explaining it.
(This is in C++ but the code can be easily translated to C)
In this example, we'll be rendering a rectangle, which has 4 vertices. Each vertex has a position (vec3, xyz), texture coordinate (vec2, uv) and color attribute (vec4, rgba).
I think it's cleanest to separate each attribute into their own array:
float positions[] = {
+0.5, +0.5, 0,
+0.5, -0.5, 0,
-0.5, -0.5, 0,
-0.5, +0.5, 0
};
float colors[] = {
1, 1, 1, 1,
1, 1, 1, 1,
1, 1, 1, 1,
1, 1, 1, 1
};
float tex_coords[] = {
0, 0,
0, 1,
1, 1,
1, 0
};
Our vertex array object will describe the four vertices with these properties.
First, we need to create the vertex array:
GLuint vertex_array;
glGenVertexArrays(1, &vertex_array);
Each vertex array has a number of buffers, these can be thought of as properties of the array. Each vertex array has an
arbitrary number of "slots" for the buffers. Along with which buffer is in which slot, it saves the CPU-side pointer to
the data for the buffer, and the CPU-side datas format. We need to make OpenGL aware of both which slot to use, where the
data is, and how it is formatted.
The buffers slots are indexed, so the first buffer is index 0, the second is 1, etc.
These locations correspond to the layout defined in the vertex shader:
// vertex shader
std::string _noop_vertex_shader_source = R"(
#version 420
layout (location = 0) in vec3 _position_3d; // slot 0: xyz
layout (location = 1) in vec4 _color_rgba; // slot 1: rgba
layout (location = 2) in vec2 _tex_coord; // slot 2: uv
out vec2 _vertex_tex_coord;
out vec4 _vertex_color_rgba;
void main()
{
gl_Position = vec4(_position_3d.xy, 1, 1); // forward position to fragment shader
_vertex_color_rgba = _color_rgba; // forward color to fragment shader
_vertex_tex_coord = _tex_coord; // forward tex coord to fragment shader
}
)";
We see that the position property is at location 0, the color property at 1 and the tex coords at 2. We'll store these
for clarity:
// property locations from our shader
const auto vertex_pos_location = 0;
const auto vertex_color_location = 1;
const auto vertex_tex_coord_location = 2;
We now need to tell OpenGL the information about each buffer outlined above:
// bind the array, this makes OpenGL aware that we are modifying it with future calls
glBindVertexArray(vertex_array);
// create the position buffer
glGenBuffers(1, &position_buffer);
// bind the buffer so opengl knows we are currently operating on it
glBindBuffer(GL_ARRAY_BUFFER, position_buffer);
// tell opengl where the data pointer is
glBufferData(GL_ARRAY_BUFFER, sizeof(positions), positions, GL_STATIC_DRAW);
// tell opengl how the data is formatted
glVertexAttribPointer(vertex_pos_location, 3, GL_FLOAT, GL_FALSE, 0, (void*) 0);
// tell opengl that this slot should be used
glEnableVertexAttribArray(vertex_pos_location);
Here, we generate a buffer that will hold our position data. For glVertexAttribPointer, we choose the
correct location, 3 elements (as the positions are xyz coordinates), and no offset or stride.
Because we have a separate array for all our properties, we can leave both as 0.
Similar to the position, we generate and fill the buffers for the color and tex coord property:
// color
glGenBuffers(1, &color_buffer); // generate
glBindBuffer(GL_ARRAY_BUFFER, color_buffer); // bind
glBufferData(GL_ARRAY_BUFFER, sizeof(colors), colors, GL_STATIC_DRAW); // set pointer
glVertexAttribPointer(vertex_color_location, 4, GL_FLOAT, GL_FALSE, 0, (void*) 0); // set data format
glEnableVertexAttribArray(vertex_color_location); // enable slot
// tex coords
glGenBuffers(1, &tex_coord_buffer);
glBindBuffer(GL_ARRAY_BUFFER, tex_coord_buffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(tex_coords), tex_coords, GL_STATIC_DRAW);
glVertexAttribPointer(vertex_tex_coord_location, 2, GL_FLOAT, GL_FALSE, 0, (void*) 0);
glEnableVertexAttribArray(vertex_tex_coord_location);
Where we chose 4 elements for the colors because they are in RGBA format and 2 for the tex coords for obvious reasons.
The last thing we need to render a vertex array is an element buffer. These can be thought of as a list of
indices that define which order the vertices will be rendered in. For us, we want to render the
rectangle as two tris in a triangle fan, so we choose the following element buffer:
// vertex order
static uint32_t indices[] = {
0, 1, 2, 1, 2, 3
};
glGenBuffers(1, &element_buffer); // generate
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, element_buffer); // bind
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW) // set pointer
We do not need to enable the element buffers slot, it is separate from the vertex array. We don't have to specify the format of the elements buffer here, that will be done during glDrawElements in the render step.
So why all this? All these functions tell OpenGL where to look for the data for the vertices. Specifying the pointers to
the correct buffer data and their layout, if we now bind the vertex array during a render step:
glUseProgram(shader.get_program_id()); // shader program with our vertex shader
glBindVertexArray(vertex_array);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, element_buffer);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
Where 6 is the number of elements in the element buffer.
This is all that's needed to correctly update the in values in the vertex shader. OpenGL will move the data from
our CPU-side positions, colors and tex_coords into the correct locations 0, 1 and 2 of the vertex shader respectively.
We don't need to bind anything else, the vertex array remembers what we gave it and does it for us, which is why it's convenient and should be preferred in modern OpenGL.
In summary:
Each vertex array has n buffers for arbitrary properties and 1 element buffer. For each property / buffer, we need to
a) generate it (glGenBuffers)
b) bind it (glBindBuffer(GL_ARRAY_BUFFER)
c) tell OpenGL where the data is located in RAM (glBufferData)
d) tell OpenGL how the data is formatted (glVertexAttribPointer)
e) tell OpenGL to use that slot (glEnableVertexAttribArray)
for the element buffer, we only need to generate it, bind it to GL_ELEMENT_ARRAY_BUFFER, then tell opengl
where the data is.
Hopefully that helped shed some light on things. I'm almost positive there will be factual errors in this post as
I'm also mostly new to OpenGL but this was the way I conceptualized it to get my code working.
