[Solved] Dynamic Blurred Background on UI

Hello guys, bringing up this thread...
Basically I got the awesome JohannesMP script to work like a charm in my game (it's blurring the background while the Inventory is called). The only thing is: it's not fading like the rest of the canvas elements. Do you know why?
How can I make it work like the rest? (P.S. the shader is on a "panel" of the canvas, under the inventory panel... so the whole canvas is fading properly, but the panel with the blur shader).

Here a video to check the behavior yourself:

Should I write a specific script for that? If so, how?
Any help is much appreciated!!! Thanks!

 

It doesn't work on the Canvas with [Screen Space-Camera] Rendering Mode, How to solve this problem?

 

I tried several solutions from this topic and they all terribly squander the FPS on a mobile device (Android, Samsung Galaxy Tab A7). Is there really a solution for mobile phones?

 

Late answer, but I can tell you the answer is no.
I spent a lot of time researching different techniques to develop high performance blur. The solution ended up being used for my asset is far superior to all you can find here or on the asset store in term of performance. But even then, there is no way you can get decent looking blur on low end GPU like that.
It not even an algorithm problem, those low end GPU simply don't have the memory bandwidth required to provide the GPU with all the pixels needed in the first place.
You can try to work around it by blurring only a small portion of the screen and at reduced resolution. Depend on how big the area you blur is, it may be possible to reach 30FPS.

 

Thank you so much for this effect! It is really what i am looking for

 

This is it! Just what I have been looking for!!! Is there a way to increase the blur radius even more? I am on a HD mobile device and the blur effect is there its just not as noticeable as what's in your demo clip. Any assistance would be appreciated!

 

Hello guys ! Kinda putting fresh blood in this topic ^^

After testing out all the shaders provided here (Thank you all you're amazing, I still have no clue how you can make a shader) on my UI elements, I still couldn't find what I was looking for :/

Actually I want a very simple blur effect on a UI image, that can stack up like if I put a blur image on top of it on my UI it will blur even more, and also blur the UI elements that are behind this image, simple, and I could make it work with shaders I tried here, this is good, it works





But another issue arised...

And this issue is VERY WEIRD

Complex explanation :
When I deactivate one of these UI images using the blur shader, it will, ghostly, kindof "set" the minimum Z position of any UI image that is required for the blur effect to apply. So all the blur images that are below that Z position will simply stop working, and only one blur image, the one with the highest Z position, will still work




Like if I deactivate the blur image

Simple explanation :
If I deactivate a blur UI image, all blur UI images will stop working except the one with the highest Z position (???)



And this is, like, VERY WEIRD, Z position should not have any impact on UI elements rendering, I, I don't get it


I used other blur shaders before, and same issue as well

I use Unity 2019.1.1f1

 

Okay I managed to find a solution with this shader, it's not very good quality in my project but at least it solves my problem ^^
https://www.reddit.com/r/Unity3D/comments/a3nysp/i_created_a_blurred_ui_shader_which_supports/

 

Hi, I was looking at this thread to find a background blur UI shader for URP/LWRP in Unity 2020. My render pipeline was complicated such that I wanted to avoid Grab Pass or Graphics Blit. I also wanted to include modern UI/Default shader features like alpha clipping.
I heavily referenced @JohannesMP 's answer to create a shader for my needs:
https://github.com/zephyo/UI-Blur-LWRP-2020



The shader essentially does what @JohannesMP's shader did but does a finer radial search when grabbing pixels, takes in a _BlurTex property that the developer should set, and exposes other properties for fine tuning.

Code (CSharp):

1. Shader "Custom/UIBlur"
2. {
3.  
4.     Properties
5.     {
6.         // Blur properties
7.         [IntRange] _Radius("Blur Radius", Range(0, 64)) = 1
8.         [IntRange] _Step("Step Size", Range(3, 10)) = 4
9.         _Jump("Jump Size", Range(0.0001,0.3)) = 0.1
10.         _BlurTex ("Blurred Texture", 2D) = "white" {}
11.  
12.         // Default properties
13.         [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
14.         _Color ("Tint", Color) = (1,1,1,1)
15.  
16.         _StencilComp ("Stencil Comparison", Float) = 8
17.         _Stencil ("Stencil ID", Float) = 0
18.         _StencilOp ("Stencil Operation", Float) = 0
19.         _StencilWriteMask ("Stencil Write Mask", Float) = 255
20.         _StencilReadMask ("Stencil Read Mask", Float) = 255
21.  
22.         _ColorMask ("Color Mask", Float) = 15
23.  
24.         [Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
25.     }
26.  
27.     SubShader
28.     {
29.         Tags
30.         {
31.             "Queue"="Transparent"
32.             "IgnoreProjector"="True"
33.             "RenderType"="Transparent"
34.             "PreviewType"="Plane"
35.             "CanUseSpriteAtlas"="True"
36.         }
37.  
38.         Stencil
39.         {
40.             Ref [_Stencil]
41.             Comp [_StencilComp]
42.             Pass [_StencilOp]
43.             ReadMask [_StencilReadMask]
44.             WriteMask [_StencilWriteMask]
45.         }
46.  
47.         Cull Off
48.         Lighting Off
49.         ZWrite Off
50.         ZTest [unity_GUIZTestMode]
51.         Blend SrcAlpha OneMinusSrcAlpha
52.         ColorMask [_ColorMask]
53.  
54.         Pass
55.         {
56.             Name "Default"
57.             CGPROGRAM
58.             #pragma vertex vert
59.             #pragma fragment frag
60.             #pragma target 2.0
61.  
62.             #include "UnityCG.cginc"
63.             #include "UnityUI.cginc"
64.  
65.             #pragma multi_compile_local _ UNITY_UI_ALPHACLIP
66.  
67.             struct appdata_t
68.             {
69.                 float4 vertex   : POSITION;
70.                 float4 color    : COLOR;
71.                 float2 texcoord : TEXCOORD0;
72.                 UNITY_VERTEX_INPUT_INSTANCE_ID
73.             };
74.  
75.             struct v2f
76.             {
77.                 float4 vertex   : SV_POSITION;
78.                 fixed4 color    : COLOR;
79.                 float2 texcoord  : TEXCOORD0;
80.                 float4 screenPosition : TEXCOORD1;
81.                 UNITY_VERTEX_OUTPUT_STEREO
82.             };
83.             int _Radius;
84.             float _Step;
85.             float _Jump;
86.             sampler2D _BlurTex;
87.  
88.             sampler2D _MainTex;
89.             fixed4 _Color;
90.             fixed4 _TextureSampleAdd;
91.             float4 _ClipRect;
92.             float4 _MainTex_ST;
93.  
94.             half4 GetBlur(float4 uv, half4 pixel)
95.             {
96.                 #define GrabPixelXY(kernelx, kernely) tex2Dproj(_BlurTex, UNITY_PROJ_COORD(float4(uv.x +  _Jump * kernelx, uv.y + _Jump*kernely, uv.z,uv.w)))
97.              
98.                 float4 sum = GrabPixelXY(0,0);
99.  
100.                 float range = _Step;
101.              
102.                 for (; range <= _Radius; range += _Step)
103.                 {
104.                     for (float i = 0.06; i <= 0.18; i+= 0.03){
105.                         float minus = (0.21-i);
106.                         sum += GrabPixelXY(-range*i, range*minus);
107.                         sum += GrabPixelXY(range*i, -range*minus);
108.                         sum += GrabPixelXY(-range*minus, -range*i);
109.                         sum += GrabPixelXY(range*minus, range*i);
110.                     }
111.                 }
112.  
113.                 half4 result = sum/(_Radius*2+1);
114.                 return result * pixel;
115.             }
116.  
117.             v2f vert(appdata_t v)
118.             {
119.                 v2f OUT;
120.                 UNITY_SETUP_INSTANCE_ID(v);
121.                 UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
122.                 OUT.vertex = UnityObjectToClipPos(v.vertex);
123.                 OUT.screenPosition = ComputeScreenPos(OUT.vertex);
124.  
125.                 OUT.texcoord = TRANSFORM_TEX(v.texcoord, _MainTex);
126.  
127.                 OUT.color = v.color * _Color;
128.                 return OUT;
129.             }
130.  
131.             fixed4 frag(v2f IN) : SV_Target
132.             {
133.                 half4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;
134.  
135.                 #ifdef UNITY_UI_ALPHACLIP
136.                     clip (color.a - 0.001);
137.                 #endif
138.  
139.                 return  GetBlur(IN.screenPosition, color);
140.             }
141.             ENDCG
142.         }
143.     }
144. }

Thanks everyone for the useful advice, who knew blurring could be done so many different ways!

 

Hi, i would like to use the blur shader with upr, but blur ui elements in the background too. Sadly i have no idea how to adjust either one of those shaders or adjust them to do so.
Would it be a few lines to adjust, in either one of the shaders or is it a major task to do it and could someone give me hint where i would have to make the adjustments.

 

thank you all

 

Looking for this too! I do not want to use Post Processing stack for this since it cannot be easily masked for a certain area.

 

@JohannesMP The shader i copied from gist link, is not compiling i am getting errors. how to fix it.

 

You should get the second file too : UIBlur_Shared.cginc

 

No signs of a solution for a screen space camera?
This script works great but only in the editor window, not game window for me =/.

 

this shader turn object to pink!

 

Yeah, i'm also looking for a solution that works with Screen Space Camera, too. And so far, the solutions of this thread either don't work with that scenario or has a massive performance cost.

 

Thanks a lot Dude You've saved may Day!!!

 

pedroahpolonio's is best looking blur. can someone make it maskable and also add an alpha mask of the image to it?
JohannesMP's gist has these features but its blur algorithm doesn't look as good as FrostedGlass shader.