Buffer Layout Abstraction in OpenGL Video Lecture | Open GL: Basics to Expert - Game Development

hey what's up guys my name is Archana
and welcome back to my OpenGL series so
today I'm gonna be talking all about
vertex arrays and how we can actually
abstract them if you don't know what a
vertex array is check out the video that
I made explain what vertex arrays are
and how to use them and why we need to
use them as I mentioned in that video
they are kind of optional to use I guess
but the trend seems to be moving towards
using them so semantics aside details
aside let's actually get into this and
figure out how we can abstract a vertex
right in OpenGL
so first of all what isn't a why exactly
should we be using a vertex array and
what does this what is the goal of this
abstraction right why do we want to
abstract this is another thing that you
can actually think about when you're
abstracting something it's not
necessarily like you know let's just
move this out into my own classes but
why are you moving it into your own
classes right why don't why do I have to
create a class specifically for this
kind of concept right why can't I just
use opengl code a lot of the times it
seems to be just because I want it in my
own namespace and I want to call it my
own thing right that's not really a
reason for abstracting something I mean
it can be in a lot of cases because you
obviously want to kind of streamline
your API and keep it consistent so
sometimes you just end up creating a
very very thin wrapper that does nothing
else but but basically change the name
of a function and that's also kind of
okay but when you're thinking about
vertex arrays and when you think about
all these OpenGL concepts have a think
about why am i abstracting this why am i
moving this out into a class what is the
purpose of this what do I hope to
achieve with this and specifically the
goal of that is so that you can tell
yourself this is the list of this is the
list of features I need these are my
requirements now let's build something
that can actually facilitate that for us
what a vertex array needs to be able to
do is hopefully tie together a vertex
buffer with some kind of layout right
so vertex buffers I just buffers with
data they have no actual concept of like
you know the first three floats or a
position and their floats and they're
this big and all of that there's no
concept of types or size or anything
like that it's just a plain buffer of
actual data we've just have
bunch of bytes so how like what is what
is each byte what like how big is each
vertex all of that kind of stuff that is
what a vertex array is really for you
supposed to tie together that buffer
with an actual layout and you can add an
index buffer into that and do a bunch of
other stuff which we can talk about
later but that's that's the basic idea
of what they exist in the first place
and a vertex array object is open gel oh
it's open gels way of kind of storing
that state so what we need to do as we
think about creating this API right now
is we need something that hopefully I
can just create a vertex array and then
I can maybe give it a certain layout and
then add a buffer to it or something
like that or maybe I just created vertex
array which is a series of buffers can
be one or more and then I just tell the
vertex array that I've made hey I want
this kind of layout and hopefully
that'll kind of be enough for like what
we're trying to do and then later on
when I bind the vertex array I should be
able to just call like vertex write or
bind on my own on my own object and that
should kind of tie everything together
and actually you know bind the array in
terms of opengl so think about it that
way hopefully that would make more sense
as I start extracting this but the
really the thing that the thing that is
important for us is we want to be able
to define some kind of layout and this
layout may be something that we also
want to have exist on the CPU side so
that we can maybe read our actual vertex
buffer data this is another useful thing
for debugging it's not like 100%
necessary for us to do this because
there are tools that let us actually
debug data that's on the GPU using the
layout we've specified for the GPU and
all that but still CPU sides sometimes
it's useful to actually see our vertex
buffer data and actually be able to read
it and like interpret it and for that we
do need a layout so we do need a way of
actually storing the stuff on the CPU
like one example of that just off the
top of my head is like not just for
debugging but maybe if we want it to
like have like some kind of picking
cache so that we can actually rate each
triangle of our model so that when the
user like clicks click somewhere on the
screen with their mouse button we can
actually select that object and for that
we need to fire array and actually see
if it intersects a triangle that is part
of our model and
that we might want to do like we might
want to actually store the vertex locker
on the CPU side so that we can actually
you know do that rate kind of collision
test it gets that triangle so that's
like one example of why we might want to
do that but my point being that it's
useful for us to actually create some
kind of like buffer layout object which
is another thing that we'll do will
actually do today so anyway I know I've
been talking for like five minutes now
so let's just cut all that I'm not gonna
cut all it literally in the video but we
are gonna jump into some code right now
and we're gonna see how we can actually
abstract this vertex array object stuff
so looking through our code over here
the big part that's kind of I guess part
of our vertex array is really just kind
of this but it's also this right this
might not seem like it's part of it
because we don't necessarily need to tie
this to a vertex array we could just
have a single vertex array and keep
resetting this I talked a lot about this
I am probably gonna make a dedicated
video talking about the differences
between that two because I keep
explaining myself I probably shouldn't
be but we can of course either have one
global vertex array object and keep
changing the layout of each buffer as we
bind it or we can kind of keep
everything in vertex ray objects I think
the vertex array object video covers
that so just vertex array swatch that
anyway this is kind of what ties
everything together
or rather vertex arrays are typed with a
certain vertex buffer and an actual
layout so what I'm what I might want to
do right if I just kind of loosely just
draft up some code base at leas I might
want to be able to say vertex array V a
right it doesn't necessarily need to
take anything then we might want to like
add a buffer or something I don't know
add buffer VB and then we might want to
add a layout or something like that
right and then the layout we might
define separately maybe I'll have a
class called buffer layout and then I
can maybe somehow define you know maybe
I push like the first thing well really
we just have like float so maybe I have
like three floats or something that I
actually add to that I don't know
something like that and then I add the
layout so this is looking pretty
reasonable to me ad buffer might taking
an index it might be useful to kind of
set a buffer at a certain index as well
because we can't have most
offers that might tie in with layouts as
well there's a lot of really complicated
things that you can actually do here as
I said like with with this series the
way that we're kind of gonna take it is
just as we go so when I require a
feature I will extend the API to have it
I'm not going to try and write a
complete API like just like straight
away right now because that that's
basically impossible to do
okay so judging from this there should
be enough to get something working and
then if I want to actually bind it and
all of that I could probably just do you
know viedo bind and finally with this
draw the drawing code will kind of stay
the same because that'll be handled by
our renderer anyway but it's kind of
bind vertex array code kind of should be
becoming viedo bind like that okay
unless actually just get rid of this VI
bind okay
so base based on what we've just done
here let's try and actually create this
vertex right thing so I'm gonna right
click here go to add new item now I'm
just gonna do this live in front of you
guys I haven't actually prepared this
earlier so hopefully it goes well then
anyway so class vertex array as I said I
want to be able to have some kind of
buffer thing so potentially what I might
want is what will have the constructor
and a destructor and that's going to
basically just hit up in jail and
actually do what we needed to do when we
actually create a layout I mean when you
think about it this this vertex a trip
pointer applies to the currently bound
buffer so all we really need to do is I
guess we do need to like once we
actually create the vertex buffer and we
add it we do need to bind it to a
certain layout don't we so maybe maybe
it's not even worth having vertex arrays
actually store vertex buffers or
references to vertex buffers it might
just be useful for us to actually bind a
certain layout with a Vettes Buffett is
currently bout if that makes any sense
so I'm actually going to do that because
it's gonna be a little bit easier and
faster for us to do so instead of us
containing buffers or anything what we
are going to do is contain potentially a
layout in fact what I might do just a
bit of a random thing that I was
thinking of doing what we actually might
do is change this around so that
what this literally does is just set
everything up on opengl site and not
really store any state on the CPU at all
so because really what we need to do
like the benefit of this is that we
don't need to keep setting the layout
every single time because the vertex
array is so hot in here the vertex array
actually stores that state for us so
what we just need to do is basically say
hey here's the buffer he's here's a
layout make it work together
so let's illicitly start with that and
we'll see what we get so I'm going to
say void I don't know
add buffer I'm not great at naming
things it's hard man it's hard so what
we'll do is we'll take you in a vertex
buffer here bébé and then we'll also
have a layout so buffer vertex buffer
layout I'll say layout all right so two
things that need to go created so first
of all we already have vertex buffers of
a second just include back here and of
course I've gone ahead and created this
node in the source folders let's move
that into the source folder here okay
good so we have vertex buffer and then
which is not being included yes it is
just intellisense I guess and then
better stuff the layout is something
I'll make here as well so we'll say
vertex buffer layout and this is kind of
gonna be our layout class which will
probably have some kind of I might just
make this I'll probably move this thing
actually ah we'll need that though so
we'll say vertex buffer element or
layout element or something like that I
don't know again names a hard man so
what this is going to really do is just
have a vector filled with these elements
vertex buffer element M elements will
include vector okay and then what we can
do with this vertical layout is really
just I'll write something it'll be a
template that we can actually just push
some kind of value in or rather we can
push a type in really that's why it's a
template you'll see how this works in a
minute for this case we're just gonna
static assert false because we don't
actually handle business as if basically
the type is unmatched because what we're
about I mean what we're about to do next
is actually create a bunch of template
specializations so this will be a push
for let's just a flirt where we can push
a number of floats in and then what this
is really going to do is MLMs dot
pushback and what we'll do is so let's
think about what we actually need in
this if we look at vertex at your
pointer we need an index we need a count
so it kind of got count like s count is
what we specify here so we definitely
need a count here I was making it
unsigned and count
we need a type which we can handle we
need normalized and we need a straw
and I guess we also have an offset so
really all we need here is inside better
buffer element we just need one slider
and count
we need the type which is also an
unsigned end because it's an open gel
type and then finally we need one more
thing and that was whether or not it's
normalized so we'll say ball normalized
so count and normalized we'll leave in
like that I might not I mean for floats
and stuff like that we don't really need
normalize we went to sleep normalized
out for a bit so I push back is going to
push back one of these so we're going to
have the count which is just count we're
going to have the type which I'm
actually gonna remove to be the first
thing so we have type counts and
normalized so the type is going to be in
this case in this case GL float because
we're this is the flow specialization so
GL flirt counts going to be count and
normalized finished from the hard code
to false now we are going to have to
include up in jail to actually do this
you could just if you were dealing with
multiple api's and you didn't want to
include OpenGL then I think this is just
to me of glue right then you could just
basically have some you you could just
copy across the actual definitions of
all of this defines right so Jill
Florrick has a numeric value you could
be like I mean if I go into this you
know you could just copy a bunch of
these and literally put them into your
source code so that you're not actually
including the entire from jail header
because you might not have access to
that and you still want this court to
compile on platforms in my muscle for
open jail that's an example of what you
could do because I'm not trying to tie
this interview up in jail specific but
in this case obviously it is so that's
that I'm just gonna make some space here
so we have floor let's try like one more
at least again I'm just gonna add these
as they come in I think so unsigned int
might be chill unsigned int as the type
counts and false right this pretty basic
one thing I might also do is in the case
of like let's just say we have on slime
chars as well so like by it's basically
go
may we we may want to keep those
normalized basically so I won't do that
and this would be unsigned byte okay so
just an example of how we can basically
automate this now I know this might seem
a bit confusing because I'm just writing
code and not really explaining much of
it probably but all this is going to tie
in together when we actually are in the
vertex array class actually setting
everything up through ourselves so
that's the layout um if we go down here
we need a few things first of all we
need a way to actually get the stride
right so gets try it definitely needs to
be a thing and I'll probably keep track
of that so I'll just say return stride
we also need a way to get these actual
elements so vector vertex buffer element
M sorry get elements don't return m
elements pretty long line or you can see
it so stride wise we might just maintain
a stride so I'm saying int m stride I'm
actually just going to implement this
whole thing I think in the header file
so we'll set the stride to zero to begin
with and then every time we do this we
basically want to say m stride plus
equals the size of the actual thing that
we're pushing back so in this case it's
gonna be four bytes what you probably
want to do is write some kind of
function that converts a GL you know
like type ID thing so GL type it on into
an actual size so that you can basically
just be like size of GL float and
that'll be fine but we're just gonna
hide credits for now so you could also
write size on float I suppose or a slice
of jail float like that that'd probably
be reasonable we'll keep it as that for
now I think GL you int and this will be
the GL bite okay cool so this is pretty
simple here I hope you kind of
understand what's going on here
we're just maintaining basically a bunch
of actual elements that make up our
vertex buffer or rather we're
maintaining like you know if we have to
Floyd's here three flights de Beauvoir
we've got an actual layout for our
buffer and what we can do like the index
of each element is obviously the index
as it appears in our actual vector and
then when it comes time to bind all this
or rather where it comes time to bring
about a spot for whether the next layout
we can actually set that up in Venice
all right so let's do that here so I'll
include vertex buffer layout and I'll
actually have to create a CBP file for
our FedEx array so let's just quickly
create that well it's right done okay so
include Vettes all right if I go back
here I'm just going to right click and
create method implementations for
everything so the beginning we won't
start with anything really and then add
buffer really all that's going to do is
bind the buffer and then it's going to
basically set all this stuff up so we
have these two lines of code which is
our Buffalo I'm going to copy that I'm
gonna paste that in here we're going to
include I guess the renderer which
should include open jail and the GL call
macro and then what I'm going to do is
basically just use constant order hips
that I want to talk about the whole type
we'll get our elements equals layout get
elements and then for each Const order
element and elements we're going to
actually do all this stuff so I'm
actually gonna change to be a foot
normal for loop so for I equals to be an
unsigned int on set in I equals 0 I is
less than elements dot size I plus plus
Const order element equals elements I so
I'm just iterating through that vector
elements that we have over here in our
actual layout plus this is this thing
here and we're going to enable I as our
actual vertex a trip array and finally
this is going to be I this is going to
be element dot count this is going to be
element
type this is going to be element dot
normalized so if it is normalized right
because this is actually a boolean let
me just drop this down online and see
you guys and see if it's normalized if
that's set to true I mean to be honest
so my just go back here and actually
store it as an int or something
so we'll say I'm signed a chart
normalized we didn't need to store it as
an int although with a lot of memory
alignment probably will be an in anyway
but doesn't matter anti-china normalized
so basically we'll just set this to be
GL false GL true and this will be jail
false as well and that way all we have
to do is invert its array we don't do
any kind of transformation we can just
do add on an elemental home list now
this is the stride so this will be a
layout dot get stride and then this will
be the offset so the offset we can
actually calculate here so unsigned and
offset equals zero we pump that in here
offset and then we simply increment the
offset so offset plus equals element dot
type sorry element dot count and we do
need to know the element size which I
don't think I'm actually storing it
which is great so we also need to count
cost us to a constant work went oh by
the way that's that error okay so we
need to know the size of each type so
what I might do is actually do that
thing that I was talking about doing
which is inside a vertex buffer layout
I might actually even slide vertex
buffer element on my case static
unsigned and get size get size of type
or something and then this will
basically be unsigned
and type switch on type and then case
you know GL fluid return for unsigned
int for and the only other one we
support which is unsigned char or
whichever one
sorryi one bite which I might have just
yeah that's good okay cool so now this
becomes let me just align this stuff
return zero and we should have sat false
here and I guess that assertion stuff is
inside our renderer whoops so let me
just include the renderer okay cool so
there we go
I like to indent these a bit like that
but there we go so four four and one
obviously this is you make sure you get
these right and make sure you support
all the types that use can't and support
we're just doing three when we add some
more types we will expand all this get
size of type I can now use with this so
instead of this being that it will just
be buffer
sorry vertex buffer element get size of
type and then the type is jail float and
then this would be the same but for
unsigned int and then this will be the
same for unsigned byte okay looks pretty
good to me
and now obviously inside our vertex
array we can actually say offset plus
equals element account times vertex
buffer element get size of type element
dot type okay so that is our ad buffer
function you can see there's quite a lot
of things but the main thing it does is
bind the actual vertex buffer and then
set up all that layout now we have to
actually create the vertex array
obviously so let's do that I'm gonna go
back to the header file add an unsigned
and M renderer ID just like that we're
going to set it up here I guess so let's
just go down here and copy what we have
from application which is basically this
code so we're going to M renderer ID
here and then we'll we'll find that well
we don't have to bind it in this case um
in the destructor I will delete vertex
raise 1 and then M renderer ID like that
okay that was pretty good and then over
here we do we should bind it so let's
call bind now we don't have a bind
function yet so let's add that so we'll
have our buffer and bind Const and
unbind Const I'll make those using
visual assist again and then we'll
basically call GL bind vertex array and
render ID and then phone bind will just
bind 0 okay so we have where we buy the
vertex array we bind the buffer that we
want to deal with and then we set up a
layout for it and that looks pretty good
to me so let's test this out back in
application I'm going to include vertex
array and then I'm going to go back down
here we make a vertex array we make a
vertex buffer we're going to make a
vertex buffer layout now all we have in
our example here is just this right so
we know that from this actual GL call we
basically just set up two floats so all
I have to do here is I can get rid of
all this and just do layout push float
to like that that should be it
and then via VA dot add buffer baby and
layout just like that okay so hopefully
that makes sense it is pretty
straightforward and if we go down here
instead of by Vettes array we should
just be able to do the edit button and
everything should be good sorry let's
hit f5 and hopefully this works because
I just totally improvised all that okay
so we are getting an error here this
looks like almost a warning really but
we basically should be having unsigned
an account and not an account so I'm
just going to change this type to be
unsigned like that for all of these
obviously we can't have a negative count
anyway all right that was good f5 okay
and we get a triangle so we don't get an
actual square so maybe I've done
something wrong let's go back to here
and see what's up
so we had a cabin his buffer has four
vertices sounds pretty good
we're definitely drawing six still and
that's all good let's actually debug
this I guess
let's go into our actual layout here and
inside a buffoon was gonna place a
breakpoint here
let's close this memory view make some
more space here f11 to step in and then
I guess we definitely bind that better
straight does have a rat it does have a
real renderer ID but it's not a barn
will find that elements we have one
element it is the type is full of our
sizes countless to normalize is zero
looks pretty good to me so far
step into here we Nabal this index 0 of
course element of count is to type is
that normalized is that layout gets
tried what's the stride for for sims ah
so there's the problem the stride is
forward it obviously should be four
times the count which in this case is 2
sorry what we need to do is go back to
that I've got a layout and make sure
that this thread is actually the size of
type times the count so if it got to
multiply by the count fat on my move the
man might move it and make the count
first so count times the stride all
right there we go so take to f5 and
there we go we get our actual square as
usual all right so that's it that's
gonna wrap up this implementation that
we've quickly thrown together over
vertex array on how to actually abstract
that as well as the layout part the big
thing here I guess to capture is this
actual layout idea right we're actually
providing our own layout in a very kind
of high-level sense we're basically
saying that hey I have two floats here
deal with it OpenGL and that's really
really useful because if you were if you
were to use like multiple rendering
api's in an engine or whatever you
obviously would want to have a generic
way of saying this is the layout of my
buffer and that's exactly what we've
done over here obviously with this code
if we had several kind of things maybe
we had you know a 3d kind of position
then a 3d normal and then like a 2d
texture coordinate we could just do this
when we actually add maths and
mathematical types and stuff we might
even have something like math vector and
this being able to say we have one back
to here maybe one effect three for the
actual position or whatever that will be
useful as well and we can really expand
this to be pretty good in the future
alright so any questions that you guys
leave them in the comments below this
episode I think was a little bit
different than all the other ones I mean
I kind of just programmed live in front
of you guys this almost felt a bit a
little bit of like a live stream and may
actually explaining what I'm doing along
the way let me know what you think of
this kind of format as we start to get
into more serious OpenGL things I'm not
sure if I can take this slow I mean Mike
I've been recording for 29 minutes and
50 seconds at this point like it's this
isn't gonna be a huge episode and I
basically got through this stuff as
quickly as I could so yeah definitely
let me know what you think about this if
you were able to follow along and all
that hopefully hopefully you were and I
don't need to kind of explain too much
more hopefully much this made sense but
other than that leave a like if you
dread this video you want to help
support this series you can go to patron
accomplice at the Cherno huge shout out
as always to all of my wonderful patrons
that make this stuff possible definitely
help support a series there if you like
what I'm doing here and want to see more
because this stuff really wouldn't be
here without all those wonderful people
next time we're going to talk about
shaders and how we can actually abstract
that that's basically a thick looking at
this that's like all we have left I
think oh I'm in and of course the
renderer so we're definitely on our way
to kind of abstract thing a lot of this
stuff actually while I'm here I noticed
that we still have this vertex array
code so let's just remove all that
better so record so we meant we have
this nice and set up like that beautiful
and then by vertex array zero and
although we don't really need that there
so we'll just kind of leave it as is and
in fact since we are kind of testing on
binding everything I might just call VA
dot online instead it which just does
that basically now I did write quite a
bit of code this episode if you would
like access to the source code that you
got a patron icon for sent returner help
support a series and you'll get access
to episode by episode kind of source
code for all this stuff could be useful
because of course I did write quite a
bit of code and if you got something
wrong it's a really good way to kind of
compare and make sure that everything is
working for you anyway hope you guys
enjoy this episode next time shaders
then after that probably render and then
after that we really have to add maths
and stuff like that and then we'll move
on to some more exciting things like
textures and like actually getting
graphics and stuff together we should be
able before all this series is
it's quite a bit of work let me tell
you're from jail anyway see you guys
next time bye
[Music]