Batch Rendering Textures (+ Debugging!) // Game Engine series

hey what's up guys my name is trying to welcome back to my game engine series so last time we took a look at converting our 2d renderer into a batch renderer basically something that would be able to batch together many quads into as as little drop-off as possible and in this case into one drop oh check out that video if you haven't already that was kind of the beginning of that and today we're going to be continuing on with that and adding textures to that batch renderer so let's talk a little bit about textures how do textures work in a bash renderer well I actually have a video on that topic check it out if you haven't already I made an entire series on bash rendering that covers all the stuff in detail and we kind of implemented just OpenGL my game engines nothing like that so it's super simple make sure that you check out that series so that you're familiar with how a batch render works and in fact I also have a video of me writing a batch renderer in an hour so check that out as well because that's like a complete batch renderer in an hour you can look at all that stuff there and see how everything works and that way we don't have to waste time here talking about stuff like that but anyway textures what are the kind of challenges when it comes to textures in a batch render well there are two considerations that I think are important first of all how many textures are you going to allow because we can have basically as many causes we want because we're basically just limited by how big our vertex buffer or index buffer can be now we've elected here to have 10,000 max quads per draw pool that's a fine number to start with you can easily increase that to a hundred thousand maybe even to a million depending on what your GPU is going to actually define your maximum vertex buffer size as and all of that kind of stuff there however 10,000 is fine for now but you have to think about what other limiting factors go into how many quads you can actually bash together in a draw call and textures is a huge limitation because you cannot have 10,000 different textures bound for rendering in a single draw it just cannot be done what you need to do instead is look at what your maximum limit is on your GPU so for how many textures you can have bound at once so this is something called like a texture slot limit essentially how many how many textures can you have bound at once into as many slots as your GPU driver actually with and then after querying the driver you can kind of see how many textures you have but now this this other thing called by analysts textures and there's a few other kind of driver extensions that kind of let you get around this limit but we're not really going to talk about that today because support on that can be flaky and we're trying to make this Feli like standard by the book so at least for now we're not gonna add any kind of experimental stuff so at this point in time basically what I'm saying is we have a maximum texture slot count meaning that our GPU can only bind X amount of textures at once now for those of you unfamiliar with how this binding works because I think we've pretty much been only but only binding one texture like at any one time so far your GPU has many different texture slots for binding you don't just have to bind one texture once and then rebind another texture when you do that it actually goes into slot zero that's like the first texture slot now typically a desktop GPU should have at least like 32 texture slots which means that you have index 0 through 31 you can bind your texture anywhere there and that index that you bind that texture into that is actually what the sampler gets set to in the shader so in open G in OpenGL in jello cell we have something called a sampler 2d which is like a 2d texture sampler we set that to an integer using a shader uniform uniform one eye so an integer uniform and that what the integer that we set there is the texture slot that we're going to be sampling from and the actual texture bound through that slot we set that before we draw so in other words I can just basically say that this sampler called u underscore texture just you want to score texture we can set that to an integer value of 5 and then before I draw I can bind any texture I want to slot number 5 or as OpenGL calls a texture unit 5 and then obviously if I sample from that you underscore texture uniform sampler in the shader I will get the data I will be sampling the texture that I bound to slot 5 that's how textures weapon OpenGL it is different than other api's as we will see in the future hopefully in this series of we expand with like volcano DirectX and stuff like that but that's how it does how it works in OpenGL so what we need to do is we need to find out what the maximum texture slot is now we're not going to do that today because I'm probably gonna be going to take a look at like GP capabilities in like a different video because there's a whole list of things we want to be able to query our GPU that were running hazel on to see you know what level of anti-aliasing can we support what about anisotropic filtering what about like you know our maximum texture size what about like the maximum textures loss there's all these different things that we actually want to and there's like hundreds honestly enough onus them all there's so many things we want to actually query the driver for that usually technically what you would do is you'd probably add like some kind of renderer capabilities class and then that basically on startup just queries the driver and sees what we're dealing with so that's something we'll add in the future and when we have that we'll be able to set our maximum share a maximum number of texture slots to what that needs to be now for now we're going to assume that the maximum texture slot count is 32 fairly safe you know on mobile devices it might be like eight or something quite low I'm fairly sure we should have at least 32 - was lots to deal with especially if you have a dedicated GPU so we should be ok with 32 texture slots that means index 0 through 31 then what we need to do is when a texture is submitted so when we want to draw a quad with a given texture what we need to do is actually add that texture into some kind of collection some kind of data structure that basically says that ok this texture right is in the system because it's very common for us to want to render many quads with the same texture so this could be if we're using a texture atlas like a sprite sheet or something like that and then that way you know it wouldn't really matter like we don't we're have to bind like a hundred different textures for a hundred different tiles right we can just kind of have one sprite sheet bound and then sample from that same texture many times maybe we have like like I don't know some kind of terrain or something that obviously will use the same texture over and over again there's many many different use cases for this the point is we need to see if that texture has already been submitted in this drawer because then we don't have to use up the texture slot for a unique texture since that texture already exists now if we try and render 32 unique textures and in fact it'll be more like 31 because remember we have that white texture which means no texture at all it means a color of vertex color is actually being used instead of a texture in that scenario because of that because that takes up texture slot zero we'll say we have one three thirty one so 31 different texture slots to actually bind to we need to if it's a unique texture occupy another texture slot for that draw call and then push that texture into that slot and then we can bind it right before we actually call gel draw elements to render that's the idea now if we submit more than 31 textures so in other words let's just say that I've tried to render something with 40 unique textures that's not gonna work in one draw call it's just not so what's gonna happen is as soon as we hit that limit we need to basically end this current batch flush everything so that we draw that on the screen and then start a new batch and by starting a new batch we take out text just lots back to 1 and we start the whole process again so we can keep submitting new unique textures if required now in that scenario if we do actually draw other stuff with textures that used to be used we're gonna have to resubmit them but it should be ok and to be honest drawing with 32 different texture drawing and I don't know in my experience a 2d renderer if you're making a 2-d game or something like that drawing with more than 32 textures is not something I see too often in one draw koala mean like obviously if you're dealing with post processing and all these kind of other things and yeah that will like use many textures but that's a different drawer call so it doesn't it doesn't count if you're drawing your base geometry with 132 textures for a 2-d game that's not even that common in my experience because again in a 2-d game like when I think of 2d game like starchy Valley like that kind of stuff I don't know why I keep using stock valleys an example just keeps popping into my head and I used it once so I keep reusing it but if we use something like that as an example it's it's not like you know 512 by 512 textures like they're quite small and because of that you just add them into a texture Atlas you could easily fit everything into 32 into 30 textures right no problem so because of that it's not even a scenario that comes up that often and if it does you know you definitely wouldn't be using like more than say a hundred textures which means that fits into four drawer calls and then you know it doesn't really like performance-wise doesn't really matter so that's the plan I just wanted to be really thorough with my explanation so that you guys know what is actually happening here and now let's dive into the code and take a look at how we can make all of this texture stuff happen so scrolling through our texture 2d class if we just launch hazel right now and see what where we're at we have these two kind of quads that we drew these are both bashed together into a single draw call now let's actually draw like the channel logo or the maybe the hazel logo will be more appropriate on this texture and see if we can actually do that so the first thing we need to do is extend our API to actually take in a texture now at the moment we still have some kind of API here because if you remember from the previous time we just kind of reused an existing draw quad function which was this one to add it into the batch and that was kind of it and I think that like this for example goes into because this is a texture this goes into the texture function which doesn't actually use anything here like what I mean by that is it doesn't use any of our batching whatsoever so we obviously need to fix that up draw rotated court again with like all that stuff we're not going to cover that today but what we should be able to do is basically take these two functions here and convert them into into our batch rendering situation so let's take a look at that so the first thing we need to do is look at what we did for here because this is basically going to remain the same let's grab that we'll copy that I'll kind of keep this code here just the same way like I did here just because you know we need we want it for reference I mean in fact what I like to do is instead of commenting stuff like that I usually just write an if 0 that way and you can you know if you want to be more descriptive you could call this if you know old path or something like that you can use that because obviously that's not going to be defined as the same as if 0 so we can keep that here and then we basically have a little bit set up so let's talk about the very first thing that we kind of come up with here which is the color right what does our color need to be well what I like to do is just right a little constant expression here can be just be constantly doesn't matter but we'll set a default color of one you can have this like statically defined somewhere or whatever but I like to have it inside the scope of the function because it makes sense like it's just you know it's just here it's right here you don't have to look through a huge code base to try and find what the color actually is I mean obviously you could just you know go to that definition but this is still easier the next thing we need to do is actually take a look at this texture and decide whether or not it is as I mentioned earlier if it's already been submitted in this draw because if it has we don't in turbine it again and to do that we obviously need some kind of data structure so what I like to do is basically write some kind of well data data structure that will hold all of the texture slots that we've got bound now I like to use just a simple stack based array for this we're going to hold you and 32 T's these are meant to be an identifier for the actual texture now this is where we run into a little bit of an issue how do we uniquely identify a texture we don't really have anything for that yet now you could go the kind of simple approach and just be like okay well the OpenGL renderer ID right that will be my identifier and that's probably what we're going to do for now but the way that we would fix this properly and the way that we that you would expect this to work in a game engine is by basically saying that well a texture is an asset and every single asset has an ID like an asset handle essentially and that uniquely identifies that asset that's super important because you know and we will definitely talk about assets in the future I want to confuse you guys too much right now but in the future we will have kind of our assets broken down into the actual asset handle which just points to the actual asset and then the actual asset would be like a texture or a 3d model or you know a sound file or something like that that's super important because it means that if we have an asset that's in use and we want to swap it to a different asset completely so let's just say that we have this asset pointing to this to this texture but we've modified the texture on disk and we want to just like you know slap in the new text wrong maybe we want to change it to a completely different texture right if that happens and we're just dealing with assets we're just dealing with textures and not asset handles then obviously that all system breaks because this texture will be a particular texture but then we need to learn a different texture in which means that what are we going to have to go through our whole engine replace every single reference to that texture to the new one that's completely unreasonable so what we do instead is we have an asset handle which is kind of like a container of an asset so it works kind of similarly Tiger I guess two smart pointers now we have like a shared pointer it could be pointing to this thing but you could reassign it to something else all right that shared point object you could still hold a reference to that and everything would be fine it's just next time you reach for it it will be pointing to a different location and that's kind of the concept of assets in that sense we would have some kind of goods like a globally unique identifier for a particular asset and that is what we would have here in the in the actual like STD array because we don't have that for now we're just gonna use around your IDs but I wanted to be super clear that this is not ideal and when we actually introduce assets and asset handles and all that stuff this will be we'll have to rewrite this to make it proper again and as I mentioned we're gonna have a Maps texture slots situation so we'll write u + 32 T max texture slots and we're gonna just set that as 32 so this will be a to do render caps I'll say so renderer capabilities so this will be something we'll get from there so max texture slots and then we'll call this our I guess we'll just call this our texture slots that will be nice and easy and unfortunately here we actually have to give this static which I didn't really want to do I forgot about that a little rule but it's okay we'll deal with that so we have texture slots and then the other thing that I want to have is our actual texture slot index so we'll probably start this at 1 the reason being that texture slot 0 is going to be our white texture right and so because of that we're never going to write a texture that we want to render into slot 0 start with one and we'll actually have to reset this true back to one at the beginning of our scene ok so what we'll do here is we'll just say s data texture slot index equals that way we'll start overriding all about texture slots again at the beginning of a neutral call okay so with texture slots being set to vs right these are going to be these are completely empty right we should initialize this so what we'll do is over here maybe at the end of all this we'll just say s data texture slice and I could just pretty much just set them all to zero using a memset probably not the best thing to do like why could you try to fall it might make more sense but at the moment I'm kind of just feeling like doing this so we'll do size of s texture slots dot size and obviously I meant you went to the HVT will do something like that okay cool so now we're initializing all about texture slots to zero and in fact I'm the way to this code turned out right now is I'm not really digging it so I actually I'm gonna write it as a for loop so this is going to go through all of our texture slots here and just set them to zero sometimes like even though that might be one line of code and it might be nice and simple I think this is I just think this looks better to be honest and I think this is going to make sense to more people so it's important to write code sometimes that is like this so let's just say set or extra slots to zero okay this is something we'll do in the NIT function as initialization not definitely not something that we need to do every frame or every draw nothing like that okay cool now you'll notice here that we have this kind of in the text shader we have this kind of you texture uniform and this is set to zero that's our sampler now we're gonna have to have an array of these and we'll learn about that in a minute but before then if we go back to our draw quad that takes in a texture the idea here is we actually want to find a texture index for this particular texture so in other words what we basically want to do is and this was I've kind of explained this I think in more detail in my writing a bash round write in an hour but essentially we need to try and find a texture index for this particular texture and see if it's actually inside our texture slots if it's not a twitch it will still be zero since we didn't find it we need to actually put it into our texture slot array so to do that we need to basically set texture index true and we'll make this a float to our texture slot index right which is whatever that happens to be up to that's the next available texture slot so in the feed in a scenario of us not drawing a single texture before we hit this function it would have been set to one right and it would have been reset to one in the begin scene okay because zero as I mentioned is that white texture so this is now one texture slot one is now going to be occupied by this new texture that we are trying to draw so now what we'll do is write s data texture slots at this new index which I can well I'll use this because this is an hour float remember so we'll say sth slot index and we'll set that equal to texture ID now texture ID which I'll write out here is going to be the ID of this right so we literally need to say texture get renderer ID okay so once we've got and we don't have that function apparently so we'll set that up in a minute but that is that that is the basic idea and then this texture index which is now a texture slot that we happen to be using this is now the texture slot that we will bind this texture to when it comes time to actually render it that's the whole idea so what we need to do here is go to and to be honest I may actually change this over to be like a ref of a texture 2d and then we'll actually make it so that we can identify a texture 2d by its renderer ID that way we can kind of compare and that might be better than using render IDs just because I don't like the idea of having to bind a raw renderer ID I think that's not great so what we'll actually do here is change this I wasn't gonna do this but now that I'm actually providing out this code and it's not in my head it's kind of changing it's making more sense to do it this way so what we'll do is for here I will just set this equal to texture right and then we need to go into texture 2d or just texture and what we need to do now is actually write an operator that's going to be able to compare the two textures so the way that we'll do that is we'll write the virtual operator equals equals and this is a boolean operator obviously Const texture 2d other Const and to be honest I think this is something that we can just chuck in over here and set it equal to zero here so we'll grab this and then we'll go to our OpenGL texture and then we will override this so override and then what this is going to do is just basically return if am render ID and and obviously like in this case they should be the same type maybe I will actually just drop this down a little bit to make it a bit easier I'm still going to keep it in the header file M render ID equals will cast this to an OpenGL texture ID and we'll say other dot and render ID okay so which is essentially comparing this based on the the render IDs so if we go back to our renderer what we should now be able to do is write another kind of for loop here that basically goes through all of the stuff that is inside our texture slots so we'll go will iterate through all of our slots and we'll actually start this at 1 of course because our our index 0 is of course the white texture you guys should all know this by now this is going to be dot size of course and in fact we don't actually have to iterate through all of them because we're only going to be up to here in the current roll poll so let's change this to just go up to the texture slot index that's in use right because if we've only submitted three textures why would we iterate through all 31 or 32 like or well 31 because we start at 1 no point in doing that then let's write an if statement here that basically so a starter don't texture slots so I equals now we need to now compare this through the texture rights we need to write some code this now I'm not actually this should probably yeah this is now that this is gonna actually just compare the shared pointers which is not what I want to do and I'm afraid that the code is gonna look rather ugly if I go around that system because what I'm gonna have to do is call dot data or what is it ah doc get right that's gonna get me that's gonna get me the pointer and then I'm gonna have to dereference the pointer and that way it's going to use my operators so this is a bit I don't really like this to be honest I guess it'll work though for now so maybe let's just keep it but yeah this I don't know it will have to come up with some better syntax for that maybe we'll actually have a function or like some kind of even a function outside of the texture class that does this comparison for us that we can use to basically check if an asset is equal to another asset that will take into refs and we'll be a lot better than this basically so don't yet don't look at this code too much okay cool so if if the textures are equal so we're iterating through all the textures that we've submitted so far in this draw call and we're seeing hey have we already submitted this texture and if we have submitted texture already then it's already in this texture slot collection we just need to get the current actions lot which is I and then set that equal through our texture index so to actually index equals floor I right and then obviously we don't need to keep looking through all this so we can just break alright cool done pretty easy so now we have a texture index that was the purpose of all of this kind of code here we now have an actual texture index that we can put into our vertex attributes so that we can actually have our texture be rendered so text index right that's going to be a flirt and that's going to be whatever texture index we have right in the current submission now if it's zero it's white which means that it's gonna sample from the white texture and not actually draw anything well at least not actually you know multiply everything with one and we'll get our actual vertex color untouched so if we go back into what am I looking for the attributes we'll add in our flirt just flirt a text index and we need to talk about the shader now so if we go to actually before we talk about the shader I want to make sure that we render with all of our with all of our textures so we need to bind textures here right so to do that we need to go through all of our now one before we do that you can see that we also bind this well we used to bind this white texture I think we did it somewhere here white texture bind right so that's kind of important I think that what we can do is probably just set so we've set all of the okay so we're setting everything to zero yet now this doesn't need to be done any more I want to point out because this is now an object right that gets construed this is now a smart pointer it's an object it gets initialized it's not like an primitive type that we need to initialize so this is now gone but what I do want to do is still set the texture slot at index zero to our white texture so asked out I've got white texture right and then that way when we go through everything we can bind everything all right so now that we've got that what we can do is inside here we just need to go through we'll start at index I sorry we're starting at index zero because we want to include the white texture and we'll go all the way up to let's say texture slot index so that's whatever we ended up whatever the next slot would have been so this is essentially going to be all of our actual textures that we've submitted and just write underscore T here and then what we're gonna do is bind them right so texture slot i/o texture slots I guess i dot bind and we need to bind them at slot I right because the index of that array is the texture slot and that's yes that's all we have to do when we flush so before we actually draw we bind the create the correct textures and that is it now let's kind of fill out this text index everywhere so if we just draw a color we can set that to zero so text index equals zero right because this is Australian color and zero is the white texture so we'll bind that everywhere and then if we scroll down we need to do the same thing in our texture function except obviously bind obviously set text rate index to texture index and in fact what I'm gonna do is rewrite this card because I didn't like it so we're gonna try cons float text index equals zero and this will be our white texture so this is just gonna make a little bit more sense if someone reads it and that's about it look at me good good guy sure know just making sure the code is as readable as possible it's what everyone should be aiming to do honestly all right cool and then we obviously have like a transform I don't know what we did with this I don't know I don't even know if we still use a transform but let's go back into that let's go into our shader and check it out so over here inside texture we need true and I'm using a plug-in now to about foot syntax highlighting and stuff which is good but I'm obviously doesn't know all my custom stuff in Florida a text index right so we're adding a new attribute here which is a texture index we need to send that texture index out of our varying thing we're getting to the point where I probably convert this into like a struct of just all of our output data so that we're not kind of just free-floating so many variables like that text index we've still got a view projection times position which ago so yeah I transform just not being used and then over here we'll accept that text index so in floor text index and now we need to actually sample from the correct texture so if we look at this we have a sample a 2d of textures we're going to change that to be a sampler 2d array right so now we have a bunch of textures instead of just one way of 32 textures which is our maximum support a number of textures now again you'd probably want to like custom make custom roller shader based on that render capability and then we can kind of dynamically just create a new shared on the fly which will have the number here additionally what I'm about to do which is sample from a non-constant sample from this float here so I'll use that as a texture indexing to hear that may not be supported by all drivers it works for me so just be aware that you may need to in fact have a little bit of a branch set up where you go through an inch that ends up being you know you can you switch them and so if that's not supported you can use if statements to actually basically sample from the correct to actually index but hopefully none of you run into that if you do let me know in the comments below because I'm interested if that's still a thing in 2020 but basically what we want to do is simply look at you textures ass will convert this into an end and to convert it to an end chip use this style class I think in jail so you sorry V underscore text index okay so that's us sampling from the correct texture and then the rest is gonna be txt Ford times you tally factor times color okay so that is what we end up with and we'll obviously get rid of this one now we should be good I think so if we go back to render a 2d we should be binding the right textures in the right slice and doing everything hopefully correctly I can't think of anything else so I'm gonna have to just test this code and see what happens and then I'll probably realize that I've made it horrible mistake but let's try with outside without checkerboard texture cuz that's the thing in the background um I expect the transform the size that we've said is that gonna work that might work anyway let's just check this out so this should be going I'm gonna put a breakpoint here okay okay let's just run it let's just run it and see what happens but I was gonna put a breakpoint here to make sure that we're actually going to into the rad function okay so we've got a bunch of stuff here missing type-specific well that makes sense this needs to be a texture and if we go to let's say we go to opengl texture we can make this movie us I guess let's see if this will compile yeah looks pretty good to me all right let's run this code see what we get and we get nothing all right as expected I guess let's take a look at what went wrong so it's probably almost definitely the whole texture binding situation if we go back to render a 2d let's take a look so I expect that let's not draw the texture for now so now we should just be drawing this which may still turn up to be not being rendered correctly because we are of course trying to multiply it with the white texture so it seems like our white texture isn't working either let's put a breakpoint here and see what we are dealing with let's get rid of all this stuff come on I could just right click I guess but anyway okay so draw quad okay texture index of zero which is good and everything else we have an actual color yep so that's all being submitted correctly and we have our index count I guess so that should be good and if we look at our flush or end scene and I guess it would copy all of this stuff now yeah I'm assuming everything else would have just worked because we did change that quad vertex structure however everything obviously should have been like you know correct here max vertices we added this in here Tex index it's a flirt not everything looks pretty good to me and we have our white texture which we created here and we set it up and we bound it to slot zero apparently so drink flush I guess let's make sure that that's you know working so there's texture slot zero find so this should be able to a bunny flutter around right he is one so I assume that's our white texture oh okay I forgot I can't believe I forgot that I'm not having a good day we need to obviously set the uniforms correctly so this used to be right just us setting you texture which was just one int but now we're going to write another function here called set int array right and then this is going to basically take in I guess we can just take in I'll just say values and then we can have you and 32t count so this is what set in array is going to look like we're going to go back into shader and and that here as well equals zero so now this set int array function is going to be very very similar here upload uniform int array will have our values and our count and then I will I guess I will just also duplicate this function an array int values and you instead of GT count we will create that function and then will get the uniform location of the name obviously and then we'll just call uniform one IV location counters count and then values gonna be our values okay that's it so now if we go back here what we need to do is basically create our samplers so we can say you and 32 T samplers write 32 and then we'll iterate through all of these equals 0 I is less than 32 and I obviously should be using s data max texture slots for this and we'll just set sample as I equal to AI okay so we're just ascending here with all of our text as well so we get 0 1 2 3 4 5 etc all the way up to 31 in this case and then we need to set int array view textures samplers and then s data max Texas loss okay so now we're actually setting this properly now we yeah this needs to be an inch not a youant and that should be pretty good I think let's hit f5 see what happens I brought in 32 T here by the way but I don't know if I should change it elsewhere we'll see ok what do we get well we still get nothing that's somewhat surprising I'm having a really bad day I guess I hope that's being set correctly so we bind the texture shadow which is our textures you'll sell you textures we set you that should all be correct I would imagine yep so you can see let's get out a hexadecimal display sample is 0 through two yep okay good you underscore texture settings array so let's see what that's actually doing I'm assuming location it found a location and then count 32 values should all be here obviously let's just quickly see we'll add it to watch comma 32 and yep they're all here so you can see our things here so what is going on with let's look at our shader quickly it's going to be a very long video unfortunately where is our shader where's our shader texture okay so is that text index and everything correct that's the other thing I should probably check so yeah so we have an in float a text index and then we output that to V text index which is here and then we use that to choose to get the right texture and then uh what's our tiling factor we probably don't set that that may be what's going on let's let's remove the tiny factor quickly and see if that's the problem no it's not okay let's just keep removing stuff and see what what the deal is so let's let's bring back color let's make sure our CPU satisfy nice oh it's not okay everything is a disaster turns out so let's go back to basics this is actually good this is gonna this is gonna I'm gonna name this video like texture stuff plus debugging uh sometimes it's gonna be like an hour long which is like a bit ridiculous but anyway what have we done I don't even understand okay so this stuff's fine we're flushing everything we're drawing I imagine yeah we're still doing like all this stuff I don't have been going through this path anymore by the way we're just doing this stuff so what has happened what has happened we're still doing this yeah we still didn't begin CNN saying all that stuff is still there what have I done so I'm probably looking at this being like dude you've completely ruined everything that's super weird okay so it has been more time than I care to admit I mean realistically it's been about three minutes but I found the problem look at this line it's it's here what what is the problem I'll give you guys like five seconds to see if you can see it it's this it's you underscore color that's a uniform color we do not use uniform colors we use vertex colors which is this varying here so this should have been V color and if I launch it with V color well then guess what we have everything so let's it's such a small thing but it sucks that it completely ruins everything okay everything seems to work now let's try and bring back our checkerboard background here and see if we can actually render that as well and okay so that's kind of a little bit black and weird and the scaling kind of looks wrong so we'll need to investigate that in a minute but everything seems to render correctly apart from that which is good so let's remove you color because that doesn't need to be a thing you tiling factor I don't know like we if we want Italian factor it has to be inside a vertex attribute now if we want to have it into inside a drawer call so I'm going to like you know I might leave a little to do tiling factor here but like it's clearly not by me uniform we will remove it so we have u textures here and that's good okay cool so with that in mind is now and I'll just clean up everything else we just have your projection yeah this is why it's important to keep your shader is nice and clean by the way so checkerboard texture should be bound doesn't matter what that is that's how I tie our tiling factor which I think we don't use anymore we used to use it as a uniform here but basically I think everything else should work so we try it so let's see what happens when we try and render this right so what we do is we've submitted obviously it's the checkerboard background so we can't find it in here which is correct so this comes over here and then we obviously add it we add this texture to texture slot one right so this is now in texture slot one so if we look at this we now have our white texture now one by one white texture and I'll check out both texture okay it looks pretty good we said texture index to one everywhere which also is pretty good and then when it's time to render and we go over here we have hang on a minute why is this one oh we forgot to increment it okay that should have been two because as soon as we've added a new texture here it's important that we increment the texture slot index because that means that the next session is gonna be in slot 2 so let's launch that again and hopefully that was the final issue and yes it was okay now Italian factor obviously does not work at the moment and also I believe that size is no size is taken into consideration here so what this size is 10 by 10 yeah I guess that's fine so if we really want that to be centered we would have had to it because 0 is the center sorry bottom left corner is where it starts drawing from so because of that obviously it will start drawing from here and then we go all the way there so we need to translate it if we want it if we want it to be there in fact let's just do that so we'll say this true - 5 - 5 and then we have a 10 by 10 so in other words it's now it should now be centered around the origin here you can see it is ok tallying factor doesn't work maybe something that will add in in the future um in fact you know what since this video is already like embarrassingly long let's just - go ahead and add it now what I'll do is I'll have a text chord and then I'll just have a florist called tiling factor honestly because I don't think we're gonna want to know a uniform tiling factor so what we'll do is we'll add another flirt here which is going to be our tiling factor and then if we scroll down over here we're just going to set tiling factor 2 this is the texture 1 so we'll set it to tiling factor and then for the other 4 not for not drawing textures we'll have to just set it to well it doesn't really matter what it gets set to we can set it to 0 for example so Const it doesn't matter what assets you because we shouldn't be sampling anyway oh no we will be sampling actually from the white texture so we'll say tiling fact I'll just set it to 1 and then we just simply take this and put it everywhere then in our shader we look at location for tiling factor our floor tiling factor then we pop this into here and then we have this here sorry for the amazingly descriptive language here that I'm using and then we just multiply the texture coordinates by Italian factor and I think that should work so we are setting Italian factor of 10 here and everything else should be using Italian factor of 1 I guess so looking at this we now have our checkerboard texture back which is nice let's set this to 1 for fun just to make sure that it actually works which I expect it will and there we have it okay cool so we can now support textures now this is what I'm interested in what happens if I submit another chord with the same texture let's make this tiling factor even higher so like 20 or something and let's make this a lot smaller so one by one and we'll put it out like we'll still have it in the origin so 0.5 and 0.5 negative 25 rather okay so now if we launch this first of all we should see the same texture being used but more importantly what I'm interested in and there it is with the really tiny tiling texture and it looks like it's something is kind of in the way that's super weird it's supposed to be are supposed to be like this ok that's super weird that I don't even ok where negative let's put it as zero maybe I think it's just some weird Zed like depth buffering issues going on here let's bring it a little bit forward okay that's good now so it's being obscured by that but whatever let's now go into here and make sure that as we submit this it's actually finding our texture so the first time it doesn't find it right doesn't submit it second time is our second one it should hopefully find it and you can see it does right so this is equal now and I'm assuming it's actually if I go back here let's see if I can go into step into specific and then we can start to get like yeah yeah that's gonna be super annoying I can just go to GL texture and we can maybe just put a breakpoint here and yes okay so it is in fact hitting our function it's comparing the to render IDs and that's a lot good it really wanted to make sure that they actually worked correctly all right cool so that's it I guess we have textures rendering now using this batch renderer everything you see here is in one drop hole which is pretty cool cool all right what an episode I hope you guys enjoyed this video if you did please hit that like button please help support the series and my channel on patreon Oklahoma for such that shown on a huge thank you to everyone who does in fact support this channel I also wanted to say that I have been doing live streams for patrons as well so once a week I've just been developing hazel dev which is like the 3d version of hazel that's been a lot of fun so join up there show your support and get access to these super amazing live streams which you can then watch after the fact that they've been streamed which is also cool I think next time we're going to continue on with the batch render or Winnie we still need to add like transformations and all of that stuff and I really want to stress test it as well but I hope you guys enjoy this video and I will see you next time good bye [Music]

Channel: The Cherno

Views: 16,550

Keywords: thecherno, thechernoproject, cherno, c++, programming, gamedev, game development, learn c++, c++ tutorial, game engine, how to make a game engine, game engine series, batch rendering, textures

Id: Fz1VySWaad8

Length: 46min 29sec (2789 seconds)

Published: Fri Apr 03 2020