Depth Buffer for Vanilla Shaders in Minecraft

hey guys cloud here and today i will be showing you how to use the depth buffer for shaders uh so as i've said before shaders are a pretty complicated area you can't just make one video on them and expect it to cover everything or expect it to be under an hour long so today we're going to be covering the linear depth and exactly how i did this um flashlight shader i'll do a little hand waving when we get to the flashlight part i'll explain each of the core pieces but some of it you might not be able to intuit yourself uh why it works that way because it requires some math but at the very least we'll get to how the flashlight shader works so this is just going to be for constant we're not going to be able to toggle the flashlight on and off that is going to take its own video and i'm still personally i don't have a method that is foolproof enough for me to be comfortable sharing it with you guys uh so i'm not quite ready for that maybe i'll be ready in a little bit uh so as you can see the uh blocks that are closer to me the closer i get to them the more they become illuminated to a certain extent uh but then the further they get the less illuminated they are and to give you guys some compare and contrast let me show you what it looks like without the shader on so a lot darker you probably barely can see stuff uh so that is the depth shader we're going to be going over all the code required from the ground up how to make something that utilizes the depth buffer which is really the revolutionary uh feature of 1. 16 i believe it was added in 14 or 15 or 16 one of those three but it's really revolutionized shaders and what we can do with them so we're gonna need a new uh resource pack i will call this uh depth tutorial enter okay inside it you're gonna need some default folder stuff so let's go ahead and hop into versions 1. 16 and open up our jar with a win archiver a winrar is the best method to open the jar in my opinion but other people have their favorites whatever who cares all right so we go to the depth tutorial and we're going to want a folder uh we're going to want something that follows the path of a resource pack normally so you need assets pack is optional so i'm just copying it from another one but it's packed.

mcmeta i would assume that if you're in this video you know how resource packs work so you do assets you do minecraft then you do minecraft and then you just go follow the same path so you go shaders and this is going to be using the transparency shader but the depth buffer can be used on some other buff shaders as well but the transparency is typically the best for like a constant shader so then you need post and program so we have post which is going to be as i've discussed in a previous tutorial i'll link all my other tutorials in the description this will probably be in a playlist anyways uh but post and program post is what uh posts it to your screen like uh for example post is going to be what method uh it originally uses and then it kind of like tells you the directions so use this shader then that one then that one and that one and then program is what their shaders that you tell it to use are actually doing uh so post is just going to be our transparency. json so we'll copy that over and then open this guy up and then we're going to have program and program we're going to probably want just we can copy some uh the blitz which is the default and we can just copy that okay yeah that's good okay so and then we'll rename it to uh depths and depths just like that you can also use subfolders in here too for organization i'm just not going to use it in this video so that's really all we need uh now the next part is going to be the magic word part so uh ins well not really we can find it here uh so in the transparency shader you'll see what it does so it does the transparency program it runs it on main which is the thing that the game initially posts to your screen so main is just going to be kind of like everything all the pixels the player sees at one particular point in time with no added effects to them such as uh entities that are glowing and whatnot no special effects just kind of a raw picture um and you can see what that is but how that actually what it actually is evaluating by just kind of cutting this guy out and just making main go straight to final final is usually what it's going to post to your screen when you're all done uh so we take main and then we post to final uh and we run the transparency on main and then the output is final and then these are our additional targets and then after we do that we run blitz blit copies final back to main so then once we've this is just something that we add pretty much to the bottom of every file just copy final back to main because in the end of the day main is what's going to be drawn to the screen uh so main is kind of like your input but it's also your output but you can't do it all in one step so you split it into two so you can't just go from main to main you have to put it on a inter immediate kind of variable here so what we actually want uh is two things here but really just one uh we want the diffuse depth sampler right here so we can really just copy this whole thing if you want enter just like that uh change this guy to depths to run our depths guy change this to final uh and uh let's just go to like trans and then to final and then instead we write the trans which is just like a transform or whatever uh and then we add our new variable here called trans and i've gone over in detail what all these things are uh in another video so you should check that out if you're kind of confused on this step i just need to save time for this video uh anyways so here we have the depths and it writes to tr to find from trans to final uh so this is after processing the transparency buffer uh and then we're going to use the diffuse depth sampler as an additional kind of uh in guy that we're passing like an information a new buffer that tells us stuff so we go to program and now we have depths and depths. json so depth.

json we need to add a new sampler here and the new sampler is going to be our depth diffuse depth sampler just like that just so it knows what you're doing so here's your diffuse depth sampler okay so i copied some stuff from my other uh version just because i don't want to break anything but instead we make a blend do one and zero here so we're i guess we're adding one and zero i haven't really messed with blend too much myself uh then uniforms i added a few there was progmat and color modulate we don't need color modulate we do want one called screen size and all these are is you just you can just copy the words here they're pretty much all the same and then fov is your field of view and that is a float and we're setting it to 70. uh so these are just a bunch of variables that we're passing in or uniforms so inside this file i'm just going to update the version to 130 uh that's what i prefer to use then we also need to create a new line for the diffuse depth sampler so this means we have a uniform that is a 2d sampler and then we have text chord and then we have to initialize the other uniforms so i dragged those uniforms in here so these are kind of their things so you have a four a matte four you have a vect two uh that's just two variables on a vector and a float uh and then what the blit does is it takes the diffuse sampler and we don't have color modulate uh it takes the diffuse sampler at the text cord grabs the 2d texture uh evaluates it as a 2d texture and grabs the pixel colors in alpha and it puts it to the frag color so in main we're constantly writing this frag color for every pixel on the screen and the diffuse sampler we access it at the text chord the text chord is constantly changing every iteration of main and it lets us grab different pixels so we also need to do this with the depth but the problem is depth is not linear in minecraft and what depth is because maybe i did not explain this too well yet but what depth does is each pixel uh is assigned a numeric value for depth in game so what that means is when i look at this chest it's going to have all the pixels with the chest are going to have a higher depth value that'll be really basically the same it'll be higher depth than this fence which is closer to me but it'll be lower depth value than that wall which is behind it so this is perfect so let's just access kind of distances of things in the game which will let us do make something brighter when it's closer and darker when it's further so part of the magic that oh nowhere made is i think go nowhere it was either oh nowhere or sabena or both of them don't know if i'm getting this credit issue right they made this function called linearized depth which is just based off of the wiki which essentially like turns depth into a linear variable so one unit of this depth is equal to one unit of depth in the game i'm not sure exactly whether a one means one block or a two means one block but at least we know that if we change a value we can expect it to have a linear scale effect so this will turn depth into some linear value now what we can do is we can do logic based on depth and grab values based on depth so what we do is we go to the depth sampler right it's a basically a 2d array of all of the pixels on your screen we go to the coordinate that we're currently at and we grab its value then we grab the r value because depth only has one number so we just go dot r texture2d will return an rgba value so we just grab the r and then this value will be some number that's a float and we'll pass it to linearized depth and linearized depth will output a float and that will be our linearized depth value so now what we can do is we can take this texture right and we can go texture we can create an intermediate variable if you want we can go back four color equals and we can grab this number so this will give us an rgb for variable vect4 that's rgba and we can do vec4 of color. rgb times depth and color.

a so that way we just maintain the alpha and the rgb okay so important thing is to make sure that it's telling it to use the right fragment shader which is this guy uh otherwise you're just going to make it use blit and you'll also have black screen so here is a fog depth shader a linear fog this is just like blindness so what i did was i did same as i showed before so we took rgb the color we grabbed the color which is going to be a four vector value we divide the rgb by depth and we uh put the alpha on the end and we put that on to the frag color of what we're actually drawing and what this is going to do is basically the further something is the darker it will be because depth is going to get bigger and an rgb value divided by something big is close to zero zero is black so this just makes everything linearly darker so how do we make something kind of uh that's pretty much all the tutorial i wanted to cover in terms of how to use the depth buffer where to put it uh and some application of it but now i'm going to cover like the flashlight aspect so we're gonna do some basics here uh it's gonna be like how do we draw a circle uh so you have to draw a circle in a very weird way so the coordinate that you're at that you're drawing you have to use uh kind of conditionals in the sense of we have to be able to say for any point what should its value be based on some function so we need to design a function that would output a circle and what function outputs a signal you could do the circle so x squared what plus y squared equals r squared so i just pasted it in here and i will have this chunk in the description uh well no i will have this whole this whole resource pack in the description so what this does is this grabs distance which is going to be kind of like the distance from the corners of your screen based on your fov this is a complicated thing that uh little function not really too complicated but it's a little function that uh disco hound sent me i believe uh and then we take the uv which is going to be this is where the actual circle happens that is kind of like a separate thing that is used for the serp for the circle but in a different way but this is how we actually generate the circle so we take the text chords and then we get the x coordinate minus 0. 5 puts you at the center of the screen pow so you square it and then you square root it uh square root the whole thing so this is just x squared plus y squared square rooted but then we shift it to the center of the screen because x and y is going to be based off of the corner of the screen so this gives you d which is going to be kind of like where you are in the circle uh so then you adjust d uh to give you some uh so normally it would just be some value that is based off of where you are in the circle but instead we do we have to adjust it so that it is actually kind of like the amount that you're supposed to expose based off of how close you are to the center so we take d or what it was here so where you are in the circle times aoe so this would make the circle bigger or smaller based off of some variable and then we do the exponential so this will fade the circle and we do it of a negative exponential so it decreases instead of increasing so we decrease as we go away from the circle of a specified size with a variable and then we take that reduce thing that is constantly getting smaller the further away we get we multiply it by exposure so this will kind of affect how the curve dampens uh how how much how quickly it dampens and then we divide the whole thing by distance times 0. 15 and 0.

05 is just something i have adjusted that you can change and distance is going to be this value here so then if we have some variables for float for exposure and aoe which you can change then this will give us some value between 0 and 1. that or some value that corresponds to how much we should expose the pixel based off of how close it is to the center of the screen uh and how far away it is so this actually takes into account the depth in here so we're just trying this distance transforms the depth uh based off of your fov uh so then inside the final line you have the frag color so what do we do with the color so in the color we grab the colors rgb we multiply it by a value that is clamped so that it doesn't get above like what it should be and we clamp it between 0. 1 and 10 so it'll either be 10 times brighter or 0.

1 times brighter it won't be any bigger than that and the value that we calculate is one plus d and then what so that will just be whatever d is so we have one which is going to be itself right so it'll be just no color plus d makes it like makes it increase color based off of how close it is to the center and then this value will be between 0. 1 and 10 really we could say between 1 and 10 because the d shouldn't be negative and then finally we just give 1.