Fullscreen blur with URP

We've just switched our project from the built-in rendering to URP because our artist needs it to use Shader Graph. After fixing all the materials and the camera settings, everything seems to be working fine except for the full-screen blur we were using.

This is our setup before the transition:
- Background Camera
- Main 3D Camera
- Main UI Camera
- Blur Camera
- Foreground UI Camera
- Tooltip Camera

Blur Camera didn't render any objects, it just had the following script on it:

Code (CSharp):

1. private void OnRenderImage(RenderTexture source, RenderTexture destination)
2. {
3.     var temporaryTexture = RenderTexture.GetTemporary(source.width, source.height);
4.  
5.     Graphics.Blit(source, temporaryTexture, _material, pass: 0);
6.     Graphics.Blit(temporaryTexture, destination, _material, pass: 1);
7.  
8.     RenderTexture.ReleaseTemporary(temporaryTexture);
9. }

This way everything except for the foreground UI and the tooltips was blurred when we enabled this camera.

Now, as I understand, OnRenderImage will not work with URP. So how do I achieve the same effect? I've very little experience working with graphics but as I see it I just need a place to plug the old blur shader. Could you please help me or at least point me in the right direction?

I'm using Unity 2019.3.12f1 and URP 7.3.1.

 

I've created a ScriptableRenderPass script and I guess I'm supposed to implement the Execute method and use ScriptableRenderContext somehow but I don't exactly understand what I should do with it. Is there a code example somewhere maybe?

 

https://github.com/sebastianhein/urp_kawase_blur

might be what you're looking for.

 

Thanks. I've been able to apply it to full screen but I still can't figure out how to make it apply to the camera I need. It seems that depending on renderPassEvent it is applied either before the last camera or after all the cameras but I need it specifically between Main UI Camera and Foreground UI Camera. It's still all very confusing and I can't find any documentation aside from the API reference which doesn't really explain anything.

 

I still haven't been able to figure out how to do it.
Also, I tried using Bloom as described here: https://docs.unity3d.com/Packages/c...iversal@7.3/manual/post-processing-bloom.html
But it seems to only apply to the base camera. What am I missing here?

Edit: Nevermind the bloom issue. I had to check "Post Processing" in the other cameras' settings. Now it works. Blur still doesn't, though.

 

Another issue is that it wont apply on UI, as all canvas UI element are come with a transparent shader, and this urp_kawase_blur doesn't work with transparent objects. Anybody can show us a right direction? There is no any documentation how these things work. I'm searching a workable blur shader/shadergraph which can work with transparent UI objects over a year from now, and there is none. (URP or LWRP not built in renderer)

I don't want anybody gives me a full working code here, but I'm lack of shader hlsl coding, or maybe I (as many others it seems) miss some options with SRP forward renderer options... also there are stencil override option, which I could find any proper docu what are those things and how it works. Is there anything to do with transparent elements (UGUI)? Or these whole approach are bed?

Anybody can help?

 

I found this thread as I was searching for a solution to this as well. I managed to find a way that worked for me, based on the URP_Kawase_Blur example posted here. So I'll share it in case it is useful for others as well:

https://github.com/ArneBezuijen/urp_kawase_UI_blur

I made it easier to work with on UIs. You only have to switch the material of a UI element to give it a blurred background. Otherwise it should match all the features of a normal Unity UI element. This approach also allows for all scene elements to be blurred and as such can include transparent objects.

It however does not support blurring of other UI layers yet. If you don't care about transparent objects this can be achieved though: switch the render feature itself to before transparency and using two canvases. One in the default overlay mode for the non-blurred elements and one in the in-world mode for the blurred elements underneath. (If you need both blurred UI and transparent object to show up it'll become significantly harder though)

 

Amazing!

Is it possible to acess the RenderFeatures via script? For example, In case I want to animate it to gradually blur (increase value of blurPasses in runtime), is it possible? Thanks!

 

Haven't had the need to do that yet, so I'm not sure, though I expect that should be possible.

One limitation that will be there though is that the way the blurring is implemented, means that blur size scales in integer steps, so you'll either have to animate it pretty fast to not make that obvious or you might see steps in the animation progress.

 

No. This is not a solution.




We can see that the blur shader and forward renderer script will not allow to show transparent objects (alpha-channel).

Not only behind UI element (this is a UI panel with a "Behind Text") but any transparent game object. (blue transparent cube).
This shader and SRP script will get through only opaque pixels. So in this terms of subject, it's useless. I'm sorry.

However, as I said, a more expert programmer or Unity dev help needed!
How can we alter this shader to allow to show transparent objects?

 

It seems like you just looked at the original Kawase Blur example instead of my edited version. The whole point of those edits was to support the changes you are asking for. Here's a recreation of your example to show this:



PS. I wasn't sure to reply as your message was unnecessarily rude to strangers who are trying to help you without asking something in return.

 

Thanks for sharing!

Is there any way to reproduce such effect with stacked cameras (one rendering scene and another one UI)?

At this moment blur works only for elements rendered by main camera (i.e. scene + screen space UI).

I guess I need to combine image from main camera and UI camera before passing it to the blur shader, but I couldn’t find where to do that.

 

@Arnage_nl Thanks a bunch for making this work with transparent objects, I've been trying to wrap my head around this for some time now. Do you know of a solution that would work on world space 3D objects, like a simple plane?

 

That should work, assuming your UI is rendered in screenspace on your second camera. Overlay UI is always rendered on top and can only read the blur texture and not influence it. See below for an example of using stacked camera's with this effect. Can you elaborate on your specific setup? (Also sorry for the late reply, I missed this message and only noticed it due to Gandarufu's reply)

The main problem is the limited control Renderer Features give over the rendering order. You can either activate it before translucency and thus miss out on anything transparent or after, but then the object that you want to render with is is already rendered so it can't access a rendertarget that isn't there yet. Ideally Unity would make this order more granular as it is in materials, but I guess that is a limitation of the way they implemented them.

The only solution that I know of is to use camera stacking now that that is available in URP. A second camera can render a 3D object that samples the blur texture form the base camera. Note however that, as this is an overlay camera, these objects don't occlude behind objects rendered by the base camera. An advantage of this approach is that it also allows multiple layers of blurring, allowing you to put another blur layer on the overlay camera.

Here's an example of this: The third cube is rendered with an overlay camera and blurs everything rendered by the base camera (including screenspace UI) and it is itself blurred again by the second blur pass on the overlay camera to get the blurred background for the final UI rendering.



Note: to do this you have to upgrade the project to 2019.4 as the branch I posted was made with 2019.3 which did not yet support camera stacking.

 

Hi @Arnage_nl
Thanks a bunch for your input on this That sounds exactly like what I'm looking for. I have an overlay camera that renders objects that are being examined. I was looking for a way to blur the entire screen in the background with a simple plane (also including transparent objects).
Now, your screenshot proves that it's possible. I only need to figure the setup out. Is there any way you could include your 3 cube scene in your repository, if you have a minute?
I'd appreciate it very much! Thanks a lot for putting so much effort into this common problem a lot of people seem to have.

Edit: Never mind, I figured it out Hooray!! You're a lifesaver!

 

Just saw your edit after I put it on Github

Anyway in case it's useful for others too: I placed it on a separate branch (called stackedcameras) as it needed the version bump to 2019.4.

 

This works great!

 

This is one good looking blur. Now for the performance: is this bluring the entire frame and putting the entire frame inside a global texture?

Or, when used in UI, does it only blur the portion that's covered by the blur UI?

 

Judging from the kawase blur render feature, it does a full screen blur and the UIBlur shader just samples _blurTexture made from kawase blur. So, nope.

Arguably, performance would be poor if only a small part uses blur, very good if there a multiple ui components that uses blur. Traditional grabpass blur method grabs texture and blurs it per item which allows fine tuned blurs that can differ per item but at a cost.

It already has built in downsample option so downsizing it to 1/4 and running 2 passes should be performant. ( honestly downsampling and upsampling is blur itself, just not as good ).

 

I cranked up the downsample range to 16 and it's AWESOME!
event on switch

 

Is there any way to make this work with the 2D renderer? It doesn't seem like it supports renderer features at the moment.

 

I'm getting an error in URP 11 in the KawaseBlur.cs script. It says:

The name 'CommandBufferPool' does not exist in the current context

Does anyone know how to fix this?

 

Are you using Assembly Definiton assets in your project ?
If it is your case, you might need to add this definiton reference in your assembly :

Unity.RenderPipelines.Core.Runtime

 

Thanks for this @Arnage_nl! Works great with ARFoundation to blur out the AR Camera when UI menus are visible.

 

Hey! I've switched over to 2022.1.0b2 and all of a sudden i'm getting this error:

You can only call cameraColorTarget inside the scope of a ScriptableRenderPass. Otherwise the pipeline camera target texture might have not been created or might have already been disposed.

UnityEngine.Rendering.Universal.ScriptableRenderer:get_cameraColorTarget ()

KawaseBlur:AddRenderPasses (UnityEngine.Rendering.Universal.ScriptableRenderer,UnityEngine.Rendering.Universal.RenderingData&) (at Assets/Resources/Assets/KawaseBlur/KawaseBlur.cs:126)

UnityEngine.GUIUtility:ProcessEvent (int,intptr,bool&)

sebastianheim's implementation worked just fine on 2021 but now this error keeps getting spewed out, even when i switch to ArneBezuijen's implementation. I've tried changing "var src = renderer.cameraColorTarget;" to "var src = renderer.cameraColorTargetHandle;" but this error keeps appearing. What gives?

 

Unity changed it. You can't use

ScriptableRenderer.cameraColorTarget

or

ScriptableRenderer.cameraDepth

at

ScriptableRendererFeature.AddRenderPasses

anymore. Instead, use

ScriptableRenderPass.ConfigureInput

and

ScriptableRenderPass.colorAttachment 

ScriptableRenderPass.depthAttachment

.

 

Thanks for the source @Arnage_nl! Has anyone gotten this working with a screen space camera Canvas rather than overlay?

Setting the render pass to be after opaques. Appears to render correctly in editor but not in play-mode.

 

A bit late to the party but this worked perfectly with 2D UI!

 

Hi, I hope you have solved this problem. I'm facing it, and I have no idea how can I write a blur renderFeature in this version of unity, because I can't use blit function correctly like the code down:


Do you have some advice?

 

Hallo Arnage_nl,
thank you very much for this awesome solution. I was looking for this for a very long time

However, I have issue on MacOS using Metal Renderer. When the Player renderer is set to OPENGL everything is fine. But when using Metal Renderer - the blurred Render Texture is flipped upside down.

My Setup: (using Unity 2021.2.3f1)
2 StackedCameras.
MainCamera is base (rendering the 3D objects),
UI camera is stacked Camera rendering the UI elements on Canvas only. The Canvas Render mode is set to Screen Space - Camera, and the camera of the Canvas is set to UICamera. (Unfortunately I need the Screen Space - Camera, not the Screen Space - Overlay. :-(

I have found some informations, that on some platforms are the Rendered Textures flipped, and there is a need to flip them in Shader.
https://forum.unity.com/threads/fix...rdinates-in-image-effects-not-working.266455/

I am not familiar with writing shaders, so all my attempts have failed :-(

Can you, or someone else help me?

Thank you
Pavel Zverina

 

Assuming its KawaseBlur.shader, just add

o.uv = TRANSFORM_TEX(v.uv, _MainTex);



//add below 3 lines

#if UNITY_UV_STARTS_AT_TOP

o.uv.y = 1 - o.uv.y;

#endif



return o;

 

Hi thanks for answer. Unfortunatelly, the Kawase.shader does not work. I am using UIBlur.shader - which is different.
I tried to add your lines - don't know exactly what I am doing. Here is the part of the shader, which might be related.

Code (CSharp):

1. struct v2f
2.             {
3.                 float4 vertex : SV_POSITION;
4.                 fixed4 color : COLOR;
5.                 float2 texcoord : TEXCOORD0;
6.                 float4 worldPosition : TEXCOORD1;
7.                 float4 screenPos : TEXCOORD2;
8.                 UNITY_VERTEX_OUTPUT_STEREO
9.             };
10.  
11.             sampler2D _MainTex;
12.             sampler2D _blurTexture;
13.             fixed4 _Color;
14.             fixed4 _TextureSampleAdd;
15.             float4 _ClipRect;
16.             float4 _MainTex_ST;
17.  
18.            
19.             v2f vert(appdata_t v)
20.             {
21.  
22.                 v2f OUT;
23.                 UNITY_SETUP_INSTANCE_ID(v);
24.                 UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
25.                 OUT.worldPosition = v.vertex;
26.                 OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);
27.                 OUT.screenPos = ComputeScreenPos(OUT.vertex);
28.                 OUT.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);              
29.                 OUT.color = v.color * _Color;
30.  
31.                 return OUT;
32.             }

 

Here is the complete code of the shader. I am now sure, if I can post it all, I don't have a permission from author - If this is problem, I will delete this post.

Here is the code:

Code (CSharp):

1. // Unity built-in shader source. Copyright (c) 2016 Unity Technologies. MIT license (see license.txt)
2. // Extended with sampling of blurred background texture by Arne Bezuijen
3.  
4. Shader "UI/BlurredBackground"
5. {
6.     Properties
7.     {
8.         [PerRendererData] _MainTex("Sprite Texture", 2D) = "white" {}
9.         _Color("Tint", Color) = (1,1,1,1)
10.  
11.         _StencilComp("Stencil Comparison", Float) = 8
12.         _Stencil("Stencil ID", Float) = 0
13.         _StencilOp("Stencil Operation", Float) = 0
14.         _StencilWriteMask("Stencil Write Mask", Float) = 255
15.         _StencilReadMask("Stencil Read Mask", Float) = 255
16.  
17.         _ColorMask("Color Mask", Float) = 15
18.  
19.         [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip("Use Alpha Clip", Float) = 0
20.     }
21.     SubShader
22.     {
23.         Tags
24.         {
25.             "Queue" = "Transparent"
26.             "IgnoreProjector" = "True"
27.             "RenderType" = "Transparent"
28.             "PreviewType" = "Plane"
29.             "CanUseSpriteAtlas" = "True"
30.         }
31.  
32.         Stencil
33.         {
34.             Ref[_Stencil]
35.             Comp[_StencilComp]
36.             Pass[_StencilOp]
37.             ReadMask[_StencilReadMask]
38.             WriteMask[_StencilWriteMask]
39.         }
40.  
41.         Cull Off
42.         Lighting Off
43.         ZWrite Off
44.         ZTest[unity_GUIZTestMode]
45.         Blend SrcAlpha OneMinusSrcAlpha
46.  
47.         Pass
48.         {
49.             Name "Default"
50.         CGPROGRAM
51.             #pragma vertex vert
52.             #pragma fragment frag
53.             #pragma target 2.0
54.  
55.             #include "UnityCG.cginc"
56.             #include "UnityUI.cginc"
57.  
58.             #pragma multi_compile_local _ UNITY_UI_CLIP_RECT
59.             #pragma multi_compile_local _ UNITY_UI_ALPHACLIP
60.  
61.             struct appdata_t
62.             {
63.                 float4 vertex    : POSITION;
64.                 float4 color     : COLOR;
65.                 float2 texcoord  : TEXCOORD0;
66.                 float4 screenPos : TEXCOORD2;
67.                 UNITY_VERTEX_INPUT_INSTANCE_ID
68.             };
69.  
70.             struct v2f
71.             {
72.                 float4 vertex : SV_POSITION;
73.                 fixed4 color : COLOR;
74.                 float2 texcoord : TEXCOORD0;
75.                 float4 worldPosition : TEXCOORD1;
76.                 float4 screenPos : TEXCOORD2;
77.                 UNITY_VERTEX_OUTPUT_STEREO
78.             };
79.  
80.             sampler2D _MainTex;
81.             sampler2D _blurTexture;
82.             fixed4 _Color;
83.             fixed4 _TextureSampleAdd;
84.             float4 _ClipRect;
85.             float4 _MainTex_ST;
86.  
87.            
88.             v2f vert(appdata_t v)
89.             {
90.  
91.                 v2f OUT;
92.                 UNITY_SETUP_INSTANCE_ID(v);
93.                 UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
94.                 OUT.worldPosition = v.vertex;
95.                 OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);
96.                 OUT.screenPos = ComputeScreenPos(OUT.vertex);
97.                 OUT.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);              
98.                 OUT.color = v.color * _Color;
99.  
100.                 return OUT;
101.             }
102.  
103.  
104.             fixed4 frag(v2f IN) : SV_Target
105.             {
106.                 half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
107.  
108.                 float2 screenUV = IN.screenPos.xy / IN.screenPos.w;
109.                 color.rgb *= tex2D(_blurTexture, screenUV).rgb;
110.  
111.                 #ifdef UNITY_UI_CLIP_RECT
112.                 color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
113.                 #endif
114.  
115.                 #ifdef UNITY_UI_ALPHACLIP
116.                 clip(color.a - 0.001);
117.                 #endif
118.  
119.                 return color;
120.             }
121.  
122.            
123.         ENDCG
124.         }
125.     }
126. }
127.  

 

Hi, what you need is to change the "o.uv" in revolute's suggestion to "OUT.texcoord".

Code (CSharp):

1. v2f vert(appdata_t v)
2.             {
3.                 v2f OUT;
4.                 UNITY_SETUP_INSTANCE_ID(v);
5.                 UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
6.                 OUT.worldPosition = v.vertex;
7.                 OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);
8.                 OUT.screenPos = ComputeScreenPos(OUT.vertex);
9.                 OUT.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);            
10.             //add below 3 lines
11.             #if UNITY_UV_STARTS_AT_TOP
12.                 OUT.texcoord.y = 1.0 - OUT.texcoord.y;
13.             #endif
14.                 OUT.color = v.color * _Color;
15.                 return OUT;
16.             }

 

change the blur pass in kawase blur on the renderer to an odd number.
that will flip the blur

 

OMG, i have solved it! Thanks to your advice. I have to flip the screenPos, not the texcoord. Now it works. Here is the code - for someone in the future ...

Code (CSharp):

1.             v2f vert(appdata_t v)
2.             {
3.                 v2f OUT;
4.                 UNITY_SETUP_INSTANCE_ID(v);
5.                 UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
6.                 OUT.worldPosition = v.vertex;
7.                 OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);
8.                 OUT.screenPos = ComputeScreenPos(OUT.vertex);
9.                 OUT.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);  
10.  
11.                 #if UNITY_UV_STARTS_AT_TOP
12.                 OUT.screenPos.y = 1.0 - OUT.screenPos.y;
13.                 #endif
14.  
15.                 OUT.color = v.color * _Color;
16.                 return OUT;
17.             }
18.  

 

This makes no difference. But I have found the solution - flipping the screenPos in the Shader. Code is below. Thank you

 

Hello,

probably I'm a bit late to propose a solution for 2022.1+, but here it is:

In the KawaseBlur.cs script change the AddRenderPasses() call with the following:

Code (CSharp):

1.  public override void SetupRenderPasses(ScriptableRenderer renderer, in RenderingData renderingData)
2. {
3.     scriptablePass.Setup(renderer.cameraColorTargetHandle);
4.  
5. }
6.  
7. public override void AddRenderPasses(ScriptableRenderer renderer, ref RenderingData renderingData)
8. {
9.     renderer.EnqueuePass(scriptablePass);
10. }

This works in 2022.2, too.


Francesco

 

Anyone manage to convert this effect into URP 14? i'm using the new Blit API and getting visible cross pattern


Edit #1 : Nvm got it, i need to pass the FullScreen TexelSize of the FinalRender target [CameraColorTargetHandle] to the shader and use it instead of _BlitTexture_TexelSize.

 

I've noticed there is a "Post Processing" toggle on camera component. When I checked it, the upside down / flipped issue was fixed.