URP Fullscreen Shaders - Unity Shader Graph (Tutorial)

hello and welcome to my channel in this video I'm going to show you how to use full screen Shader effects first thing I'm going to do is I will start a new project in unity Hub and I'm going to choose editor version 20223 23 F1 long-term support version I believe you need to have editor version 2022 at least for this to be able to work so if you have an older version of unity you might need to upgrade I am just going to name my project full screen Shader tutorial and I'll hit create project to get started I am going to go to the package manager and I will go to the unity registry and I will want to install the universal render pipeline all right now that the universal render pipeline is installed I will go ahead and right click go to create folder and rendering and I like to have all of my Universal render pipeline stuff in the rendering folder so I will go to rightclick create rendering urp asset with universal renderer and then I'll go to my project settings graphics and I will drag in my urp uh pipeline asset to the scriptable render pipeline settings field here and now we are ready to start doing some effects so just so we have something to look at I will go to our sample scene and I will add a cube and I want to make it a little more Dynamic so I'll just change the camera angle to make it a little more Dynamic and now we can go ahead and start making our shaders I'll go ahead and right click create a new folder called called shaders and in this folder I'll right click and go to create Shader graph urp and full screen Shader I'll just call this FS Shader graph and go ahead and open this up and this is going to be the Shader graph for our full screen Shader nothing too crazy so first thing I'll do is create a node and I'll use urp sample buffer and I'll sample it from the blit source and just super easy I'll just hook up the output to the base color save that right click on the Shader graph go to create and material and we have made our first full screen Shader however we don't have it yet applied so I will go to rendering and we'll want to select the urp asset uh the looks like it's called new Universal render pipeline asset renderer if you see add render feature you're in the right place so we'll click add render feature full screen pass renderer feature and by default it adds an invert full screen colors Shader here so we can actually just say none to that and then it goes back to normal and if we want to select our Shader then we can just go to the folder and drag it in here and as you can see it looks exactly the same and that's just because we are actually just sampling the colors and feeding the colors from the blitz Source into the fragment Shader here so it should look exactly the same to make the cube stand out a little bit more I'm going to right click create a new material and I'll I'll just call it red and I'll just make it red and apply it to the cube so it stands out a little more now some cool things you can do with this uh you can make a bunch of different effects one thing that you can do with this that you couldn't do with other shaders before is uh you could go to create and I'll use a twirl and I'll just feed the output here and I'll add a float or strength let's just feed that in here and for the strength I want to make it a slider say maybe between -10 and 10 the default of zero and I'll save that go to our game so we can click on our Shader for our full screen and we have the strength slider now so if I increase that you can see the effect in action and it's actually twirling the colors of the screen so if you wanted to make like a little warbly effect you might be able to utilize something like this even with this we could do like a Time node sign time hook it up to the strength and now you can see it kind of worble back back and forth is kind of cool so yeah there's not a whole lot to it uh if you can hook all this up for the full screen Shader graph really it's only what you can come up with is going to be what limits you here um I can go ahead and show some examples of some stuff that I've been able to create all right here is a sample scene that I've created and one of the effects I have created is a RGB like LED sort of effect here if I change the scale bring it down effect becomes more apparent like I do 10 you can see I just use this uh sample texture here just tile it with the scale can adjust the brightness add some chromatic aberration to offset the red blue and green by a bit once I scale this up to say like 250 starts to look kind of like a CRT which is kind of cool of course you can rotate the camera and the effect will stay on the screen and another effect I've created is an outline effect so instead of using the inverted ho method like in my last tutorial you could use a fulls screen Shader offsetting the uh or sampling the depth texture and then it can add like these lines to the edges of objects which you know might be an aesthetic that you're going for and one other one that I created was a was kind of like a quantization effect so it limits the number of colors that can be used so the further up it goes the less noticeable it is but the lower the value the more noticeable it becomes and you can get a really stylized look with these effects enabled if I turn all of these on you can see this is a really really stylized look so for the purpose of this tutorial I think I'll show you how to create the outline effect all right so to create the outline effect what I'm going to do is I will open up our Shader graph again and I'm going to start by adding our properties so let's go ahead and add a float called depth intensity and this is going to be a slider from with a default of one between zero and two I will add I will add a float called outline thickness and this will be a slider from 0 to one with a default of zero and the last thing I'll add is a color and I'll just call this outline color I'll just leave the default on black so I will disconnect our urp sample buffer from the base color node I'll move it out here and I want to right click do create node and actually for right now I'll just get rid of our urp sample buffer so like I said we're going to sample the uh scene depth so I will right click and type in scene depth and I'll leave it on linear then I will want to add a remap node and I will have our depth intensity remapped from between 0 and two to be 0 and 100 and and I will feed these both into a multiply node and I will feed this into an absolute node and this is just to increase the intensity of our uh depth texture that we get and now I will uh also use the scene depth and outline thickness to uh sample the depth um a few times and offset it in a different direction each time and then we'll use that and get the difference between the normal scene depth and the offset one and that'll create our outline so to do that I will grab our outline thickness create a remap node be it into the remap node and remap it from between 0 to one be0 and 01 feed this into a negate node want a vector 2 node and I'll feed the output of our negate node into the X input and I'll leave y on zero and at this point I'll want to create a subgraph so I'll go ahead and save our asset here and right click go to create Shader graph and subgraph I'll just call this outline subgraph and I want to open that up and our output is going to be a float I'll just call it out and the inputs we'll want are a float called depth intensity and a vector 2 called offset drag offset out here feed this into a tiling and offset node and I'll want it to go into the offset input we'll grab our scene depth and I'll set this to raw and feed the output into the uv4 create node multiply drag our depth intensity Out Create a power node power three drag depth intensity into the power node and multiply these two and feed the output to out I'll save this as our subgraph so essentially what we're doing is we're taking an offset for our scene depth and multiply applying it by a certain intensity to uh really accentuate the outline we'll go back in here and I'll want to create node subgraph our outline subgraph and for offset we can feed in our Vector 2 and for depth intensity we'll want to feed in our depth intensity and we'll want to do this for every direction so right now this is offsetting to the left of the image so essentially I'll just highlight all this control C control V and instead of a negate we'll just feed the output of the remap node here into the vector two so then this would offset it to the right and we'll want to add these two together and we'll want to do this again for the up and down directions so I'll highlight all of that c contrl v try to line it up I'll just feed these into the Y option and leave the X untouched so we get the up and down directions and then for these two we'll want to add them together we'll just add those and then I'll also want to do the diagonals so I will just contrl C and contrl +v again grab these and this might be a little more rcky all right so out of the gate out of the negate we'll want to feed into a multiply node so I'll do multiply and I'll want to multiply it by 0.5 once we're doing the diagonals at 45° so multiply those same thing down here but with the direct remap value so we'll want to get the negative Direction in both of them the positive diagonal for both of them those get added together and I'll highlight this control+ c contrl v move this over and now we'll just want to get the negatives and positives negative and positive diagonals so for that I'll remove that remove that we'll want the X positive Y and the positive x negative y we just crisscross our applesauce there and like we did before we'll just add these together and then we can just add the last part here now we got all of our offsets and now we'll want to add a multiply node and I'm going to multiply by all of these diagonals that we added together for the edges of the depth texture and I will just multiply it with the output from our absolute node here I will feed this multiply into a step node I will add our urp sample buffer with the blitz Source let's add that right over here we'll add an invert colors node and feed the step output into the invert colors input and I'll just invert the red Channel um all of these are just a single float so the red channel is going to be the equivalent of like a vector one or a float so we're just inverting the value that we get from this multiply and from this step out of this step I want to go to another multiply and I want to multiply by the outline color I'll feed the urp sample buffer blit Source into another multiply node multiply it by the output of our invert node and then I can just go ahead and add these two together and I'll move our fragment Shader down here and the output of this ad I will feed into the base color input here I'll go ahead and save and let's see how that looks not all too different let's see outline thickness is zero I move that up oh well one thing we're missing for sure is uh if we go to our Universal render pipeline asset we'll have to enable the depth texture also enable opaque while I'm at it go back to our Shader increase our outline thickness and as you can see the outline grows for the object you can set what color you want and yeah if you want to do multi outline I haven't actually done this but I believe you could just duplicate your graph I'll increase this one and I don't know let's make it red yellow I don't know and go to our rendering folder and you can just add another full screen Shader pass it'll select the invert one by default but you can just feed in your the one that you want there we go oh well I guess you can't do that unless maybe I do before oh there you go so you can change the injection point to get multiple layers I suppose so that's pretty cool um anyway that is really all I had for you today uh kind of a simple video if you only looked at the first part so yeah that that ought to do it one thing to note is uh it probably won't render correctly in the scene node as you can see here mine's not rendering super well uh but in the game node that's really all that matters um you can move around the scene and it should just work um we can even add in more 3D objects we can do a cylinder U Move that oh move that somewhere else Let's uh I don't know a capsule might be cool rotate that move it somewhere as you can see this is a very cost- effective way and time effective way to just add simple screen effects if you need in effect to affect everything on the screen like if you just want to add like a simple outline to your game this would be a nice way to do it rather than doing the inverse whole method like I showed in my other video uh well anyway if this helped you please leave a like and comment down below for anything you'd like to see next if you want to see more full screen Shader graph tutorials or anything particular for like Unity uh just leave a comment down below and I'll try to get to it thank you very much for watching goodbye

Channel: MichaelsGameLab

Views: 2,187

Keywords: unity, urp, tutorial, how to, game dev, game development, unity 3d, universal render pipeline, unity 2024, shader, graph, shadergraph, shader graph, outline, outline shader, outline shader graph, outline shadergraph, unity outline, unity outline shader, michaelsgamelab, easy, simple, easy outline shader, brackeys, material, full, screen, fullscreen, fullscreen shader, full screen shader, urp fullscreen shader, fullscreen shadergraph, full screen shader graph, retro, wiggle, quantization, invert

Id: JBpxSQrZRXg

Length: 14min 50sec (890 seconds)

Published: Tue Apr 09 2024