Creating a procedural grid URP shader (Unity Tutorial 🇬🇧)

foreign [Music] [Laughter] and welcome to a quick Community tutorial about how to create a simple procedural grid using shaders in this episode we're going to make our own graph-based urp Shader to display a rectangular Grid in weld coordinates with some tweakable parameters this kind of render can be very useful for level design for example during the initial white boxing phase two easily identify the dimensions of the scene and place the objects in the right place so our goal will be to have this postural grid of a controllable cell size and stroke thickness some color inputs for the background and the grid lines and even a toggle to optionally discard the background away and use the grid as an overlay by the way remember that you can also get all of the assets we make in this video for free over on GitHub in this repo where I put all my Unity tutorials assets and with that in mind let's get to it and discuss how we can create a UAP Shader for this procedural grid render in this first part we're going to set up a basic Shader and its Associated material to put on a plane and display a simple black and white rectangular grid like this one to begin with let's create our Shader and material Assets in this tutorial we'll work with the UAP Shader graph tool so we need to be with the UAP pipeline for our project so be sure to create your project either based on the UAP pipeline in the initial template or to install the package afterwards and then make sure that you've set a UAP settings asset in your Project's Graphics settings now if you right click in your project dock you'll see that you can create a new asset of shutter graph type we'll make an unlit graph called its procedural grid and then right click on this I set it to create a new material based on it if I make a plane in the scene and drag my material on it usually it now properly change all the way to a procedural grid Shader so let's double click the Shader graph asset to open it in the shadow graph editor and start working on our grid generation logic since we want to work with World coordinates the very first step is to access this Global world's position matching a pixel we can get it using the position node and make sure to keep its space mode to the default World value note that if you want to make a procedural Grid in local coordinates meaning one that follows the plane and is relative to this object's origin you just need to change the world option to object and everything will be computed in the local space coordinates anyway here we can get a feel for our world's position value by bringing the output of this node in the base color slot above fragment's output context on the right and then saving or Shader assets to actually refresh the scene our plane now displays its Global position for each pixel as a color and we see that we do have something that is red for the positive X blue for the positive Z magenta IE red plus blue for the positive x and z and black for the negative values which is consistent with the global referential we can see in the top right corner since our geometry is flat we're only interested in those two axes here the X and the Z so let's use a split note to isolate those two components from our initial 3D Vector they are the first and third values ID R and B out slots now of course we want to agree to be symmetrical around the origin point so we don't want the negative values to be treated different like this to avoid this we can take the absolute value of our components using the aptly named absolute node and if I debug the result for the x-axis you see that this gives me a black line near zero and white everywhere else that's because basically starting from here the absolute value of my X world's coordinate is equal to or greater than one and so it's outputted as a white color to actually turn this into multiple grid lines the idea is to take the remainder of this absolute coordinates divided by a grid step we can do this with the modular node where we feed our x value at the top and the grid Step at the bottom for example with a default value of 1 I get something like this my plane shows a black line for every unit every time my X World coordinates passes a new step and then we have those black to white gradients in between and because we have normalized or value this happens on both sides of the origin point foreign if we modify the modulo divide the value at the bottom we see that we can control the distance between the lines so this is where we want to inject some option to control the grid cell size to do this let's go to the graphs Blackboard and create a new parameter for Shader I've typed Vector 2 called cell size we can also open the graph inspector panel and select this variable to set its default value to 1 on both axes and then we just have to save our assets to see this new parameter appear in the inspector of all material using a Shader now to actually use it in our computation we're going to split the X and Y components like we did before so that we can control the cell size on each axis and then use the X output as our modular divided value if I refresh the Shader you see that I can now change my value directly in the inspector and see my grid lines along the x-axis update in real time accordingly okay we've managed to make some soluble line pattern but the problem is that we don't really have sharp Strokes at regular intervals rather our plane has those multiple little gradients as the modulo keeps going from 0 to 1 in each grid cell to fix this a nice solution is to use the smooth step node in short this tool allows us to snap back a value to a given range and in our case by passing in the x coordinate as the edge one input a float value for the thickness of a grid lines as the H2 inputs and 0 as the inner inputs we see the top blurry gradients are transformed into nice sharp lines again we can expose this float parameter by converting it to a new property for Shader the grid thickness for example the default value of 0.1 okay so that's pretty cool we now have easy to tweak grid lines along the x-axis in both the positive and the negative parts of the horizontal plane now we can do the same for the z-axis simply by copying our absolute modulo and smooth sub nodes and inputting back the z and y components of the world's position and the cell size parameter respectively if I output this bottom part of my graph you see that it does exactly the same thing but in the other direction finally to combine the lines on both axes we just need to multiply Auto results this will produce a black and white grid mask with black lines and a white background that we can customize using the cell size and the grid thickness properties in our inspector now there is this little glitch in the middle because there are basically two lines side by side so we get twice the edge thickness here but I feel like it's not that big of a deal for this tutorial and it even helps highlight the origin of the world so I actually quite like it this way and I won't spend time fixing this rather I want to keep improving on this procedural grid Shader and see how to use this grayscale mask as a base and bring in some colors okay we've now got a nice black and white mask for a grid that we can tweak easily in the inspector that's pretty cool but of course it would be even better if we could also pick the color of the background and the grid lines to really customize the whole thing to a wheel luckily this is actually quite quick to add to our Shader in short we can use this grayscale map to differentiate between the background and the lines and just multiply this value by the color to tinteds properly so let's define two new parameters for Shader background color and grid color and initialize the background color to be white like it's currently now we can drag those values to a graph and connect them as follows to change the background we just need to multiply our final grid mask by the value and it will directly color the background as expected the trick is that all the black areas are ignored because they basically nullify the result of the multiplication so this will only take into account the background parts and because our initial color is a pure white multiplying it with our background color parameter just replaces each component with the right RG and B values for the grid lines it's the exact same idea but we need to reverse our mask so that only these line parts are taken into account so we're doing two squeezing a y minus Note that turns white into black and vice versa and then multiply this new result by a grid color parameter at this point with the forgot a tinted background in here and tinted grid lines in here using our shaders color parameters defined in the Blackboard to combine them we just need to add both results the black parts of each separate computation will be filled by the other and if we put this final value in our output slot we see that we get back all black and white grid from before except that now we can modify the two colors with the parameters that have shown up in the inspector so we can easily tweak it the color of the background or the lines but now what if we already have another mesh behind or some background that is not just a solid color and we just want to agree to be an overlay on top without any background of its own as a final Improvement we're going to see how to allow a grid to be transparent if need be to wrap up this little Shader let's add a last option to remove the background from our grid and only show the colored lines if we want to use it as an overlay we'll create this toggle as a new parameter in a Shader of Boolean type called transparent which can be used in a branch node in the predicate slots this will basically allow our graph to choose between two computation paths depending on the value of this variable the point here will be to condition the alpha value of a Shader on this option if it's off then the alpha is one everywhere because we want our mesh to be fully opaque but if transparent is on then the alpha will be given by a grid mask like before though we'll use the reverse version so that the grid lines are the white Parts meaning with an alpha of one and the background is the black part meaning with an alpha of 0. the only problem is that as you can see our Shader doesn't yet have any Alpha outputs for now the only thing we can output from our fragment context is the color that's because our Shader graph assets doesn't have the right settings to be able to use an alpha value we need to Shader to either be transparent or opaque but with Alpha clipping enabled here we won't be needing continuous Alpha values we'll just have 0 or 1. so we can use Alpha clipping and stick with an opaque Shader this will be slightly better in terms of performance and it won't impact or visual at all so let's open our graph inspector panel go to the graph settings tab and toggle on the alpha clipping option over here you see that this instantly reveals two new slots in a fragment's output context the Alpha and the alpha clip threshold we'll simply drag the result of our Branch node in the alpha slots and set the clip threshold to 1. to properly differentiate between the black and white parts if we resave the Shader with that now as soon as we set transparent to true in the inspector our background disappears and we are left with just the grid lines we can still change the cell size the thickness of the stroke the colors and of course if we toggle the alpha logic back off we get our background again so there you go you've now got a basic procedural grid Shader in weld coordinates made in your p and you can tweak it in various ways to customize it to your liking anyway with that said that's it for today I hope you enjoyed this quick tutorial and that you learned a few interesting things about creating shaders in UAP using the Shader graph if you did feel free to like the video and subscribe to the channel and of course if you have other ideas of the tricks that you'd like to learn don't hesitate to leave a comment as always thanks a lot for watching and take care

Channel: Mina Pêcheux

Views: 4,768

Keywords: unity, csharp, game, gamedev, effect, ui, material, shader, shader graph, urp, srp, render pipeline, procedural, grid, node, graph, procedural render, procedural rendering, procedural generation

Id: T0CYpOyCVIU

Length: 13min 25sec (805 seconds)

Published: Wed Jan 11 2023