Transforms | Game Engine series

Key Takeaways

hey what's up guys my name is a China welcome back to my game engine series so last time we talked about time steps and dental time and all the kind of timing things that we needed to talk about definitely check out that video if you haven't already and we actually are moving towards kind of a complete little minor kind of system that we have from making 2d renderable kind of objects and interaction and weld games I guess alright because what we have at the moment is we've got a camera system a little camera system we've got ways to kind of submit geometry for rendering we've got the ability to like respond to key presses and all of that kind of stuff and move like well not move objects yet but just move the actual camera and do all that fun stuff who are a proper kind of renderer flow right so the next step in kind of continuing on with this trend is how do we place objects in different places in our world right so at the moment we only have the ability to put all the objects at stuff like if the objects will be rendered according to their vertex positions right so we have like we're rendering a triangle where we're entering a square or a rectangle it's a square used to be a rectangle because of the projection matrix but now the square so we're entering all of them kind of at the origin on all really like it doesn't have to be the origin is whatever the vertex positions like say that's where it gets rendered but what I want to do and what you know we need to be able to do is actually say that I want to render this object with a particular transform right and that's actually that transform is something called like a model matrix essentially it's like a world matrix which describes like the position the rotation and the transfer sorry the position the rotation the scale so the transform of the actual entity in the 3d world that it's in right and that's primarily how objects get put into their respective places in the world right we have that like if we look at this Bunny for example right we have this kind of bunny this is our 3d model so the actual bunny is made up of various vertex positions and other vertex attributes right like normals you know texture coordinates that kind of stuff but all of these vertex positions such as relative to each other right they're not relative to where it is in the world you know I couldn't put the bunny here I could put the bunny here right however that's not gonna it's not gonna that's not gonna have any that shouldn't have any kind of effect on the actual vertex positions why because we kind of when we model the bunny we model it like at the origin maybe or just on top of the origin so it's like on a ground plane like that we build up all of it or all the vertices and that's kind of the bunny that we end up with right and then when we actually render it inside a 3d world we apply an additional transformation to those vertices which tells how computer we're in the world we want to actually render this bunny right that way we can use the same bunny model if we want to render something here or there right if we if we actually wanted to only render according to FedEx positions we'd have to modify the values the FedEx buff for the bunny or create two different bunny objects or models or two different bunny vertex buffers because we want we want one bunny here and one bunny here that's um what we want we want to render the exact same set of vertices however we actually want to transform that set of vertices by a certain amount right whether it be translation which is where it is in the world rotation which is how its kind of rotated or oriented and then scale so how kind of big or small it is right all of that is a transformation matrix and we need one of them for every single object that we really want to render and in the grand scheme of things most game engines use something called an AC as an inter component system or like some kind of for like form of composable game objects but basically we have kind of a set of components and they are composed together into like essentially a game object right so if we look at like an NC component system what that basically says is that everything is a component right and we have a certain data a set of Java research and then we have a bunch of systems associated with that as well that's eventually what hazel will have some form of ECS source or cg or something like that right but until that's the case because in that scenario then the transform will actually be a component that's probably like like it is in most engines mandated to be on all objects doesn't have to be because you can you know you think about it an NCO game object could be something that doesn't actually even get rendered and in that in that form it might not need to have it like a transform or anything like that but for everything that's get gets rendered will have a transform component which is where that data is stored we don't have that at the moment I'm going to put this bunny down I think but we don't have that at the moment so what we have instead is just this kind of hazel render a submit call that takes in a shader that takes in a vertex array that's what we're going to take in a transform so we're basically saying I want this mesh which has a material which is our shader at the moment and our vertex array which is our geometry at the moment they'll eventually be collapsed into just one mesh object we we want to submit that and we want to render it at a particular transform and of course transforms have to be per mesh right there have to be per object they can't be for the whole scene our cameras transform is usually for the whole scene right that's what we talked about in the cameras video but for actual meshes for 3d objects of a render we need a separate transform for each kind of object that's why it's kind of put into that section of the code anyway this is cool because we're going through my creating almost kind of low-level kind of stuff that eventually that's is gonna be so abstract that you guys love no idea how it's gonna work like I promise you like what's gonna happen is that Hazel's API will change so much I mean we're doing so much stuff in even C++ now that will never be done in C++ in the future we'll have a level editor it will serialize certain files those files will be read on startup that's how our objects will be created it'll be so like hard to understand how hazel works that are really I'm happy with the way that I'm kind of explaining all this and taking time to actually set this up in this kind of way even though it is somewhat temporary and I'm not obviously not running final engine code straight away because I would be basically impossible and really boring to do what I'm doing is I'm actually showing you guys how everything works and that's I think that's really cool because seeing an engine kind of work from this phase before you start like creating an ECS and doing all that stuff first of all it helps to understand why we even need an ICS and actually what the ECS in the end of the day at the end of day is going to do because it's really gonna do the same thing that we're doing here it's just gonna be an in a much more abstract and powerful way right muffled flexible way whereas this kind of just tied down a little bit better anyway let's jump in let's take a look at the transformation matrix and how we can actually render our triangle and a square at different transforms and one thing one other thing that I want to say is that even though it might appear that we're rendering 2d objects in this case I mean obviously our oldest rendering is kind of 3d and the theory behind all everything I'm explaining like you know meshes you know materials bird x-rays you know transforms all that stuff this is really applicable to a three to a 3d renderer if we build a 2d renderer we would do it differently right like we wouldn't have a material system for example whenever we really have a material system but we wouldn't be submitting geometry with shaders right for example we wouldn't do we just wouldn't be doing that because it all pretty much all the geometry would actually have a single shader right it's like it would be like our 2d material shader right and then also we wouldn't be you know just like a lot of the way that this stuff is written is specifically for 3d right like we wouldn't be it wouldn't be submitting a transform either so no sure there's no transforms none of that because what what actually happens is when you when your request to draw like a to be primitive like a square you know basically everything until you direct 2d rendering is going to come down to being like a quad when you actually do draw a quad in a 2d system you you'd actually batch that into like a big vertex buffer with other causes that you want to render so that you can do it all in one draw call with one shader right whereas with 3d kind of rendering you typically I mean you can batch things together obviously and you can try and sort things into a particular render order so that you kind of group things together so everything with this material should get around at the same time but in general you basically render every object with a separate transform and a separate material potentially right whereas in tune it's very different so this might look today but just keep in mind that this theory is all applicable to 3d and in fact when we do touch on specifically 2d rendering and hazel which we haven't done yet at that point in time that's what I'll kind of explain I guess more of the differences and also how it would do this in today before we jump to the code I want to give a huge thank you to all the patrons patron 4/2 Turner is where you can go to help support the series you'll get rewarded by like just getting videos early and also getting access to like group discussions in which we talk about the future hazel and all that stuff and also access to the hazel development ranch which is my kind of private developing branch for hazel in which I've basically done all of this stuff and more pbrn rain 3d rendering really cool stuff that's based like a full level editor there right there's a cold while your viewer and everything and you can even just plug in your own textures using UI and there's a lot of stuff you can do so definitely check that out and help support the series let's drop in and take a look at model matrices and transforms and all that stuff ok so as I mentioned we have this kind of big insane we have this kind of submit and then we have an end scene that's kind of the actual floor of our renderer so what we actually want to do now is upon submission we need to position our object in the world so what we're going to do is basically plug in some kind of transformation matrix as a third parameter into here so the way we'll do that is we'll go to submit and then inside my submission here I'm going to add a third parameter this is going to be constant um Matt for transform ok that's it it's just gonna be a transform matrix figure over here to submit we'll add that in ok and then what's gonna happen is very very simple just the same way that we kind of submit this or we upload this view projection matrix right we're gonna do the exact same thing every time we submit with the model matrix now here's the difference so over here I'm uploading the uniform matte 4 which is our V projection matrix into and 2 into this shader for every single submission whereas I don't actually need to be doing that I only need to really do that once per shader per scene right so that's kind of this does not need to be done every time it's done every time at the moment because we're gonna have any kind of global State and also we're using two different shaders now anyway and they do have to be updated but if you're kind of using a single shader or a single kind of material across all these things you can actually just upload that uniform at for once and then render all the objects as separate draw calls without having to update that but with this one we actually like with this model matrix-like right so I'll call it you underscore model matrix this actually does need to be I don't know like I call it model matrix transform might make more sense to be honest so I'm actually gonna call it transform I wasn't planning to but I just did what we're gonna do is submit this transform into here right so this needs to be done per object every time we submit we absolutely need to do that now in a renderer that doesn't render things immediately like this and actually does cue it up you'd probably copy this actual transformation matrix into like in 64 bytes you copy those 64 bytes into some kind of buffer that would basically kind of be like part of your render command because typically when you render again 3d objects right you want to actually render them at a transform that's normal that's how rendering works so if we go back to sandbox app and what we could do again is just by default you know if I go to the header file by default I'm just going to set this to GL m mat for one right and what this can do is just basically give us the identity matrix which means no transformation matrix right it's not it's gonna be it's gonna apply no transforms the same as multiplying with one right so that we don't have to necessarily submit a transform if we don't want to and that way like if I was to just launch this code right now as is without actually adding a transform it should render and we should get the same results before and I mean obviously I haven't even set up any of the actual uniform so that's probably gonna be useless doing this so let's go ahead and set that up now right so we have I'm scared of this so we have our P projection and then we're just gonna copy that and I'm gonna make that we're gonna have our you honest will transform right and so what we're gonna do is we're going to multiply boot projection by transform and then by our bed exposition right so it is adding that in and we'll do the same so I'll copy this and add that into our blue shader vertex source right so we have this obviously inside our vertex shader and so now we have the view projection matrix and the transformation matrix being multiplied together with the actual vertex position okay so that should now give us I mean we should test this right now with absolutely no transform and make sure that we have the same result as before but it was just kind of like the square and triangle in the kind of same position all right so if we do that yeah we've got that and then we can move the camera and we can rotate the camera and everything works in the same way so what I'll do now is I'll actually plug in a matrix so because I'm going to want to actually play around with this and not just have an boring old matrix in in here what I want to do is actually make the matrix over here so we have the camera position that's all great but I also want to have a little transform which I'll call square maybe transform all right which and this thing is actually going to be actually you know what I'm just going to make a Veck three instead called square position right and I think I can just by default set that over here to zero because we need to initialize it and then what I'll do is so left right up down that moves the camera right what I might do is just make the eye JKL keys because like a and Dee's already taken of rotation and I want to mess with that but what I want to do is I'm going to be basically copied as if statement and implemented for the left will be J right will be L I will be up and down will be K so the the ijkl case right I want to take those and make them actually move our square position so now we should be able to move the square which will be quite cool I think so we're gonna move it by so it's got camera move speed which is like fine but I think what I'll do is I'll copy that and I'll just make a variable called square moves paid and I'll just set it to like one we'll make it quite slow so we'll say square moves speed over here square move speed and of course we need to multiply it with Delta time as well and now we have square positions so now we're ready to make the matrix okay so what I'll do is I'll say jello mat for transform equals G LLB translate and then we can just literally put in our square position and that's it I mean should provide a matrix that we want to transform square position okay cool right and that should just work right now for translate we'll need um I think we we did this inside camera so let's just grab yeah we need this include to make that happen so we'll just paste that in there and now this should just work right so I can just render my square with out particular transform so let's go ahead and just run that and see what happens so now if we use the ijkl keys we should be able to actually move our square around which should be cool and you can see I can do that right and because it's moving separately from the triangle now if I move the camera it's gonna move both of them right it's gonna move them the kind of opposite way whereas this will just kind of move it like that so that's really really cool now here's what I can do this pretty cool as well I can actually rent a whole bunch of these so at the moment we're just rendering just one square and it's actually quite big but what I could do is actually use this to render some kind of tile based system right now obviously the examples I'm giving here I just kind of said that you understand how the transformation works not how you would render at our map because you clearly would not render like a whole tile map using kind of 3d rendering where you just you know have everything as a separate object with a separate material and do all that because that's very slow but just to give an example what you could do is have a little for loop that let's just say I just want to render like a bunch of these like five of these in a row right so what I'm gonna do is I'm gonna submit and I might just not render the the triangle for now so they're very big right now which is fine but they're quite big right I don't want them to be so big so what I'm actually gonna do is use my scale right I'm gonna make HLM I'm at full scale I'm gonna make a scale matrix right there's just going to basically and we'll start off with this because basically going to just scale down our our cube and make it like 0.1 right so it's gonna be 0.1 of the scale it'll used to be which is basically 10% as big right I'm making it a lot smaller so we've got my scale I've got my position right and my positions gonna be will say JM Dec 3 and then we'll just maybe we'll start it off so how big is this gonna be right if we look at what this is let's just work try and work this out so it's one and a half right so one and a half by one and a half is how big our our actual kind of want to make it one you know what let's modify this and let's make it one unit so basically the square right now is going to have a width and height of one unit so with that in mind this is going to make it zero point one units right so what I'll do is I'll set the position the x position to be I times point one if I do that what it's gonna do is it's gonna space everything out by point one that's not that great I'm gonna add point 1 1 right so that'll leave a little bit of a gap between each square I'll set this to zero and that to zero and then what I'll do is I'll construct my matrix so this transform I'll take down I'll put it here this is gonna be translation of this kind of position here right now I multiply that scale in as well okay so we multiply this with scale and then we provide it with transform so now what should happen is we should be submitting five different squares for rendering they're all gonna be blue and they're gonna be kind of horizontally spaced like going kind of from the origin really to the right and if we don't if they don't all fit into the screen which they probably should but if they don't and there should be a little smaller as well cause it's Kelvin down if they don't we can always move the camera into a position that will be better okay there we go so we've got five you can see that all the spaced apart and we can move just like that okay if we were to make it more exciting what we could do is actually move all this over and make a nested for loop where we go through x and y and let's just say we ran a recreative like 20 of these so all we have to do is move this this way change is 20 X so X is gonna be written like that y is gonna be written here in the Y position and that's that's like it right that's all we need to do if we hit f5 again wish if we're gonna render a grid of 20 by 20 which is quite big hopefully the performance will be ok because that is like 400 of these and yeah I mean the performance is fine so there we go right we can we see you see you can see that we've actually got at our grid and more specifically we're kind of testing the actual we're actually testing us being able to render objects with a different transform so what we're doing is we're submitting 20 different squares here and I can put a triangle here if I want and render that on top of everything like we were doing before so if I hit f5 and it can parse our code then we have our little triangle we can move the camera and we used to be able to remove the we used to be able to remove the actual squares but obviously I took that away ok so let's clean up this code a little bit I'm just gonna get rid of the square move speed and all that because that was something that we use just for fun and I'll probably end up believing this kind of grid here so obviously this is scale is something that you don't need to recalculate all the time so you could just make it as static if you wanted to and then what does you know have it as a member and then really the other thing that we need to to recalculate is the position but because the position changes you do need to recalculate this transformation matrix every time but that's that's normal ok that's pretty much it I hope that makes sense now it would be really cool if we could actually set a different color for each of these tiles right and then we can actually start basically having a bit of a tile map even though this isn't really 2d rendering as I'm saying this is still kind of 3d rendering it's not just 3d rendering because it's OpenGL and OpenGL is everything in 3d it's not that's not what I mean what I mean is the the technique were using to actually render this is kind of on a per object basis so clearly that's that's kind of like a 3d way of doing things now what we can do next time and what I probably will do next time is talk about uniforms and materials so we can set up a very very very basic material system really easily right and I might actually even have next video be like a theory video about how much hero systems work and then we can implement a very basic one which is all we'll need for now just to kind of get a little bit more flexibility and then if I do that like basically well you can say that we're moving hazel into an area where it could be used to make games it could actually be somewhat usable to do things like that now obviously we don't have like textures or anything like that that's something I really want to do as well textures but yeah like it's kind of I don't know I feel like it's it's cool to kind of actually have something to show and have something that's actually usable pretty quick because you can see that we've got like a bit of an edge and going on here right we're able to do all of this stuff without touching OpenGL or anything like that it all kind of just works we can submit stuff a rendering and that's all pretty exciting so let me know what you think about that it's probably I do want to add in add in at least some kind of way to set uniforms properly and also what we end up dealing with textures soon and then after that I think we might move into 3d and do meshes unless people specifically really want me to do like a good fast blazing fast to do a 2d renderer first because if you do it then I might do that anyway hope you guys enjoyed this video if you did you can hit the like button this is kind of more of a fun video where we actually played around with some stuff as well as added in transforms you can see how easy it is to just add in the model matrix and transform so that we can actually render objects in different positions you can have suppose the series back on full session that show no huge thank you as always to all the patrons remember you can support the series there and get the next video right now next time I just say but so many things we can explore like this is becoming difficult for me to play and I really want to do 2d textures I really want to do a very basic materials just so that we can set uniforms and textures and stuff like that properly and then it's gonna fork off into either a blazing fast 2d renderer and like doing a 2d renderer properly basically or kind of just continuing on with with 3d in which case we'll probably make like this where where do we even start probably we'll probably start with meshes right so we want meshes we want to be able to load 3d models and and process them you know and actually apply materials to them and render them probably more like a 3d camera and that's just a huge kind of thing of its own as well Wow let me know your thoughts in the comment section below because this series is up to you guys I'm making it for you and I want to do whatever you guys want I'll see you next time goodbye [Music]