Setting up a Test Framework for OpenGL

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]

Channel: The Cherno

Views: 29,347

Keywords: thecherno, thechernoproject, cherno, c++, programming, gamedev, game development, learn c++, c++ tutorial, opengl, test, framework, test framework

Id: A_hS4_r5KcA

Length: 16min 51sec (1011 seconds)

Published: Sun Jun 03 2018