Blur / Frosted Glass in the Unity Universal Render Pipeline (URP) for Free!

everyone my name's tom and in this tutorial i'm gonna be showing you how to achieve this blur effect in unity using the universal render pipeline in the past this has been very easy to create due to the support for grab pass however that is no longer available for the universal render pipeline due to performance reasons however the method I'm going to show you in this video works perfectly so I've created this sample project for us today as you can see there is a UI panel on screen displaying something very important however it's a bit bland you know kind of just sticks out so we're gonna turn the background of that into something that looks even better thanks to this blur so the first step is to download the file from the description I've linked the github repository where you can find this I have actually forked this from another project so I didn't create it however I've simplified the download so you can easily import it into any project so simply head over to the releases tab over here and download the unity package once you've done that simply open the file and unity will open and show you this dialog here just click import now as you can see we've got a bunch of errors in the console and that's because I haven't actually set up the universal render pipeline yet so we need to head on over to the package manager you can open that in window package manager and change packages in project to packages all now I'm using unity 20 20.1 so this may look a bit different for you but the procedure is basically the same so you want to scroll down and find the universe or RP here and click install note you won't need to do this if you setup a project using the universal render pipeline template so that has now been installed and if we head over to our scene you'll see nothing has changed and that's because although we've installed the u RP we need to actually enable it so we're going to head down to our assets right click create rendering Universal render pipeline pipeline assets we'll just leave the default name and press enter you'll see that it's created a pipeline asset and a pipeline asset renderer select the renderer and under renderer features click Add and you'll see this option called kawase blur I don't know if that's how you pronounce it but that's how I'm gonna you just want to click that and you'll see that it creates a new cars a blur under settings you can change all the settings associated to the blur effect firstly we're going to change the render pass event from after rendering transparent to before rendering transparent the blur material we need to set to cause a blur feature we need to change blur passes to a number I'm gonna choose 8 and down sample I'm gonna select 2 you can always change these to customize the strength of the blur after we've done that we need to head into the u RP asset and enable the opaque texture finally we need to go into project settings which you can find in edit project settings go to graphics and drag the u RP asset into this slot here you should see everything turned pink in your scene that is a good sign because we need to now upgrade our materials so just go to edit render pipeline universe will render pipeline afraid project materials and click proceed so now in our game view everything should be working so to actually achieve the blur effects what I'm gonna do is I'm gonna duplicate the image in my panel which acts as the background and move it to the top so it's rendered at the back and I'm gonna rename it to blur next we need to assign a blur material to this new image so in the material here we're gonna choose the unlit blur now the lit blur reacts to lighting and the unlit blur does not so for UI we definitely want to choose unlit and then I'm just going to reduce the opacity off the background image to something like 100 and if you look carefully in the background you should be able to see this blur effect in action and if we hit play you should be able to see that it doesn't actually work and that is because our canvas is currently set to screen space overlay and for this effect to work you've got to select screen space camera so we're gonna click that and we need to make sure our main camera is assigned here if it isn't already and if we press F to view you'll see that it's actually in front of the camera but it is actually intersecting our terrain so we're gonna go to the plane distance and set it to 1 so now it is directly in front of our camera if we now hit play you should be able to see the blur effect is working perfectly and if we click the renderer here in the inspector we should be able to chain the blur properties to increase the amount of blur or decrease it so not only blur passes but downsample also controls the blur effect and more downsample will actually increase performance because it's performing the blur on a small image also of course you can change the tint of the panel so if you click the image that's acting as the background as you can see you can change the color a bit for example we'll choose a blue and you can see that it's actually tinting the blur which could be useful if you're making an error where you would make it red for example but that is not all because we can actually create a 3d object which blurs behind it as well so you might want that in a window for example so what we're gonna do is create a 3d object a plane and I'm gonna position this so we can see its effect quite easily and for its material we're going to choose lit blur and this will actually react to lighting so if we press play now we should be able to see that this plane is also contributing to the blur and if we compare that to the unlit blur as you can see the unlit blur is a lot brighter because it's not been affected by the light and that is why we use it for the UI so just a quick note is that this blur will not actually blur of the UI elements so if i duplicate this panel and position it in front of the other one as you can see it's kind of cutting through the panel and you cannot see the text being blurred but other than that it works perfectly and this is still better than no blur so I hope you found this video helpful if you did please remember to leave a like and subscribe turn on notifications so you never miss another video but thanks for watching and I'll see you in the next one you

Channel: Tom Chapman

Views: 38,311

Keywords: unity, URP, blur, universal render pipeline, render pipeline, frosted glass

Id: BIKUSU7nz20

Length: 6min 13sec (373 seconds)

Published: Mon Jun 08 2020