Rendering Multiple Objects 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 going to be talking about
how we can render multiple objects on
the screen so far all we've really done
is we rendered that channel logo on the
screen at once and we haven't like we we
haven't rendered more than one object so
we're going to talk about what it takes
to actually render another object or the
same object maybe add a different
position or an entirely new object and
how in general we can go about rendering
multiple things this is going to set up
a bunch of things for the future as all
of my videos seem to do don't worry at
the end in like a hundred years from now
probably it'll come into a parent and
it'll all tie in nicely and you
understand everything works hopefully
but yeah so this will be kind of
important for things in the future and
also it's just a good thing to kind of
talk about initially before we dive into
it so if we take a look at our code I'm
just going to run it real quick so we
can see what we have we basically added
I'm GUI last time so that we had this
kind of nearby overlay by the way I
solved that whole mouse pointer kind of
being in the wrong place problem that
was because I was using the Intel GPU
inside my computer I switched to the
Nvidia one and it works fine so clearly
something to do with intel's drivers i
might make a video in the future talking
about that but it's perfect now as you
can see anyway so we have this journal
logger being rendered and we've got this
model matrix that we're modifying here
using i'm GUI and everything seems fine
basically our goal for today is gonna be
to render another one of these at a
different position and we'll see what it
takes for us to actually do that so if
we look at the code nothing really too
complicated is going on but if we take a
look at the code that actually draws
that channel logo it's this line over
here so we do render above draw and if i
just kind of old f12 into that so you
can see both you can see that um we're
basically by dow shader we bind our
vertex array we bind our index buffer
which actually isn't 100% necessary
because the vertex array already has a
binding to the index buffer but anyway
and then we actually issue the draw call
which is this line over here which draws
that cheddar logo onto the screen now
here's a thing the thing that determines
where this channel logger gets drawn or
in fact let's discuss these three lines
first of all and what they actually mean
so shada bind is important because it
binds a program
for our GPU to actually use to render
whatever we're trying to render that's
the shader the shader a lot of people
again think of shaders it's really
important that you actually understand
what shows are shaders which are also
called programs by OpenGL are literally
that there are they're a shader program
there's something that allows us to say
how something will be rendered we're
basically telling the GPU what to
actually do that's really important it
goes way but it's nothing to do with
like lighting or shading or anything
like that it's literally just us giving
instructions to the GPU as to how and
where and why whatever we want to
actually draw what we're trying to draw
that's really important that's step one
then we bind the vertex array which is
again the array that contains all of the
actual data so the program or the shader
says what to do with the data and this
vertex array is the data that we're
going to do stuff with so this includes
our vertex buffer and our index buffer
that's all that we've got at the moment
vertex buffer of course contains all of
the vertex data and put including the
positions of each kind of point that
we're trying to render texture
coordinates I think that's probably with
God but if we were drawing something a
bit more complex you might have other
other things in there like vertex colors
or normals or by normals or tangents or
there's a lot of things that you can put
into vertex data which we will get into
in the future the index buffer of course
contains the indices into the vertex
into the vertex buffer so that we
actually know like what render the index
buffer contains the indices into the
vertex buffer so that we can choose what
which vertices we actually want to
render and how to kind of assemble all
them together and then finally draw
elements just says hey you know using
that index buffer access the vertex
buffer and call the shader program on
all those vertices individually to
actually get it to draw and eventually
rasterize our object on the onto the
screen so that's kind of a bit of a
summary of what it takes to render that
one kind of shiny lawyer so if we want
to render another one in like would be
it'll look exactly the same but we want
it to be somewhere else on the screen
how do we do that and what do we
actually need to change well okay let's
think about
first of all the shader does that need
to change well the shader is kind of if
we take a look at what I shared or even
looks like it's just this thing over
here the third X shader just takes in a
bunch of data from the vertex buffer
which is this part of here and also just
directly from a CPU as uniforms and then
well sets GL position which determines
where the vertices are going to be and
then also outputs this texture corner to
the next stage of the shader pipeline
which for us is the fragment shader
which basically takes in that text
recorded from the vertex buffer sorry
from the vertex shader and then also
takes in two uniforms from the CPU and
then just basically samples the texture
using the texture coordinate and outputs
the color that it retrieves from that
texture sampling into this output color
over here in our final frame buffer so
that is how that's what our shader does
so if we think about the shader is there
specific to any kind of position well no
because it takes the position in from
some way doesn't it well let's look at
where it gets the position from so the
first thing you might notice is that yes
we have a position attribute up here
which means that this is coming in from
the vertex buffer so what we could do is
just one of the ways that we could do
this is we could supply different vertex
positions now what that would require is
having an additional vertex buffer
because we would need to create a second
vertex buffer which contains all the
positions of the second instance of the
channel ogre and then we could use that
to actually put them somewhere and that
would work that's fine that's one way to
do things let's see if there's another
way so the other thing that actually
happens here you can see that this
position also gets multiplied with this
uniform which is our modeling projection
matrix so what we could also do instead
of changing that attribute in that
vertex buffer is we could just change
that Model View projection matrix
uniform right we could basically just
provide it with a matrix that had a
different transformation applied like a
different model matrix essentially which
positioned our objects somewhere else in
the scene and then when that got
multiplied with that existing kind of
vertex attributes that we have those
existing
positions it would put them somewhere
else in the screen so that's kind of the
two ways right now or other two pieces
of data that we could actually modify in
order to get the to turn our logos to
show up in different places on the
screen so in this case what I would do
is I would leave the vetting buffer a
lauren and in fact right now I think
it's set to like 100 200 or like it's
not kind of normalized I probably just
set it up to be centered around zero and
then I would just provide two different
model view matrix model view projection
matrices to actually position them
somewhere else on the screen because
having two vertex buffers is an
unnecessary kind of memory usage that we
have in our GPU and also need to rebind
them which is a not as fast as just
providing a different uniform in fact
it's pretty common to just provide a
whole set of different uniforms every
time you draw where it's a vertex buffer
we don't necessarily need me to change
it in this case so we don't need to
actually worry about that by the way I
did just say that we're binding a
different vertex buffer is slower than
uniforms that's not actually true
sending uniforms over to over to the GPU
actually involves transferring down from
the CPU to the GPU so I didn't actually
mean it's physically faster to do that
I'm just talking about the fact that we
don't need to have two redundant sets of
data that we need to bind between and
basically it makes it feel like we have
two different objects in this case it's
a lot easier for us just to provide a
different model view metrics and that's
it a monthly protection matrix and
that's it so let's take a look at how we
might do that so if I go back to our
application of CV what I'm actually
going to do first of all close this
render a thing view is I'm just going to
like think about these positions that
I've actually supplied here so these are
all texture coordinates they're fine we
don't need to worry about them but what
we have here is we have a 100 by 100
pixel or unit I in this case one unit is
one pixel square here so what I'm going
to do is I'm going to make it so that
it's centered around zero zero because
right now it kind of goes from 100 to
200 and that's not great because it
means that if we provide any kind of
translation to it it's going to be from
this as the origin so we don't have an
origin that's actually
zero and I would like our origin to be
zero so what I'm going to do is because
it needs to be 100 by 100 is I'm going
to make the kind of left bound on the
bottom bound negative 50 and then the
right bound positive 50 because that
gives us a 100 by 100 square so I'll
change this basically anything that is
100 needs to be changed to be negative
50 and everything that is 200 days to be
changed to be positive 50 okay so this
is going to become negative 15 and this
is also going to be negative 50 I'll
send all the 100's right out to be
negative 50 just like that and then
these are going to become positive 50s
and I'll just remove a space here so
that everything kind of lines up
perfectly okay there we go done sorry if
we just hit f5 to look at this what we
should see is because 0 0 is the bottom
left of our screen if I set the position
of this to 0 0 what it should be is kind
of centered around our zero point now
it's a bit hard to see and additionally
I think we have a camera transformation
applied so if I just hit stop here real
quick and I take a look at the model of
your projection matrix that were
actually supplying so this is our view
matrix you can see that it's translated
negative 100 I'm not gonna worry about
that what I'm gonna do for now for the
camera
it's just leave it to be a translation
of 0 so I'll kind of leave all this code
here it is a bit redundant because
obviously we we have no translations so
this matrix is just an identity matrix
which means that we might as well know
multiply at all but we'll do will change
this stuff in the future that's why I'm
leaving the code in so we have this over
here and it just got a lot darker
outside and now it's raining
so if the lighting in this video changes
I'm sorry but that's how Melbourne
weather works okay so this is view
matrix is basically just and we don't
have any transformation applied to our
camera it's it's just in the kind of
middle it's in the default position
which is just 0 0 0 so if we look at
this now now that we don't have that
transformation if I just set this to 0 0
you can see that basically this channel
logo is kind of centered the center
point is that 0 0 of course it goes
negative 50 outside in both x and y so
that's where we're at right now just
ten page so now what I'm going to do is
I'm going to render this thing twice
except what I'm going to do is change
that Model T projection uniform here so
the color we can leave the same color
does not matter at this point because
we're rendering a texture anyway and
we're not tinting it by this color or
whatever so this is just might as well
not exist in fat I'm probably going to
stop setting it because it's just
confusing in terms of code so I need to
bind the shader now you'll note that of
course render a drawer does actually
bind the shader that's all fine but we
need to set up uniforms and in order to
set uniforms we need to have an active
shader balance so that we can bind them
to the right unit or so that we can buy
the uniforms to the right shader so we
need to basically draw so first of all
we know that chedda binds already is
activated here so we don't need to bind
again so what I'm basically going to do
is I'm going to bind my shader and then
before I draw I'm just going to set this
uniform twice like this right so before
every draw I'm setting out or Model View
projection in uniform now what I need to
do before I set the second one is of
course actually change it so what I'm
going to do is we have this model matrix
here which is kind of our well our first
translation what I'm going to do is go
up here the translation copy and paste
that I'm gonna call this translation a
and translation B I'm going to put this
one maybe at 400 X instead of 200 X and
then if I go down here I'm gonna use
translation a to get the first model
matrix here and that's what we're going
to actually use send and in fact just
just to keep this a bit cleaner I'm
actually going to enclose this in a
skirt along with that set uniform at 4
just like that okay and so that's
basically our setting the first uniform
and maybe I'll even put the drawer into
the scope so that it kind of makes sense
this is kind of one operation to draw
and now I'm going to do the exact same
thing to what we have over here exists
just that we're gonna use translation B
instead so identical same thing it's
just that we're using translation B
instead okay and we need to share to
bond really only for the first time we
run through this
because draw will bind that shader and
never unbind it anyway and since we're
not finding additional shared as this
will all work you want to make this
quite a bit more robust it would be
wiser to actually move that into here
again if you called by an shader on a
shader that's already bound that's a bit
redundant that's a bit slower that's a
bit of a waste of performance usually in
more complicated setup such as an actual
game engine or a graphics engine you
would have a some Chi caching system
that would be like hang on a minute
you're trying to bind the shader that's
already bound that's redundant I'm just
not gonna run that OpenGL call we don't
have anything like that set up obviously
but it'll be fine for this example
okay so translation a and B set up
differently and now what I'm gonna do
here is as I fix these I'm GUI errors
I'm actually going to make sure that we
have translation a and I'm also going to
add translation B into this I am going
window as well so we'll have a and B
just like that now let's hit f5 and see
what we get
all right check this out so we have to
turn our logos let me just move this out
of the way and if I modify that first
one you can see it moves the first one
over here and I can move it up and down
or left or right and then also the
second one over here is modified via
that second slider that we have over
here pretty cool stuff so that's
basically it that's how you render two
objects really all we're doing here is
we're rec work we're rendering the exact
same object twice we're not changing
anything except for a single uniform and
the reason we're doing that is because
we wanted to show up in two different
positions on our actual screen now you
might be thinking okay well cool that's
how I render multiple objects so if I
wanted to render some kind of tile map
maybe I'm making like AG a 2d game and I
have like this kind of level that's just
a tile map I guess I just write a full
loop that goes ahead and does this no
this isn't the solution to rendering
everything because if you do that if you
just have a full loop that renders a
thousand tiles on the screen that's
gonna be pretty slow because that's a
thousand draw calls and you it's just
that there's no it's not gonna be fast
at all you'll probably notice very poor
frame rates I mean it still probably
will be about 60 on base and hardware
because there's no nothing much to
render here in a thousand broke holes on
a PA isn't awful but you can act
we draw that in a single draw hole by
doing something called batching which is
where you actually shove all of your
tiles into one vertex buffer and then
have kind of instead of doing it the way
that I did it here which is I'm just
changing the uniform you can actually do
the other method that I mentioned which
is basically instead of having like
using we're basically changing the
vertex positions that are in the vertex
buffer and if you set that up but
instead of having two different vertex
buffers you shove it all into one vertex
buffer and then you kind of just render
everything all in one go and all the
data is already there because the vertex
buffer is very large and it contains all
the positions for every single tile you
have that'll be a thousand times faster
than if you go ahead and you reap and
you buy the shader you change the
uniform and you do jail drawer elements
for a thousand tiles okay and we are
gone we are absolutely going to explore
doing that kind of batch rendering
method because it's like for 2d games
it's a moss Fortuny rendering it's a
must even if you're rendering like
layouts or like kind of you know text UI
stuff like that for text it's vital
because every kind of character that you
render in text is a separate drop all or
no it's a separate like quad and we
don't want them to be separate drop
calls so this is will definitely cover
it in the future very soon probably but
the reason I did it this way is because
this is kind of probably the way that
makes sense and it's probably the most
simple way and it's also really really
useful if we were rendering 3d objects
that were quite complex
this is 100% how we would actually do
that and additionally it opens up then
one of the most important things that we
need to talk about which is the thing
that is different about these two
objects is just the uniforms so what we
need to eventually get into is something
called a material and a material is
really just a shader and a bunch of
uniforms and we'll get into that in the
future so leave a comment below as to if
you want me to continue with this kind
of 2d stuff and cover the batch render
in the next episode because I'll
probably end up doing that I think but
otherwise we might talk about materials
and start getting into some more
exciting things like that both topics
are very important and we'll have to
cover them anyway and they're very
saying to just leave a comment below and
thumbs up any comments and mention
one you agree with and we'll see what we
can do for the next episode anyway I
hope you guys enjoy this video if you
did you can to the like button you can
also help support the series we're going
to patreon account for such the Cherno
huge thank you as always to all my
lovely supporters all the source code
for every single video is up for patrons
so definitely support the series if
you're interested in getting a source
code and there's also a bunch of other
awards to thank you for your support I
will see you guys next time goodbye
[Music]