Search Unity

  1. Good news ✨ We have more Unite Now videos available for you to watch on-demand! Come check them out and ask our experts any questions!
    Dismiss Notice

[Solved] Dynamic Blurred Background on UI

Discussion in 'UGUI & TextMesh Pro' started by Plexus1, Aug 2, 2015.

  1. chaosmonger

    chaosmonger

    Joined:
    Jan 23, 2019
    Posts:
    24
    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!
     
  2. AcYuan

    AcYuan

    Joined:
    Dec 12, 2018
    Posts:
    1
    It doesn't work on the Canvas with [Screen Space-Camera] Rendering Mode, How to solve this problem?
     
  3. scorp2007

    scorp2007

    Joined:
    Aug 17, 2014
    Posts:
    42
    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?
     
  4. Le_Tai

    Le_Tai

    Joined:
    Jun 20, 2014
    Posts:
    374
    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.
     
  5. bekiryanik

    bekiryanik

    Joined:
    Jul 6, 2014
    Posts:
    188
    Thank you so much for this effect! It is really what i am looking for :)

     
  6. jesscorp

    jesscorp

    Joined:
    May 16, 2019
    Posts:
    2
    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!
     
  7. Kaldrin

    Kaldrin

    Joined:
    Jul 10, 2018
    Posts:
    8
    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

    upload_2020-3-20_18-11-24.png
    upload_2020-3-20_18-11-35.png


    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

    upload_2020-3-20_18-14-3.png


    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
     

    Attached Files:

  8. Kaldrin

    Kaldrin

    Joined:
    Jul 10, 2018
    Posts:
    8
  9. zephybite0

    zephybite0

    Joined:
    Apr 25, 2018
    Posts:
    4
    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!
     
    JohannesMP and Stardog like this.
unityunity