2D Renderer Textures | Game Engine series

hey what's up guys my name is the chana welcome back to my game engine series so last time we talked about transforms we added them to our 2d renderer check out that video if you haven't already and now that we can actually position these things anywhere in our screen Annina inside our kind of level and also set random sizes to it the next logical step is to take a look at textures and how we can actually render these as texture quads because at the moment all we can do really is set a different color for them and whilst that's kind of cool in here you can have this little game with no textures and just colors and you can still do a lot without obviously in kind of the real world we want to extend this engine so that it supports textures especially since the engine does support textures is just the renderer doesn't yet so what we'll do today is kind of discuss textures how we can set them up for our renderer and yeah we'll just add that in and make it work but first I want to give a huge thank you of course to all the patrons that made this series possible page when icon for saturated Shona is the best place to help support this series and my channel and everything that I'm doing here if you guys aren't interested in this 2d stuff you want to kind of progress to 3d and take a look at that I do have like a full 3d renderer going on in that hazel developer brass with like a viewer layer so that you can control like textures models all that fun stuff and in fact I do want to make more videos in the future regarding specifically what I'm doing to that development branch just so that you guys get a little bit more insight into that on patreon as well have also got exclusive videos just detailing where this series is kind of going what I'm doing what's plan for the next episodes I also show stuff from the Hazel's development branch such as multi-threading and all of that stuff that I'm currently working on as exclusive videos so definitely check that out if you're interested and help support this series okay so textures where shall we begin with that so this was the current set up that we left off in the last episode we can now position these which is a lovely what I'm gonna do now is extend a drop quad if we look at this function extent draw quad essentially do not just take in a color but also take the NA texture and that's pretty easy to do I'll duplicate both of these functions instead of color will simply take you in Texas this will be a comp rev texture too deep and then we'll just have texture over here will include texture and then I'm gonna of course copy this and replace it with this and that's pretty much it as far as the functions go same exact functions to your 3d position and then we have our texture here what I'll do is copy these and then come over here into the CBP file paste them in and just implement these functions like this also grab this render rotary namespace of course pull that in and get rid of the static keyword okay cool so we have these functions now similarly how we did with this draw quad our kind of 2d or our back to draw quad will actually call the vector a drop quad so what we'll do is initialize that with zero and then just pass in the texture there okay and now we have this this is what we're gonna be working with now initially I'm gonna copy and paste everything that drawcord actually has because that's pretty much what we need to deal with except instead of us setting a float for color we're actually going to set a texture now this is also where this becomes a little bit interesting and you might want to do it differently it's useful I will say and in fact some people like doing this you can actually have both so you can have a color and a texture and what happens is they get multiplied together inside your fragment shader so what that means is that you can basically set the color to white if you just want the texture normally but if you want to like darken the texture like faded out or something like that you know so you can kind of fade it in over time you can just have you know that white color and then it maybe set its alpha accordingly so you can have like the Alpha animate from 0 to 1 and thus it'll kind of fade in we can have it fade from black if you animate the color from like you know 0 all channels all the way to 1 on all channels or you can tint it red by having more in the red channel that you guys kind of get the point there's a lot you can actually do here if that's the direction you want to go in so I'm probably gonna have a function like that in the future where you could probably have both a texture and a color tint applied to it that's also totally reasonable it's also like a nothing that you could do future to extend this is you could actually have a class or a struct that represents actually renderable like a quad so in other words we don't have any kind of data structures right what we're doing right now is we're simply every time we want to draw a quad we have to specify the position the size of the texture you know the color that stuff that's all kind of just parameterised that's what that's what gets fed into the actual renderer to D functions but what you might want to do is actually create a renderable 2d or something like that or a quad struct or class inside your actual engine code base and then what you can do is if you want to create that and handle that kind of on the game side you can be like okay well I've got my quad and then if I need to like set its position or whatever I just have to set the position inside the struct I can set the color I can set the texture I can do whatever I want with that and then when it comes to render I just passed the renderer of the quad and because it's of course and knowing type to the renderer it just gets it and it gets all the information out this is a different way of organizing things you can do that in practice I I don't think I like doing that the reason is that the reason is that I think that having like too many types we'll say in the renderer and dealing all that stuff just makes things unnecessarily complicated there's nothing at all from stopping there's nothing at all to stopping the game like side of things from actually creating a quad struct so if you want you know inside sandbox 2d or inside your game you can create a quad struct or a quad class or whatever or a rectangle class that has all of that stuff in it like there's no reason not to do that if that's the way that you want to go and then when it comes time to actually render this you just you know access all of the different members so quad opposition quad sighs what texture whatever right or if you don't want to do that you can just write another kind of function if you really want to still inside your game layer that's just like you know draw quad and then that will take in a quarter and then that will call render a 3d draw cord with kind of you know quad position quad dot size etc right so you can do it that way me kind of looking at the I don't want to I don't really want to introduce my own kind of renderable to a quad kind of class inside the actual renderer I want to keep it simple and just have it parameterised like this you know I have done that in the past with other engines and projects that I've worked on I don't really see a reason off the top of my head right now to do this I haven't really thought about it much longer than this cameras been rolling further so you know maybe I'll change my mind in the future who knows especially if someone gives me a good argument but yeah right right now I just feel like position size texture keep it nice and simple Jordan have like a bunch of types because then that becomes a little bit more complicated right you suddenly have to create a little quad struct instance whenever you want to make something and that just makes the code a little bit more bloated which is something that I like to avoid um anyway color tinting all of this kind of stuff yeah well we'll take a look at that potential it's not really particularly hard to do and also kind of create some cool effects without much work so we might take a look at that but first let's just get those textures in and implemented so we'll get rid of color for now and see how we can just render a texture alright so coming back into here I'm just gonna get rid of color what we want to do basically is bind that extra silk it will still keep the transform and then we'll just do texture bind here with the arrow of course and that's pretty much it right so if we look at the shader that we want to be using it is basically identical to the flat color shader right the only difference is that the vertex shader is identical the only difference here is that it well it's almost identical it has a texture coordinate which is passes to the fragment shader and then we sample from a texture of course instead of just having that color there so that's kind of I guess what we're dealing with no we should probably get rid of all these as well from 3d render we haven't looked at that yet anyway maybe I'll let you guys do that by a pull requests so basically that's it right the only kind of thing that we need to worry about is this you texture you know home this is something that absolutely needs to be set somewhere so that's pretty easy to do there or we also have to load the obviously so what I'll do is we have our flat color shader I'm gonna copy that and I'm gonna add the extra shadow we'll have that happen over here so sdata texture shader and then this will be texture dot GLSL now we need to obviously set that uniform so we all have to extend the shader API a little bit as well so we'll bind an humble do a set int and then this will be you on score texture we'll set that to zero so that's basically saying that the texture slot that that sample is going to be sampling from will be texture slot zero which is kind of our default slot you can see that if we bind this sorry for mine the texture and we don't give it a slot that default slot is zero so that is why we're setting 0 over here all right set int obviously doesn't exist let's make it exist so we'll have a stats the insert function which just takes in an int value over here I'll quickly grab this and go over to OpenGL shader and implement it so we have F of what second override I'll copy this part of it and then go back to our CPP file we have set by three I will make a set int function and then that will just call upload uniform int name and die okay cool so there we go we've got that now back inside our render hid that should be it so now what happens is well before what we were doing was of course binding this color shader and setting the view projection we have to do that now for both so if we come down over here in to begin scene we also need to have this texture shader and then set its view projection right and then once we've done that over here what we bind Mikola shader and we do the rendering instead of binding it here we find the texture shader instead okay and then we said of course the texture shaders mat for that's it right so we should now be able to render textured quads really simple stuff so what we'll do is we'll come over here I think the sandbox app had the original textures that we tried out so we have like the kernel ogre and just a normal alpha texture let's just go with the normal kind of oil and I call it alpha Tetris a checkerboard texture if we go where was it we loaded it somewhere here probably there it is I'll just copy this that's not our checkerboard texture I'll make a hazel raft hazel texture texture today em pulls checkerboard texture and then inside the CPP file when we inside out on attach layer while we're doing absolutely nothing yet we'll do that checkerboard texture what's going on here that looks fine and then we'll set that equal to texture 2d create okay it looks pretty good to me and then coming down over here what I'll do is I will pull draw quad let's just well okay for the time being I'm gonna just render this right in the middle well I guess we should have a little bit of an offset just to test with that even works maybe I'll push it up a little bit I'll have it as point 525 and then of course instead of color I will have this checkerboard texture which it still thinks is a low case so let's just compile this box I think it's very confused as to what's going on and of course a compulsively it's just Visual Studio B weird as usual um yeah let's just run this program hopefully we get our check about texture being drawn okay cool so we just get a great flat color now I know exactly why does this happen it doesn't take too long to work out especially reflecting on how everything else is drawn but I'm gonna show you guys my kind of debug process for something like this so whenever I get a textured roaring it's clearly bound this is not black meaning the texture slot Chloe has data also this gray is probably the exact grey that we actually have in our checkerboard texture if I go back over here let's just stop this and go into our textures look a checkerboard so that gray that you saw rendering there is probably this great here so clearly something's happening it's actually if we go over here LS curative properties it's probably this pixel is being rendered here so clearly something's going on well the first thing I'm suspicious of immediately is the texture coordinates easy to check that out I'm gonna go and instead of outputting the texture I'm just gonna output the texture coordinates so I'll set color equal to the vet for the text core so I'm sending them for the RG for the red and green channels and then I'll have the earth of the blue and then one for the Alpha so let's see what those texture coordinates are set to and of course as I thought the texture coordinates are wrong they just flat read whereas of course they should be a gradient going from zero to one so we should see a gradient from black to red along the x-axis on the bottom here and from black to green on the y-axis and of course somewhere here we'll have like a mix and yellow and stuff like that so that's not what we're seeing which means the texture coordinates are wrong why the texture coordinates wrong well if we go into render A to D then you can see that of course we're not actually setting any types of waters at all this this kind of vertex buffer does does not have texture coordinates it's just got texture positions so we need to set those off so this bottom-left becomes zero zero as far as - corners go this is the right side of the course that becomes one and zero that is the top right I believe so that's one one and then of course the what is that that's the top left that's zero and then one alright cool so there we go we have our technical ordinance now we need to add them to the vertex buffer layout which is really simple we're just API of course we just do float - and then a text cord just gonna be anything really okay and then that's it I think that we have size of square vertices here so we should just see and in fact this was already sized appropriately for those texture coordinates because I think I copied it from sandbox app everything looks good now if we run this we should see those texture coordinates being visualized because that's where we left our shader all right and as you can see that's exactly what I was talking about we have black to red black to gray to black to yellow basically you know all that axes here so these texture coordinates are working correctly so now if we take a look at our shader and we change it back to the what it was before like this then we should see I'll check about texture hopefully being rented and as you can see it is there it is okay cool so now what I'll do just to make this a little bit more interesting I'm gonna scale it up a ton so that it kind of acts like a background so what I'll do here is basically well I'll keep the position like this still say zero zero but in this background I'm gonna just scale it up so I'll make it like well let's just make this like 10 to begin with because of course we can zoom out a camera so this is not gonna be like a perfect background or anything like that I just want to make it bigger really that's what I'm doing if I was actually trying to set this as a background I probably do it differently but this should basically give us that same effect all right cool so there we have it it's huge we can't see anything behind it at all that's where we get to test out our other parameter now if I did kind of draw her first I probably see if last as an it would be behind everything but I don't want to do that I still wanted to or at last but I just want to check this out so I'll set my I'll push this back so I'll set the Z coordinate here to zero one which should push it back and thus it should be behind everything else let's test that out and of course we get nothing because that's pretty typical the reason that probably happens is will happen in this case is because we probably aren't even doing any kind of depth testing let me take a look at what's going on inside maybe OpenGL context or I think more likely this stuff would be inside renderer dot CPP so we do run a command in Myint registry in it ready for many of what is that to render api yet ok so inside there okay we've been able to blend so we're gonna enable some other things we're gonna enable something called GL depth test so what this does is basically enables depth testing so that you will actually test whether or not a given pixel is supposed to be behind a pixel or in front and if it's in front it'll write into the color buffer if it's not in front then by default using the default depth testing function it will just discard it so it's important that we're also clearing that depth buffer which we are and now that we've been able dit we should hopefully see everything else our blue and red quads rendering on top of our checkerboard background but of course we don't which means there are some other pieces to this puzzle which I'm not seeing so let's go back to render 2d and see what's going on okay so actually this should be a negative 0.1 because I've been Jail does use a right-handed coordinate system which now that I'm actually visualizing it does mean that negative values go yep there we go negative values actually come out of the screen so that's why that is the case so coordinate systems like right-handed coordinate systems left-handed coordinate systems that kind of stuff we should probably talk about in the future make a note of that because it's not something that I even considered it's easy to kind of forget but it's super important of course so here we have it we've got our checkerboard background we've got this rendered being rendered here which looks pretty cool you can see that the checkerboard even those being blown up quite a lot is super sharp that's because we're using nearest filtering so yeah that's that's pretty good the other thing that we could do that we now that we've kind of blown up blowing this up to such a large scale is actually have some fun with the scale of the texture itself so in other words what's happening right now is that everything's like the texture cornice remaining between 0 & 1 which is fine but it means that the texture gets scaled up the texture becomes larger what we actually could do is multiply these texture coordinates by like 10 for example I'll just do that in the fragment shader just to make this easier and then you can see what that does is it makes solder all the squares in the checkerboard texture a lot smaller we actually get like a higher resolution texture and they're weighted that and the reason that that works is because our rapping word which I'm actually surprised that just worked it looks like everything set up correctly we got nearest filtering by default and rap by default as well if a good OpenGL texture we're not setting our rapping motor at all but you can see that our magnification filter here is Kjell nearest and the other parameter that we're setting which is an even a pound you know is something called texture rap SMT which basically defines how that texture actually gets rap so what happens if we exceed that 0 to 1 texture coordinate system so by default we've got it set to repeat I think that's what I've been GL sets the two if you don't set it all so SMT is what we should have here but if we were to do something like GL clamp through edge or something like that then what would happen instead is instead of repeating that texture instead of tiling it essentially we would just basically repeat that edge pixel infinitely so you can see that what happens here is we have our kind of original texture but then the very last pixel here which is that edge pixel that just gets repeated all the way across so that's obviously not what we want by default we do want that kind of well for this scenario we definitely want repeat because that means that it's child and that's kind of what we would expect let's just watch this again and see what we get all right cool there we go so that's kind of that's nice to have obviously right now we're just hot coding it in the shader which isn't good because it means every texture will be kind of tiled ten times which isn't exactly what we want but then the other thing that I was talking about was adding a color which you can also do really easily if I just basically multiply these with a color so for example I want to tint it red I won't change the red Channel at all but then like the other two channels for example I will reduce and I'll keep the Alpha at one point zero like this then what I'll actually get here is a slightly red tinted checkerboard texture and you can see it here so there's a number of cool things you can do this tiling kind of factor here could be added as a uniform and circulate this color so if you want to kind of experiment with that stuff until I make that next episode then go ahead and do that it's a great learning exercise to kind of make this a little bit more flexible a little bit more powerful and I hope you guys enjoyed this video if you did please hit that like button don't forget to help support the series on patreon of course because it would not be here without all those generous people supporting this next time I think we'll continue on without to the render of a number of exciting things to talk about which I'm not going to reveal just yet I will see you guys next time goodbye [Music]

Channel: The Cherno

Views: 10,864

Keywords: thecherno, thechernoproject, cherno, c++, programming, gamedev, game development, learn c++, c++ tutorial, game engine, how to make a game engine, game engine series, textures, tiling, texture coordinates, texture coords

Id: mW8eW3pLtmk

Length: 21min 34sec (1294 seconds)

Published: Thu Oct 31 2019