Index Buffers in OpenGL Video Lecture | Open GL: Basics to Expert - Game Development

hey what's up guys my name is Archana
welcome back to my OpenGL series so
today we're gonna be talking all about
index buffers last time we talked about
shaders and also before that vertex
buffers check out those videos if you
haven't already but today we're going to
be focusing on something new something
called an index buffer now before I kind
of define what an index buffer actually
is and we get into talking about why we
want to use them and what they actually
are
let's think up let's just think of a
basic problem that we might have in
graphics programming we want to draw a
square up until now we've just been
drawing a triangle that's it just one
single triangle on the screen
everything's been fine
it looks like the way that we're kind of
doing that in our code is pretty
efficient however let's try and draw a
square so what do we need to do to
actually draw a square well everything
that our GPU actually does comes down to
triangles we might talk later about why
that is but for now just picture a
triangle as pretty much the smallest
number of vertices we need to represent
one flat kind of plane with a normal
that is with a with a surface normal
that is pointing in a single direction
because of that GPUs tend to kind of use
triangles as their rendering kind of
primitives
right so everything's based on triangles
so when we try and draw two squares or
sorry when we try and draw a square it's
really just a triangle right most
specifically two triangles anything we
draw is made up of triangles so a square
is just two triangles right one two
that's it two triangles so let's try and
do that with our current set up and see
what happens
so over here we have basically this set
of vertices here for your published list
let's just run this application and see
what we've actually got well this
triangle here a nice blue triangle if we
take a look at the code we've got these
three vertices if we try and draw a
square well let's think about that for a
minute I'm just an opening trader here
so I can draw you a diagram instead of
us kind of drawing our triangle like
this which is what it is right now we
want to kind of draw a square out of
true triangles and the way we can do
that is just by drawing two triangles
like that right so we kind of have one
triangle over here and one triangle over
here
and drawing those two triangles
separately kind of like that and then
like that or however you want to do it
that we're probably going to do it like
this
and then like that so that's how we're
going to actually make up that square so
let's talk about which positions these
might actually be so this one I mean
here we know is kind of going to be
negative 0.5 in both x and y that's kind
of what we've got over here right the
next one if we come over here we can
draw this in an anti-clockwise fashion
then we're going to be drawing this
vertex first then this vertex then this
vertex right so if we go back to our
source code that's basically going to be
negative 0.5 in X&Y this one's going to
be positive 0.5 and then still keeping
negative 0.5 for Y and then we're going
to lift Y up to positive 0.5 and also
keep X like that so so if we just run
this program now we should have that
first triangle drawn as you can see
that's what we get okay so now we need
to draw the second triangle so let's
start off with drawing this vertex here
then this vertex here then this vertex
here to kind of keep going in a
counterclockwise fashion so back to our
code and we're going to add some
vertices here I'm just going to get rid
of this six here so that we can have as
many as we need when a copy and paste
this vertex position because it's going
to be exactly the same of course these
two vertices are actually the same and
then I'm going to add one more vertex
for that will be the top left corner
which is going to be negative 0.5 X and
positive 0.5 one and finally this vertex
over here is also kind of the same as
this vertex so that would be the same as
the very very first one here so now we
have six vertices if I come down over
here we need to adjust the size about
vertex buffer so that it can actually
take in all of this memory so I'm going
to instead of just changing this to be
12 I'm gonna make it six times two times
size of float because of course each
vertex here is a size off to floods and
we have six vertices it's just a little
bit easier to read you must pull down
here the other thing I need to change is
instead of just drawing three we of
course need to draw six so in my GL draw
erase I'm going to change this to six
and then hit f5 all right there we go
pretty cool so we've got an actual
square now well specifically this is a
little bit rectangular because our
window is actually not not square so
that seems pretty good I mean we've
managed to draw a square wasn't too
difficult but there is something a
little bit suboptimal about the way that
we're actually drawing this square now
specifically let's take a look at our
vertices so back over here in our actual
vertex kind of array that we have here
you can see that what we're actually
doing is we're repeating ourselves
we've got this vertex over here twice
right and we've got this one this first
and last one is also exactly the same
these aren't completely unique which
means what we're actually doing is we're
kind of duplicating our memory we're
storing these same bytes of the same
vertex positions in our GPU memory
multiple times and that's a little bit
wasteful because well GPU memory isn't
just infinite and we do want to keep
that down so what we can actually do is
use something called an index buffer
which allows us to reuse existing
vertices because if you think about it
what we really want to say is draw kind
of these three vertices like this and
then maybe draw these three vertices to
make up the second triangle this is much
easy it's gonna be much easier if I just
show you as a diagram but I don't mind
doing this so let's go back to
illustrator you'll be fantastic if we if
we could just say and let me just change
my color over here to maybe red if we
just say I want to draw this vertex then
I want to draw this vertex then I'm
gonna draw this vertex and then I want
to draw this vertex again this new
vertex over here and then this first
vertex again right because that would be
all we would need to really say to draw
this part and then just draw that part
as well like that okay so we want to
avoid kind of repeating ourselves or
specifically just having the exact same
memory multiple times that's very
wasteful now obviously for a square or
for a rectangle it might not seem
wasteful because there's not much to it
I mean yes we do have 50% more data in
our vertex buffer because we're storing
two extra vertices instead of storing
four were storing six however when you
think about a 3d model right maybe
you've got a character in your game or a
spaceship or whatever it may be right
every single triangle that makes up that
shape of that character is going to be
connected to another triangle right
which means that you're immediately
already repeating at least two vertices
and then maybe there's another triangle
up there right so you can kind of see
how this is just kind of escalate out of
control and you might have so many extra
vertices not only that but when you're
actually rendering it rendering 3d
graphics and potentially in like maybe
you're using something like physically
based rendering your vertices might be
pretty
you might have vertex positions normals
texture coordinates by normals tangents
colors you might that might all be in
one vertex and if you have to duplicate
that entire kind of buffer that makes up
that actual vertex and get it again and
again that's just gonna be completely
unrealistic right just having a simple
index instead is going to be much
quicker and much more efficient so let's
let's just let's just convert this kind
of vertex buffer that we have now let's
add an index buffer to it and remove
those kind of that duplicate read onto
the memory so if I go back to my source
code over here what I'm going to do is
make an index buffer so the way that we
do this in kind of well here's another
way to think about it really if we get
rid of all of the redundant stuff inside
this array right so that we only have a
unique vertex positions here what I'll
do is I'll get rid of this one because
it's the duplicate and I'll get rid of
that last one because it's a duplicate
right so now what we have is basically
this and if I go back to illustrator
just so you guys can visualize this a
little bit easier I'm gonna make this
color green or something like that right
this this is our index 0 this is index 1
this is index 2 and this is it next 3 ok
so 0 1 2 3 each line over here put and
divided it line by line is a single
vertex and of course if we kind of
number these vertices starting from 0 we
get a sort of index so if I was to
create an unsigned int array here called
indices and I just wanted to basically
draw that same square that I had before
what I could say is use the first vertex
the second and the third vertex to kind
of get this first triangle over here
like that so that would be 0 1 & 2 if we
kind of refer to our vertices like this
as if they were indexed which they are
we kind of get this order right so 0 1 2
and then for the second triangle I want
to do 2 3 & 0 right because that's this
position 2 right 3 & 0 which is how we
can kind of draw this triangle the
second one so 2 3 & 0 and that is
actually an index buffer we've just
created
exactly the data we need to tell OpenGL
how to render this triangle or rather
this square without using without
providing it with redundant or duplicate
vertex positions and all that all
vertices I should I should just say cuz
obviously in this case we've just got
positions but they could be there could
be a lot more data in there so now all
that remains is actually instead of
having this data here these indices here
on the CPU we want to actually send them
to the GPU and then tell OpenGL to
render using them okay and the way that
we do that is very very similar to the
way we actually make a vertex buffer so
let's copy this I want to put this after
up on a vertex attribute stuff just
paste it here I'm gonna rename this Ibo
which says for index buffer object
because it's kind of like our ID or our
object which represents this particular
index buffer we're going to generate a
buffer in the exact same way that we
generate a normal buffer the only real
difference here is that instead of
binding this as an array buffer or
specifically to that slot to that GL
array buffer slot we're binding it to a
GL element array buffer okay and once
well just make sure that I'm doing that
for both the bind buffer and buffer data
the buffer that we're binding is of
course this Ibo that we've just
generated and finally when we supply it
with data instead of supplying it with
positions we supply it with these
indices so I'll just write indices and
then of course the size of them is in
this case going to be six unsigned ends
now keep in mind that I've chosen to use
on signed ends here because we'll
probably likely be using unsigned ends
in the future however you can just use
unsigned char or unsigned a short if you
want to kind of save memory char of
course being one byte short being two
bytes integers are four bytes so they
are a lot more memory than say a char
however obviously you have the
restrictions of use a char in the an
unsigned char you only have 0 to 255 so
you can only have 256 different
different indices we're going to use on
sign ends for all these examples because
there's not going to be any measurable
performance difference in this case and
in the future when we have pretty
complex models will likely want to be
using unsigned ian's anyway the key here
is that it has to be outside you cannot
use a signed type okay
it has to be unsigned more on that later
so down here oldest verify that we do
have six times on signed and
which is exactly what we've got in our
actual array and then we're of course
taking it over here so looks pretty good
right so what else we need to change
well the last thing when it's change is
our actual draw call instead of being GL
draw erase it becomes shell draw
elements and the mode here is the same
we're drawing triangles
the count is going to be 6 because we're
drawing 6 indices this is the number of
indices we're drawing not the number of
vertices we're drawing
the type is the type of data that is in
the index buffer which in this case is
GL unsigned int and finally this is a
pointer to that index buffer now because
we've got a bound in this actual slot
here we've actually you can see gel bind
buffer element array buffer this element
array buffer is a slot for index buffers
and we've bound our Ibo to there we
don't actually have to put anything here
so I can just write a null pointer and
that's it that's all we've got this is
the actual draw call that draws our
triangle using six kind of vertices
right but you can see obviously our
vertex buffer only actually has four
vertices and then we've indexed into
that
so let's hit f5 to run this program and
you can see we get a beautiful rectangle
now that's great I didn't mention
something about these having to be
unsigned and this is actually going to
lead it great to the next type in gel
episode but let's just deliberately make
some kind of mistake that's pretty easy
to accidentally make let's just say that
instead of writing GL unsigned it's some
reason here I wrote GL int ok looks
pretty harmless I mean yeah an unsigned
in is there really that much of a
difference I mean obviously there is but
let's just say that we didn't know that
let's hit f5 and look at that we get a
black screen we get absolutely nothing
printing in the console except for that
OpenGL version that what's going on here
well what you've done is you've used an
invalid a gnome you've used int whereas
this buffer or any index buffer has to
be made up of unsigned integers not
signed integers unsigned integers so of
course in our case we know what the
problem is we could just bring this back
but you can imagine how some people when
they write this code it might make the
mistake I've made it before hundreds of
times probably and I've wondered why do
I have a black screen this is going to
lead us into our next
which is going to be about OpenGL errors
and specifically what we can do to deal
with errors in OpenGL because you can
see if I just give it and invalid enum
like I just did right right then it's
not gonna say anything to us we have no
idea what we've done wrong instead we
get a black screen and nothing's working
that can be an absolute nightmare to
diagnose a debug especially if you're
new to OpenGL so next time we're gonna
talk about errors and what we can do
about them how we can best kind of get
error error reporting back from OpenGL
and like basically just make the best of
errors in OpenGL so that we can know
immediately when something goes wrong
and specifically what goes wrong that's
gonna be making a lot of a bad situation
because OpenGL just tell you right now
OpenGL debugging is very very bad anyway
just to recap index buffers what we've
actually done is we've removed any kind
of duplicate vertices that we may have
here we've just got absolutely
completely unique vertices in this
vertex buffer now what we've done is
we've created an index into that vertex
buffer to allow us to kind of draw
vertices more than once and then we've
actually sent that index buffer to the
GPU using this code here with what we've
created one and then we've actually sent
this data to the GPU using this line
here and then finally we're using child
draw elements to draw using an actual
element buffer or an index buffer as
they're more commonly called instead of
GL draw arrays which is just going to
kind of draw our vertices sequentially
and that's it that's how we can draw a
square in OpenGL using an index buffer
and that basically what you see there is
set up but its buffer index buffer and
GL draw elements call that is probably
how we read a 90% of our stuff onto our
screen and OpenGL even in a full-on
professional like triple-a game that's
how you do it GL draw elements is the
function to be using most of the time
anyway I hope you guys enjoy this video
if you did you can hit that like button
if you want to help support this series
and make sure that new episodes come out
as often as possible as well as get a
bunch of really cool rewards I don't
know where the patreon account for such
the Cherno massive shout out as always
to all of the wonderful supporters which
make this video possible would be
nothing without them so again thank you
you can keep talking about what I've
just mentioned in this video we're going
to discord
4/2 churn or just leave a comment below
do you guys use index buffers because
usually you should be okay I mean I like
to kind of engage the community so to
speak at the end of these videos and be
like hey what do you guys do but in this
case obviously you like I mean you
should be using index buffers for pretty
much everything it's hard to think of
anything that shouldn't be using an end
index buffer to be honest so this isn't
even really a question you need to be
using index buffers they're there for a
reason and they're they're wonderful
anyway hope you guys enjoy the video
next time we're going to dive into
OpenGL errors and see how we can handle
them properly and that's that that
should be quite a fun episode I think
because the number one thing is the
number one thing I see with people who
are new to OpenGL and they're always
complaining because something isn't
working for them it's because they're
not dealing with their errors correctly
and what they get is a black screen and
everything is the worst and they have no
idea what's going on and Ferren are
prepping gels and camel does this well
at all but setting up some basic
debugging tools for yourself and some
debug code as well is can really go a
long way into making sure that you you
will alert it immediately when something
is wrong so I'll see you guys next time
goodbye
[Music]
[Music]