UI弹框的虚化效果是一个比较常见的需求了,一般我们在处理弹框UI的时候,会留一个半透明的背景用来遮挡弹框底下的图层或者是场景,所以要让背景虚化可以使用这个图片。在这个图片上添加材质和写shader脚本实现模糊效果。原理就是就是每一个像素都取周边像素的平均值。

       
Shader "MyShader/BackBlur" { Properties { [PerRendererData] _MainTex ("Sprite
Texture", 2D) = "white" {} _Color ("Main Color", Color) = (1,1,1,1) _Size
("Size", Range(0, 20)) = 1 } Category { // We must be transparent, so other
objects are drawn before this one. Tags { "Queue"="Transparent"
"IgnoreProjector"="True" "RenderType"="Transparent" "PreviewType" = "Plane"
"CanUseSpriteAtlas" = "True" } SubShader { // Horizontal blur GrabPass { Tags {
"LightMode" = "Always" } } Pass { Tags { "LightMode" = "Always" } Name
"BackBlurHor" CGPROGRAM #pragma vertex vert #pragma fragment frag #pragma
fragmentoption ARB_precision_hint_fastest #include "UnityCG.cginc" struct
appdata_t { float4 vertex : POSITION; float2 texcoord : TEXCOORD0; float4 color
: COLOR; }; struct v2f { float4 vertex : POSITION; float4 uvgrab : TEXCOORD0;
float4 color : COLOR; }; v2f vert (appdata_t v) { v2f o; o.vertex =
UnityObjectToClipPos(v.vertex); #if UNITY_UV_STARTS_AT_TOP float scale = -1.0;
#else float scale = 1.0; #endif o.uvgrab.xy = (float2(o.vertex.x,
o.vertex.y*scale) + o.vertex.w) * 0.5; o.uvgrab.zw = o.vertex.zw; o.color =
v.color; return o; } sampler2D _GrabTexture; float4 _GrabTexture_TexelSize;
float4 _MainTex_TexelSize; float _Size; uniform float4 _Color; // static float
GaussianKernel[9] = { // 0.05, 0.09, 0.12, // 0.15, 0.18, 0.15, // 0.12, 0.09,
0.05 // }; // static float GaussianKernel[19] = { // 0.01, 0.02, 0.03, 0.04,
0.05, 0.06, 0.07, 0.08, 0.09, // 0.1, // 0.09, 0.08, 0.07, 0.06, 0.05, 0.04,
0.03, 0.02, 0.01, // }; // static float GaussianKernelD[19] = { // -9.0, -8.0,
-7.0, -6.0, -5.0, -4.0, -3.0, -2.0, -1.0, // 0.0, // +1.0, +2.0, +3.0, +4.0,
+5.0, +6.0, +7.0, +8.0, +9.0, // }; half4 GrabPixel(v2f i, float weight, float
kernelx){ if (i.uvgrab.x == 0 && i.uvgrab.y == 0){ kernelx = 0; } return
tex2Dproj(_GrabTexture, UNITY_PROJ_COORD(float4(i.uvgrab.x +
_GrabTexture_TexelSize.x*kernelx*_Size, i.uvgrab.y, i.uvgrab.z, i.uvgrab.w))) *
weight; } half4 frag( v2f i ) : COLOR { half4 sum = half4(0,0,0,0); // #define
GRABPIXEL(weight, kernelx) tex2Dproj(_GrabTexture,
UNITY_PROJ_COORD(float4(i.uvgrab.x + _GrabTexture_TexelSize.x * kernelx*_Size,
i.uvgrab.y, i.uvgrab.z, i.uvgrab.w))) * weight sum += GrabPixel(i, 0.05, -4.0);
sum += GrabPixel(i, 0.09, -3.0); sum += GrabPixel(i, 0.12, -2.0); sum +=
GrabPixel(i, 0.15, -1.0); sum += GrabPixel(i, 0.18, 0.0); sum += GrabPixel(i,
0.15, +1.0); sum += GrabPixel(i, 0.12, +2.0); sum += GrabPixel(i, 0.09, +3.0);
sum += GrabPixel(i, 0.05, +4.0); // sum += GrabPixel(i, 0.01, -9.0); // sum +=
GrabPixel(i, 0.02, -8.0); // sum += GrabPixel(i, 0.03, -7.0); // sum +=
GrabPixel(i, 0.04, -6.0); // sum += GrabPixel(i, 0.05, -5.0); // sum +=
GrabPixel(i, 0.06, -4.0); // sum += GrabPixel(i, 0.07, -3.0); // sum +=
GrabPixel(i, 0.08, -2.0); // sum += GrabPixel(i, 0.09, -1.0); // sum +=
GrabPixel(i, 0.10, 0.0); // sum += GrabPixel(i, 0.09, +1.0); // sum +=
GrabPixel(i, 0.08, +2.0); // sum += GrabPixel(i, 0.07, +3.0); // sum +=
GrabPixel(i, 0.06, +4.0); // sum += GrabPixel(i, 0.05, +5.0); // sum +=
GrabPixel(i, 0.04, +6.0); // sum += GrabPixel(i, 0.03, +7.0); // sum +=
GrabPixel(i, 0.02, +8.0); // sum += GrabPixel(i, 0.01, +9.0); float4 col5 =
tex2Dproj(_GrabTexture, UNITY_PROJ_COORD(i.uvgrab)); float decayFactor = 1.0f;
if (i.uvgrab.x == 0 && i.uvgrab.y == 0){ decayFactor = 0; } sum = lerp(col5,
sum, decayFactor) * i.color * _Color; return sum; } ENDCG } // Vertical blur
GrabPass { Tags { "LightMode" = "Always" } } Pass { Tags { "LightMode" =
"Always" } Name "BackBlurVer" CGPROGRAM #pragma vertex vert #pragma fragment
frag #pragma fragmentoption ARB_precision_hint_fastest #include "UnityCG.cginc"
struct appdata_t { float4 vertex : POSITION; float2 texcoord: TEXCOORD0; float4
color : COLOR; }; struct v2f { float4 vertex : POSITION; float4 uvgrab :
TEXCOORD0; float4 color : COLOR; }; v2f vert (appdata_t v) { v2f o; o.vertex =
UnityObjectToClipPos(v.vertex); #if UNITY_UV_STARTS_AT_TOP float scale = -1.0;
#else float scale = 1.0; #endif o.uvgrab.xy = (float2(o.vertex.x,
o.vertex.y*scale) + o.vertex.w) * 0.5; o.uvgrab.zw = o.vertex.zw; o.color =
v.color; return o; } sampler2D _GrabTexture; float4 _GrabTexture_TexelSize;
float _Size; uniform float4 _Color; half4 GrabPixel(v2f i, float weight, float
kernely){ if (i.uvgrab.x == 0 && i.uvgrab.y == 0){ kernely = 0; } return
tex2Dproj( _GrabTexture, UNITY_PROJ_COORD(float4(i.uvgrab.x, i.uvgrab.y +
_GrabTexture_TexelSize.y*kernely*_Size, i.uvgrab.z, i.uvgrab.w))) * weight; }
half4 frag( v2f i ) : COLOR { half4 sum = half4(0,0,0,0); // #define
GRABPIXEL(weight,kernely) tex2Dproj( _GrabTexture,
UNITY_PROJ_COORD(float4(i.uvgrab.x, i.uvgrab.y + _GrabTexture_TexelSize.y *
kernely*_Size, i.uvgrab.z, i.uvgrab.w))) * weight sum += GrabPixel(i, 0.05,
-4.0); sum += GrabPixel(i, 0.09, -3.0); sum += GrabPixel(i, 0.12, -2.0); sum +=
GrabPixel(i, 0.15, -1.0); sum += GrabPixel(i, 0.18, 0.0); sum += GrabPixel(i,
0.15, +1.0); sum += GrabPixel(i, 0.12, +2.0); sum += GrabPixel(i, 0.09, +3.0);
sum += GrabPixel(i, 0.05, +4.0); // sum += GrabPixel(i, 0.01, -9.0); // sum +=
GrabPixel(i, 0.02, -8.0); // sum += GrabPixel(i, 0.03, -7.0); // sum +=
GrabPixel(i, 0.04, -6.0); // sum += GrabPixel(i, 0.05, -5.0); // sum +=
GrabPixel(i, 0.06, -4.0); // sum += GrabPixel(i, 0.07, -3.0); // sum +=
GrabPixel(i, 0.08, -2.0); // sum += GrabPixel(i, 0.09, -1.0); // sum +=
GrabPixel(i, 0.10, 0.0); // sum += GrabPixel(i, 0.09, +1.0); // sum +=
GrabPixel(i, 0.08, +2.0); // sum += GrabPixel(i, 0.07, +3.0); // sum +=
GrabPixel(i, 0.06, +4.0); // sum += GrabPixel(i, 0.05, +5.0); // sum +=
GrabPixel(i, 0.04, +6.0); // sum += GrabPixel(i, 0.03, +7.0); // sum +=
GrabPixel(i, 0.02, +8.0); // sum += GrabPixel(i, 0.01, +9.0); float4 col5 =
tex2Dproj(_GrabTexture, UNITY_PROJ_COORD(i.uvgrab)); float decayFactor = 1.0f;
if (i.uvgrab.x == 0 && i.uvgrab.y == 0){ decayFactor = 0; } sum = lerp(col5,
sum, decayFactor) * i.color * _Color; return sum; } ENDCG } } } }
将这个shader赋值给材质,然后将材质赋值给Image图片,就能看到被图片遮挡的物体被模糊了,模糊的程度通过调节Size来实现想要的效果。

技术
©2019-2020 Toolsou All rights reserved,
【jvm学习】执行引擎python(基本介绍)用户管理和文件权限C++第五章多态性习题:(快大结局了)VHDL——含异步清零和同步使能的加法计数器源程序Windows网络服务渗透测试实战-跨网段攻击JavaScript百炼成仙 1.15 天秀找出游戏的获胜者(java)单片机能做什么,你有什么有单片机或开源硬件做的有意思的作品吗一份笔记让你从 15K 涨薪并跳槽到32K+16