Blur and Sharpen Filter - Shader Graph Basics - Episode 51

today i'm going to show you how to create a simple sharpen and blur post process filter in unreal and unity let's go [Music] so first i'm going to explain how a post-process blur and sharpen filter works and then i'm going to show you how to build it in a shader but first let's step back a bit two weeks ago we looked at how to get set up and apply post-process shaders in unreal and unity and i showed you how to create this simple warping effect and then last week we took a look at full screen masks i showed you how to create this square edge mask this rounded edge mask and this center vignette mask so if you haven't seen the video from two weeks ago or from last week go ahead and go back and watch those first because we're going to be building on top of them okay so let's take a look at how a blur and sharpen effect works we're going to start out just by sampling the scene itself and we're going to sample the scene multiple times and then combine those samples together to create a blurry looking image for this shader we're going to be doing seven samples we'll do one sample right in the middle of the current pixel that we're rendering and then we'll do six additional samples around that sample to get kind of a ring around the edge we'll weight this sample in the middle more than the samples around the edge and then we'll blend all the samples together and our result will be a blur so the first thing that we need to figure out is how to get the uv coordinates for each of these seven samples once we have our uv coordinates we'll use them to sample the scene and then for step three we'll combine our seven samples together to create a blurry image so we have a simple three-step process so the first thing that we need to do is figure out how to get our screen sample coordinates to be able to sample our scene seven times so first let's just hold down the two key and create seven uh constant vector two values and these values are gonna represent each of the samples that we're making we know that the first sample is right in the middle so it can be it can have a value of 0 0 then these two are going to represent the samples to the right and to the left so we'll give this one a value of 2 and we'll give this one a value of negative two so that'll be sampling the right and then the left and then these last four samples here are going to be uh the four corners that are above and below our center samples and so for these we're going to give them a value of 1 and 2 a value of 1 and negative two a value of negative one and two and finally a value of negative one and negative two so if we take a look at each of these positions what we're getting is a value of 2 and negative 2 a value of negative 1 and 2 and a value of positive 1 and 2 and then a value of negative 1 and negative 2 of 1 and negative 2. so these are our seven samples and the next thing that we need to do is take these values and actually convert them to the values of real pixels on the screen and in order to do that we need to add a node to our scene called screen resolution and so this visible resolution value is going to give us the number of pixels across and the number of pixels down in the viewport that we're currently rendering and to get the size of an actual pixel all we need to do is divide one by our visible screen resolution so we'll add a divide node here take our visible resolution and one divided by our screen our visible resolution will give us the size of a single pixel and now in order to create our correct pixel offsets we just need to multiply each of these values by our screen pixel size so i'm going to go ahead and add a multiply and we're going to multiply each of these values by 1 over our screen resolution okay so now we have seven pixel offsets and all that's left to do is to add these offsets to our uh texture coordinates so i'm just gonna add a texture coordinate node and then we'll take the texture coordinates and add it together with each of our seven pixel offsets and we're done so now we have seven sets of uv coordinates that we can use to sample our scene so this is step one we've created uv coordinates that represent the samples that we're doing and the uv coordinates allow us to take samples of our scene in the center and then in six additional positions around the center now let's go ahead and move to step two where we're going to use these uv coordinates to sample our scene and this is pretty easy we just need to add a scene texture node and we're going to set the scene texture node to post process input 0 and that will give us a sample of the screen and now we just need to make seven copies of this all right and now we just need to hook up our uv coordinates that we created so here's the center sample the right sample the left sample and then the last four are our top and bottom corner samples and we're done great so we've sampled our scene seven times and now we need to combine our samples together in order to do this we're going to weight the center sample a little bit more and then each of the samples around it is going to be weighted slightly less and the way that we do that is we just take our sample and multiply it by a value less than one so in this case i'm going to weight our set our center sample with a value of 0.3 and our our samples need to add up to a value of one so i've used point three of our value of one which means for the last remaining six samples i need uh i have a total of 0.7 for each of these six samples so if i divide 0.7 by 6 i get this value here so this is the value that we're going to use for the weight of each of our six remaining samples and i'm just gonna round it off so let's go ahead and add another multiply node and we're gonna be multiplying by six 0.11667 we'll just go ahead and multiply all six of our samples by this value great and now all that remains to be done is to add all seven of our samples together so we'll add our first two and our third and we're done so if we plug this into our root node we should now get a blurry version of our scene so let's go ahead and do that i'll just plug this right in and hit save now if you watch over here our scene is a little bit blurry looking it looks like we uh we need some glasses let's just plug our normal scene in again and you can see it sharpens up and then as soon as we plug this version in it's blurry again okay if we want to control this effect we can blend between our blurry version and our normal version using a lerp node so let's go ahead and add a linear interpolate node and we're going to make the blurry version plugged into b and then i can just take this first sample here before we multiply it by anything and just plug it directly into the a socket of our lerp node all right now i'm going to add a value here and plug that into alpha so if our value is zero our scene is going to be nice and sharp but if our value is one our scene is going to be blurry so i can use this value to decrease or increase the amount of blurriness that i want to add and i can even overdrive it if i add a value of 2 now my scene's going to be even more blurry however because we're only doing seven samples of our scene this blurriness has a limit and if i take this value too high if i give it a value of like 10 for example it's gonna stop looking like blurriness and more like something else that's really strange so probably wanna limit this value to uh just within the zero to two range or so okay so we've created a nice little blur filter here we're doing seven samples of our scene one in the middle and then six around the edges then we're combining them together and then we have a little control that we could expose as a parameter if i just pick convert to parameter then on a material instance i could tweak this parameter to control how much blurriness to apply to my scene but what about sharpening how can i sharpen this is there an easy way to take what i've done here with these multiple samples and use it to sharpen our scene well yes we can use the magic of the lerp node to sharpen we know that higher values bet into the lerp make the scene more blurry but what about lower numbers what happens if we go below zero and give our lerp a value of negative one well let's find out here we'll set it to zero and we'll just have a regular scene but if i set this value to negative one now i'm sharpening my scene can you see how that works uh if zero is a regular scene one is a blurry scene if i go the opposite of blurry into negative it pushes it away from blurry and the result is sharpening let's take a look at negative two you can see that i can get even more sharp and we can get even sharper if we go to something like a negative five so this is the same way that uh software like photoshop uses to sharpen your scene if you apply uh sharpening it's doing something similar where it's taking multiple samples of the scene that would normally blur but then going in the inverse direction to sharpen and what this does is it adds contrast around the edges of each individual pixel so pretty cool we've got a filter here where if we go in the negative direction we can sharpen and if we go in the positive direction we can blur all right so that's how you create a blur and sharpen filter for your scene now we're using this uh filter here where we're tapping once in the center and then we're doing six additional samples around the center but you could do all kinds of other schemes you could add multiple additional samples you could randomize the arrangement of the samples all these different things that you could potentially do but the idea is the same that you take multiple samples um blend them together to get an average and then higher values will blur and then going into the negative will sharpen all right so that is how you create this effect in unreal let's switch over to unity and then i'll show you how to do it there and be sure that you stay tuned to the end of the video because i'm going to be sharing how we're going to be combining these filters together in a future video i'm going to give you a little sneak peek all right let's switch to unity all right here we are in unity and i've started in the same shader that we've been working on for the last two weeks so two weeks ago we built this distortion shader and then last week we built our three full screen mask so here's our square edge mask our rounded edge mask and also our vignette center mask so this week what i built is this shader right here this is exactly the same as it was in unity i've already built it just because it takes a while to put everything together but i'll go ahead and walk you through how it works so we've got this node here called screen and it brings in the width and the height and i use the combine node to combine those together into a single vector two value and then we're getting the reciprocal of the screen width and height and that's the same thing as dividing one divided by these two values that's a reciprocal and so then what this gives me is the size on the screen of each individual pixel and then i have my uh offset values so my first value or my first sample that i'm making is not offset at all it's right in the center so you can see i've given it a value of zero zero and then i've got my two offset values for my left and right samples i've got a value of 2 and negative 2 and then the last 4 are for my top and bottom corner samples so a total of 7 samples including the center and then 6 around the outside and then i just take the size of individual pixels and multiply them by these values which gives me nice offsets for my uv coordinates now in unity we use the screen position node instead of the texture coordinate node so i take my screen position and i add my offset values to it to each individual screen position coordinate and that gives me the coordinates that i need to sample my scene so then i take my scene color node and i use these values as the coordinates to sample them so i've got seven of those and then i have to weight them in order to combine them together so my center sample that's not offset at all i'm waiting with a value of 0.3 so i multiply my center sample by 0.3 and then all the rest of my samples i'm multiplying by 0.11667 and 0.3 plus 0.11667 multiplied by 7 is going to equal 1. so all of these weights together will equal 1 and then all that remains is i just need to add all of the results together and that gives me my final result which is my blurry looking image over here if we just take the result of our center sample and wire that in now you can see that my scene is nice and sharp again but if i pass it through my blur filter here i get a blurry scene now what we haven't done yet is adding adding our lerp to the end so i'm going to create a new lerp node here and we're going to make our blurry part of the the filter connected to the b input of my lerp node and i'm going to come up here again to my center sample and we're going to wire that into the a input of my lerp node so if i lerp with a value of 0 i'll get a nice sharp scene but if i blur with a value of one i'll get a blurry scene so let's just go ahead and add uh a float value here and i'm gonna give it a value of zero save it get a sharp scene i change my float value to 1 now i get a blurry scene and just like we did in unreal if i give this a negative value i'm actually applying a sharpen filter to my scene instead of a blur filter so now my scene is sharper than it used to be i can even go higher than that i could give it a sharpened value of negative two and everything just gets sharper and sharper now for things with really thin edges like these plants um negative two may be a little bit high so if i just wanna sharpen it a little bit maybe i give it a value of zero point uh negative 0.5 yeah so i just sharpen up my scene just a little bit okay that's how you create a blur and sharpen filter in unity as well as unreal so we're just doing seven samples of our scene with our samples arranged with one in the center and then six around the edges and then we multiply them by our weight values uh 0.3 and 0.11667 and multiply them by the weight values and then add the results all together and then finally we just learnt between our center sample and the results of all seven samples with a value that we can then use to control how much sharpness or how much blur we want to apply so that's pretty cool all right now you might be wondering where we're going to take our series from here so we've talked about distortion a little bit we've talked about masks how to do things just in the center or just on the edges and we've talked about sharpening and blurring what we're going to do next week is we're going to combine all of these techniques together plus maybe one more technique and we're going to create an underwater post-process effect so i'm going to show you how to use all of these uh features plus maybe one or two more to make it look like our scene is underwater i hope that you are looking forward to that and that you'll come back next week and support the channel and learn how to create an underwater post-processing effect using all of these individual techniques if you haven't made the distortion shader or the edge mat or the mask shaders go ahead and do that this week so that you'll have all these effects ready so that we can use them in next week's video and combine them all together to make an underwater appearance all right that's it for this week i hope you enjoyed the video uh and that you're learning how to create these cool post-process effects have a great week everybody and we'll see you next week to create an underwater effect [Music] you

Channel: Ben Cloward

Views: 20,791

Keywords: UE4, UE5, Unreal, Unreal Engine, Unity, shader, material, material editor, game development, real-time, tutorial, training, graphics, 3d, GPU, tech art, computer graphics, fundamentals, basics, beginning, learning, shader graph, getting started, post-processing, blur, sharpen, unsharp mask, gausian

Id: c30uBsyMnNY

Length: 21min 55sec (1315 seconds)

Published: Thu Jun 23 2022