Setting up a Test Framework for OpenGL Video Lecture | Open GL: Basics to Expert - Game Development

hey what's up guys my name is HNO and
welcome back to my opengl series so
we've been over the last few episodes
over the last few weeks of last few
months whatever we've been learning
about all these basic OpenGL concepts
and now what we actually have is the
ability to like put all those concepts
together and actually do something a
little bit more complicated and that's
what we're going through in the future
very soon and start getting into things
like batch rendering and materials 3d
scenes that kind of stuff and in order
to facilitate that I really want to
spend some time and to actually get its
application in order because what we
have right now with our OpenGL
application is really just all of we've
got a bunch of API kind of classes that
we've created for things like vertex
buffers event X arrays index buffers
textures that kind of stuff and then
we've just got this application we'll
save a big file which is just kind of a
bunch of just calls to opengl stuff but
what I really want to do is have the
ability for us to have different tests
so to speak so different kind of areas
of applications different scenes then we
that we can actually cycle through and
each one of those tests or scenes is
meant to actually demonstrate or just
Shore one concept working so basically
what I'm what I'm saying is that I want
us to be able to have like a scene that
is just an example of batch renderings a
scene that is just an example of a very
very simple like material being used or
something like that right a scene that
is like some complex shader or whatever
or even something that is just a scene
that is as simple as hey this is how you
change the clear color at the GL and
this is like some I'm GUI controls for
being able to change that here it is
rendering alright what I want to do is
create like a library of examples of all
these different concepts and what we
need to kind of do first is to create an
application that is capable of doing
that and the way that we're going to set
that up is very very simple we're just
going to have a menu in I am GUI that
shows all of the available scenes or
tests or examples and we're just gonna
be able to pick one when we click it it
opens the same we can say the same and
all the I'm going controls that are
associated with that same there and then
we can click the return button to go
back to that menu and it will basically
just destroy that scene so every time we
go into a new scene it loads everything
required for that scene and when we add
the senior destroyed everything so if we
can if we keep going back and forth it
reloads everything from scratch and thus
also shows that all that cleanup is
working correctly
and all of that kind of stuff okay so
that's the plan
because what I would actually thought
about doing I'm just gonna have to drink
some tea first what I thought about
doing which is getting into batch
rendering like I said last time and most
people I think I gave you guys the
choice of materials a batch rendering
you went with batch rendering which was
the correct choice by the way because
that's what I would have done it anyway
I must confess anyway um so instead of
doing that we all wanted to do that
today but I thought like I look through
this main file and there's so much junk
everywhere I want to basically have an
example of batch rendering a nice clean
file and every kind of file that is an
example will be like an instance of a
class well it won't be an instance of a
class it will literally be a separate
class which just has like on update on
render on in it that kind of those kind
of functions so the so that the actual
code for showing you know how to set up
batch rendering is as minimal as
possible and that way it's gonna be
really easy if you guys follow along
first of all if you don't have the
current code you can do that by
supporting this series on patreon.com
for slash the channel every single
episode the code is committed at is
committed as a separate commit to that
to a github page github.com slash like
Paterno's flash opengl to get access to
that you need to be a patron
it helps up all the series and also you
get access to every single episode
commit by commits which is really useful
so that we're gonna like continue on
from that code so if you want to follow
along without having to type everything
up or you haven't watched the other
episodes that's the best way to do it
but we're just gonna start refactoring
this code out into test classes so that
we actually can set up a bit of a test
framework and facilitate all that kind
of you know separate examples of each
OpenGL concept that we learn moving on
from this series let's jump into some
code enough talking and see what we can
do okay so looking through this
application class I mean it's pretty big
if I just run my code right now so that
we can see
where we actually left this thing on and
you can see that we basically just have
to kind of channel logos rendering that
was last episode where we talked about
rendering multiple things at once and we
have all this is a great example against
something that would be awesome to have
in a test but not something I just want
to have an hour made file because it
clutters everything up so let's start
thinking about how we want to make this
test framework the first thing I want to
do is inside this source folder I'm just
going to make a new item and family to
make a new folder first called tests and
then inside there I'm gonna make a file
called tests on page and this is just
gonna serve as the kind of base class I
guess for all the test stuff I'm also
going to put it into a namespace called
tests just so that we can kind of have
that isolated from the actual OpenGL API
and all that kind of stuff and then I'm
going to just call it class test and
we're gonna have a bunch of public stuff
not sure if we'll have private stuff but
basically we're gonna have a constructor
which I'll just leave blank like this a
virtual destructor yeah goes like that
and then I'm going to make some special
functions here so we'll probably just
have on update which ideally would run
at a fixed kind of framerate and maybe
even take in a delta time yeah and then
we'll also have a on render which is
kinda meant for rendering and then I'm
gonna actually make one more which is
going to be and on I am GUI random so
this is going to be where we're going to
draw our line gooey stuff so ideally
want to make this as simple as possible
so that in this function that we
override in our subclasses we can just
put any kind of iron glue rendering code
and it would have already called like
I'm going to begin and that kind of
stuff for us so we can really be as
minimal as possible in terms of like we
don't need to make a new window or
anything like that it'll already be all
set up for us from where this function
actually gets called so that's basically
the basis of this now the way I've set
it up isn't remember because because I
actually want the all these test classes
to kind of be initialized or created
when we enter the test and then destroy
it when we exit the test the actual kind
of setup code so the the
creation and destruction code will be in
the constructor and the destructor so
that way we can freely have like any
kind of stack variables that are kind of
tied to the lifetime of our class like
for example if we wanted to create a
vertex buffer we could just create that
as a stack variable like in our actual
class scope and that way we don't have
to worry about manual memory management
at all because as soon as that class
because I was scope which more that as
soon as that class gets deleted that
vertex buffer is on the stack will get
go out of scope and thus get destroyed
automatically so we don't have to worry
about that basically what I'm saying and
instead of having like uh nan in it or
on destroy function I'm just having
construction and destructor and that way
the lifetime of all of our objects in
the class is actually tied to the class
go okay so anyway that's basically what
we have here and now we can actually
start making a test so as an example
let's make that clear color test that I
talked about so I'm going to make a
header file which is just called test
clear color I'm going to start them with
the word test so that way they're nicely
kind of ordered we'll hit add and I'll
do the exact same thing for a CPP file
so I'll call it test clear color dot CPP
it's going to include our test click
Auto H and in the head file I'm going to
include just test of H so again
namespace test and then class test clear
color and it's gonna be probably don't
need to maybe I will call it test click
poly just because I want the classes
nicely named but it's pretty obvious
that it's a test anyway and then over
here we're going to basically overwrite
everything so we'll rub the constructor
we do have a sleepy file so I'm not
gonna implement anything here
constructor and destructor like this I
don't need to mark this as virtue or
anything like that because the base
class is and we're certainly not going
to be sending this class which is why
I'm not marking these methods as virtual
either so we'll have an off day for
adults time override on render
and all I'm going round up over I like
that okay cool looks pretty good to me
now I'm gonna pop over to my CBP file
make sure I get that namespace test in
them and then if I go back using visual
assist I can just right click on the
class and create the method
implementations which will just last the
trade all been really quickly in my CBP
file just like that okay so let's
actually set up this test and think
about what we need because we do need
some things the actual color needs to be
stored somehow so I'm going to store
this I'm just going to make it a float
array so I'll just call it floor and
color and I know I want four of them
like that now so four floats are gonna
be our player color is called play color
in the constructor here I'm going to
initialize that so clear color to
something like I guess which probably do
black but that's boring so I might just
make it like magenta or something so 1 0
actually let's make it like a nice kind
of balloon 0.24 red 0.34 green so fine
and blue and we'll there with one for
alpha ok cool so there's actually a tile
I set up inside on render I want to do
my jail call GL clear color which sets
that clear color to clear color zero one
two and three as you might expect just
like this and then we'll call gel clear
with the gel color buffer bit and I mean
for any kind of depth buffer stuff here
I will include jail slash blue to get
all the original stuff in in fact maybe
I can just include the renderer
program you need to include that now our
salsa directories and actually you know
I include directory so let's set that up
I'm right-clicking in properties over
here I'm just gonna add sauce as an
include directory you to my CFC +
general additional additional include
directories like that for configurations
no way would be just include render like
this and everything will be fine that
that's the kind of stuff that contains I
believe yeah that won't that miss Clewes
wouldn't
to include glue and also it should have
the jail cold mattress okay brilliant so
there we go
is that clear color rendering that's
pretty much it I mean I don't need to
destroy anything with the other thing we
actually allocated here was just an
array that is again on the stack so we
don't need to worry about destroying
that manually and everything else I
think is fine so let's collapse these we
don't need an update and on I'm gluing
render we'll set that up in a minute
because I actually do want to in fellow
just set that up now so if we go to if
we include I'm GUI just include I am do
a slash I am doing then we can just do I
am doing it color for some color edit
for or color picker for I know the
differences what is the difference
color edit the color and functions have
a little colored preview square
okay so color edit is probably well
beyond collated for and we'll just do
clear colors label and then we're just
passing that clear color pointer and
there we go
that's all we need to do really simple
stuff and now we should be able to see
how clear color and also edited and
that's my test you can see kind of what
I mean by setting up a test framework is
so easy to see kind of what happens in
the initialization the destruction and
then actually rendering it it's really
clean it keeps everything and isolated
and separate unless those tests
everything really easily the way that we
actually want to okay cool so now if we
go into application there's all this
stuff that I don't care about anymore so
what I'm actually going to do is just
remove this it is in version control so
I need to worry about you know losing
any code and not getting it back
therefore if I want it back I can always
get it back so let's just go over here
and remove all this code um I'm also
going to go into here and I'll drag this
comment on as well and basically should
remove everything okay so we don't know
we definitely wanna keep like the I'm
going actualization the render
initialization but everything else like
this stuff can just go away
we'll keep blending on as well and there
we go okay cool
so really simple now I'll get rid of all
these comments because it's pretty
obvious what this stuff does anyway and
now let's set up our test
so as an easy example just to test this
out I can include first of all I just
include our test tests slash test clear
color if I go down here I'm just going
to make a test clear color test text
namespace like that I could using the
namespace but I'm not going to at this
point we're going to render the actual
test that will do on update with delta x
0 for now because we don't have any of
that setup will do it on render and then
once we actually start the younggu
friend we're going to do a test online
do a render like that okay looks pretty
good to me let's just hit f5 and see
what happens okay so check this out we
have that really nice blue color here
we've got our IM gooey stuff I'm just oh
resize this a little bit you can see
that's that clay color that's what it's
set to I can adjust it just by doing
this I can also bring up a color picker
and actually change it to any color I
want and as you can see here it actually
changes the color background because
that's what our clear color is set to so
you can see how cool that is cool so
anyway that's the basis of how I want to
set up all this test framework stuff now
what I'm going to do next time in the
next episode is actually set up a menu
so that instead of opening a test
straightaway which we could also have
the ability of doing potentially Biron
command line argument or something but
in general instead of opening just a
cloak eye test or whatever straightaway
I actually want to open a menu in which
I can select from any number of tests
and then when I click on a test it
actually creates it and opens it and
then if I destroy or if I go back from
that menu so we'll have like a little
back button or a return button or
something like that and just an error if
we click that and we're in the clear
color test for example it should destroy
that like completely delete that
instance of that class and that object
and go back to our test menu where we
can pick something else
so that's the plan now what I want you
guys to do for homework you it goes I
mean guys it through the homework task
try and implement that yourselves go
ahead and make a test menu make more
than just one test I just made a click
test what you should do is go back
through all the episodes and see if you
can make a test for like textures or
just accord with a certain vertex color
which you can customize or maybe accord
with the uniform that you can customize
as well using I'm doing make all of
these tests add them to a test menu and
then share your solution in the comments
below or on discord comm so if you go to
Chernobyl comm such discord you can join
my discourse surfer there's an OpenGL no
there's a graphics channel where you can
talk about stuff like this and share
your solutions there and yeah just have
a go at doing that yourselves and then
I'll show you my solution next week or
whenever the next episode and look
coming out so anyway I hope you guys
enjoyed this video if you did hit that
like button you know you can help
support the series by going a patron up
on four slash the channel as always all
the source code is uploaded onto a
github repository which we get access to
if you support the series so definitely
check that out and also you'll get a
bunch of other cool rewards and as
always a huge thank you to all of my
lovely supporters who make this series
possible I'm going to prioritize this
series from now on over the C++ series
because we've covered a lot of stuff in
the c++ series and the opengl series is
kind of lacking so next week we're gonna
finish off this test stuff and then the
week after that or the episode after
that maybe I'll even do multiple
episodes a week who knows hopefully I'm
hoping we will move on to doing a batch
render and then 3d stuff eventually so
yeah I'm really excited for the future
of the series I hope you guys enjoyed
the video I'll see you next time goodbye
[Music]