ImGui in OpenGL

hey what's up guys my name is Jenna welcome back to my OpenGL series so today's going to be a pretty cool and fun episode I think we're gonna be integrating something called I am GUI I am G Y M GUI people say it differently I say I am GUI but basically what I am doing is is a GUI library kind of thing that we can use in OpenGL and DirectX and any kind of rendering API it's pretty much IP I independent it's a way for us to just draw UI on the screen and by you I mean things like buttons text fields color Pickers just information windows stuff like that it's really really useful for debugging purposes and it's even useful if you want to make some kind of application quickly in kind of a real-time rendering setting so like with graphics and so maybe like if we were making a game engine and we want to get a level editor up and running without having to actually make a Windows application using QT or WPF or anything like that you can even just make it using IM GUI really quickly and it would just run like a game run like a real-time application which is really cool so link time GUI will be in this in the description below the idea for today's episode is just to basically integrate it into our existing opengl code base the reason we're doing this is because going forward it's gonna be really really useful for us to have a UI kind of that we can just spin up really quickly for kind of debugging purposes so for a it's gonna be really easy for me to just bring up values on the screen that we can see and edit and then see that how that effects our actual graphics but also for kind of debugging we want graphs if we want framerate if we want kind of buttons that we can click the trigger certain things it's really easy to kind of do all that with with a library like I'm GUI and the same cells having to write our own UI library which to be honest can take like really long time so anyway without further ado let's just go in and take a look at what we've got so if we can just run our code to see where we were at last time you can see we had this channel logo and we had a Model View projection matrix that we made consisting of a projection matrix of view matrix and model matrix as always all this code is available on github if you're a patron so check out Petra non compos - the Cherno if you're not and sign up to get all this code individually per episode that's what we're gonna be starting from the kind of Model View projection episode all that car is gonna be the basis for this entire episode okay the first thing we're going to do is get I'm dewy so if you check out the link in the description or just Google I'm going I'm sure you'll find it if we go to the releases page here I'm just going to download the source code for version 1.6 it was released twelve days ago at the time making this video so I'm just gonna get the zip archive of all the source code for this version of I'm going once I've got that if I open that you'll see we have I'm going 1.6 now there are a few things here that we care about we don't care about all this like we never really need all the examples you can see there's everything here from Apple to DirectX a bunch of DirectX versions old-school kind of OpenGL more modern OpenGL in Vulcan and STL and there's a lot of different things we don't care about a lot of these what we do care about is oh the OpenGL 3 example because that one happens to be using gel FW which is what we're using and that's gonna just make it really really easy for us integrated quickly and the other thing we care about is of course the actual I'm doing so from I'm going what we actually need is all this stuff basically so if I copy all of these kind of specifically and header files that we have here like that so that's oldham if I copy them I'm going to go ahead and open my vendor folder and then from here I'm just gonna make a folder called hime GUI and then just paste in all my code into there so the other thing that I wanted was that J love W example so if I go back to to this zip file and into examples and where is Jill does OpenGL 3 I'm just gonna grab these three now we don't really need main I'll copy it out anyway we didn't want it or anything but it is a good kind of example that we can just use so if I go back here I'll paste all this stuff in main again we're going to delete and we probably just want including our project but it's still useful to have there for reference okay cool so that's all we need fine get it's really really easy to set up so go back to Venda I'm just gonna hit this refresh button up here at the top and I'm going to basically include everything from here I'm just gonna exclude that one maybe I'll see BB file because we do not want that so exclude from project but again we'll keep it around here for reference okay so to set this up if we take a look at this gfw example here one thing that it does is it actually uses GL 3w instead of glue we're just gonna change that so we'll get rid of this comment and we'll change this to be GW and guess all changes comment here as well that's pretty much it if I hit ctrl f7 this should just compile you can see it does so let's try compiling the whole project now that we've included all these I'm GUI files perfectly everything works fine and as you can see there we go no errors let me just drag this out but wind over here now Aris everything is fine beautiful so now we just need to integrate it into our application so to do that a really easy way to do that is just to take a look at this main dos apk file that we excluded because that basically has an example so really all we need to do here is we need to create the context farm GUI we need to call this jail of w3 in it that function is found inside this chill kill jail Toby free example that they have here and you can see it registers all these kind of key bindings it takes care of that for for us you can see that all we have to do is pass in the window pointer into an it and it will just set up all the input bindings so it's really really cool style colors dark sure why not and then it's got some examples on actually use it just as for our run loop we just need to start a new frame and at the end we just need to basically end the frame using angular render and then rendered raw data just for gow3 and that's pretty much it football to draw done so that it actually renders it using OpenGL and at the end we can do shutdown and that's pretty much it so if I just dock this side-by-side let's go ahead and start copying some of this code I'm gonna zoom out a little bit hopefully you guys can still see everything this will just be for a bit while I copy this stuff but basically let's grab that create context that we have here I'm put it at the top so right before we do our loop here maybe after we create the lander I'll say Oh Paul I'm going create context now we need to include this because it's in our vendor folder we should just be able to do include I am GUI slash I'm GUI H and we'll also have to include that jail so we did three example sorry this one here great ok so we create the context we're then going to initialize this so we'll just pass that in you can see I mean it's even called this time simple winter in both examples we really literally don't have to change anything we'll go ahead and set up that style and set it to dark and that's it for the initialization let's go ahead and start a new frame now this doesn't have to be if this is has something to do with setting a new frame in terms of like a new gel W frame it's just fine GUI so we can just put this here doesn't matter I'll put it off to the renderer clear you could put it anywhere just make sure you put it like in between your your I'm good code so before you start any I'm giving code for this frame you want to have the new frame function call and then at the end there's I'm going render and then that kind of draw our render draw down a thing so I'll do that right with what we swap the buffers and then finally we have a shutdown so there's a few lines for that and that's right before gel Toby terminate so we'll put it right there that is yet okay so now let's try and render a window this main example also has that which is beautiful you can see if there's a bit of a window over here let's copy that I'll put it after I might put it after we render everything so maybe right over here and then there are a few variables at the top here that we want to also copy let's just put that here and let's close man I'll put the text size back up let's hit f5 and see what we get okay so check the how that was really easy and you can see now what we have is there's a window that we can kind of move around and everything's everything's pretty beautiful there so we can change the color I can even click over here and adjust the color of everything now you'll notice that it is a bit offset from my mouse pointer and that's actually this laptop for some reason windows dpi scaling or something I don't know exactly what's going on but the mouse pointer is just offset for a lot of applications if I even open something like mischief up which is a paint roaring app you can see that it draws way offset from my cursor when I'm at the top of the screen and then if I kind of go down it kind of matches I don't know how well you guys can see that but if anyone knows what on earth is going on here it's been really frustrating it's just this laptop it's not the only kind of high resolution 4k whatever I've got Eva so I'm not sure why but it's just this one it seems to be completely wrong so don't worry about if you're like you I'm do we should be completely fine but you can see that yeah if you even got like color pickers and this is just an example of kind of what you have here and then all of these settings in like yeah we can drag this around we can resize this window hope we like I just need to find my mouse pointer this is so annoying that ago so yeah that's why I'm GUI there's a great example of how it works now let's actually do something useful with it in our code so I'll get rid of all these all this kind of example stuff that we have here in this whole example window we don't need one thing I will keep is this I guess is a lot of large because that'll be useful I don't get rid of everything and I guess we'll keep this frame right thing because it's kind of useful okay so now one thing I want to do here is we've just talked about model matrices and how we can use them to translate our actual geometry let's go ahead and make this kind of model matrix something that we can actually edit live so to do that I'm gonna copy basically these two lines and paste them over here where we actually do our uniform submission so we need the model matrix and we need the MVP and then what I'll do with that is I'll just get rid of the model matrix from here and the MVP from here I'll cut this MVP line this actual uniform setting and I will put it over here with the other uniforms so now we're basically just recalculating the model matrix and the MVP every frame which is totally fine so now let's add something time to it that lets us actually kind of modify this so right now it's just the GLM back three and that's something that we're passing into this translate ceiling function I'll cut that and I'll put up with that outside of our run loop so maybe over here and I'll call this translation will still start it at 200 200 and zero now if I go back here I'll paste in translation and then into I am gooey I'll use something called a slide foot three probably just use a flight to it because we just care abouts and why but we'll use this five foot three and I'll pass in the memory address of translation X now I'm not really sure this takes a you can see this takes a flirt array I'm not really sure how to get that out of GLM though if we look at that if we look at what about three is that's for lower P ok hi P Dec 3 it's just a type def on Feb 3 you can see that the thing that's using is just a union of T X Y Zed T is fluid so we have XY said it's pretty much how you expect a vector to be laid out the reason it's a union of this of course just so that we can basically address it by the XYZ or RGB or STP whatever kind of variable names we want to use and they of course mean the same thing but I can't really see anything I was looking through this a bit earlier that returns an actual array like a pointer to everything you can see this is for density so I'm not exactly sure maybe there is a way but right now I'm just gonna pass in the memory address of the first variable which is X or R whatever you want to here so I'll use X of course and that's just gonna give it the memory address of X and then of course the next one in memories nobody wins that so everything will work as expected because the memory layout is the same as a flood array ok so anyway but the bouncer will set or maybe zero and nine 6960 because we have our projection matrix I believe set to be up to 960 and that's really all we have to do I mean of course where this is this is basically setting up a three-component slider that we can use to modify this translation vector which is being passed into model and being used for our MVP matrix which we passed into our shader so everything is kind of linking up if we hit up if we hit f5 to run our code here you can see what we get is this and if I move this window out to the side a little bit what I can do is change the this value here this is the X position this is the Y position and you can see that it moves everything right and if I put everything to 0-0 you can see it's not really quite the bottom here and that would be because I think in our vertex buffer yeah you can see we don't actually hit the bottom anywhere we're kind of at 100 by 200 so that is why that's not in the very kind of bottom left anyway yeah that's a great example of why I'm going is really useful I just let's look quickly bring up stuff like this that we can control well while our actual code is running so to keep recompiling and it's really gonna help me to show some of these things that we cover in this series in a bit more detail now unfortunately I hate this mouse offset thing maybe I can actually think about solving that for next time but I hope you guys enjoyed this video if you did you can hit the like button you can also help support the series by going patreon a cupful / the chair as always like every the code for every video goes up on github and if you're a patron you can access that so be sure to take a look at this code if you want to make sure you didn't make any errors or anything like that it was really really simple to integrate I'm gooey I mean you saw how easy it was really no big deal if I was kind of running my own engine I probably may have rewritten they're kind of shell if Delta you think to also include all the API it's like DirectX or whatever I supported so this series is obviously just about OpenGL I just thought I'd throw I'm gooey in because it's gonna help me explain a lot of OpenGL concepts a lot easier because I can kind of manipulate things live but anyway next time what are we gonna move on to next time that is so much to cover you'll have to just wait until next time you see what ends up happening I'll see you then good bye [Music]

Channel: The Cherno

Views: 120,943

Keywords: thecherno, thechernoproject, cherno, c++, programming, gamedev, game development, learn c++, c++ tutorial, imgui, imgui opengl, imgui setup, imgui tutorial

Id: nVaQuNXueFw

Length: 14min 36sec (876 seconds)

Published: Sun Apr 22 2018