Unity3D-UGUI特效之Image的高斯模糊效果

最新推荐文章于 2024-03-06 11:22:41 发布
最新推荐文章于 2024-03-06 11:22:41 发布
阅读量2.3w 收藏 60
点赞数 15
分类专栏： Unity3D Shader Unity摸索记录 文章标签： Unity3D UGUI Image 模糊 高斯模糊
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pz789as/article/details/79050631
版权

这几天研究了下模糊特效，看了很多文章，其原理就是拿取图片或屏幕数据，然后将周围的元素和目标位置的颜色值进行一个融合计算，然后自己写了一个小小的测试程序。

这个模糊也可以分成两种，一个是自身模糊，一个是从屏幕上取值进行模糊。第一个用于一些小的列表展示，比如未解锁时，是模糊的。第二个是凸显弹框效果的，将背景都模糊掉，自己将这个稍微加强了些可以指定模糊一个位置。

针对移动平台，使用高斯模糊，其实效率不是很高，如果要很好的效果，那么速度卡；如果要速度快，那么效果达不到要求。但是还是在这里记录下，兴许以后能用上。

先说第一个，挂在Image下的模糊特效。

Shader "Custom/FrontBlur" {
	Properties
	{
		[PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
		_Color ("Tint", Color) = (1,1,1,1)
		
		[HideInInspector]_StencilComp ("Stencil Comparison", Float) = 8
		[HideInInspector]_Stencil ("Stencil ID", Float) = 0
		[HideInInspector]_StencilOp ("Stencil Operation", Float) = 0
		[HideInInspector]_StencilWriteMask ("Stencil Write Mask", Float) = 255
		[HideInInspector]_StencilReadMask ("Stencil Read Mask", Float) = 255

		[HideInInspector]_ColorMask ("Color Mask", Float) = 15

		[Toggle(UNITY_UI_ALPHACLIP)] _UseUIAlphaClip ("Use Alpha Clip", Float) = 0
		
		_Size ("Size", Range(0, 50)) = 5
	}

	SubShader
	{
		Tags
		{ 
			"Queue"="Transparent" 
			"IgnoreProjector"="True" 
			"RenderType"="Transparent" 
			"PreviewType"="Plane"
			"CanUseSpriteAtlas"="True"
		}
		
		Stencil
		{
			Ref [_Stencil]
			Comp [_StencilComp]
			Pass [_StencilOp] 
			ReadMask [_StencilReadMask]
			WriteMask [_StencilWriteMask]
		}

		Cull Off
		Lighting Off
		ZWrite Off
		ZTest [unity_GUIZTestMode]
		Blend SrcAlpha OneMinusSrcAlpha
		ColorMask [_ColorMask]

		Pass
		{
			Name "FrontBlurHor"
		CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#pragma target 2.0

			#include "UnityCG.cginc"
			#include "UnityUI.cginc"

			#pragma multi_compile __ UNITY_UI_ALPHACLIP
			
			struct appdata_t
			{
				float4 vertex   : POSITION;
				float4 color    : COLOR;
				float2 texcoord : TEXCOORD0;
				UNITY_VERTEX_INPUT_INSTANCE_ID
			};

			struct v2f
			{
				float4 vertex   : SV_POSITION;
				fixed4 color    : COLOR;
				float2 texcoord  : TEXCOORD0;
				float4 worldPosition : TEXCOORD1;
				UNITY_VERTEX_OUTPUT_STEREO
			};
			
			fixed4 _Color;
			fixed4 _TextureSampleAdd;
			float4 _ClipRect;

			v2f vert(appdata_t IN)
			{
				v2f OUT;
				UNITY_SETUP_INSTANCE_ID(IN);
				UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
				OUT.worldPosition = IN.vertex;
				OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);

				OUT.texcoord = IN.texcoord;
				
				OUT.color = IN.color * _Color;
				return OUT;
			}

			sampler2D _MainTex;
			float4 _MainTex_TexelSize;
			float _Size;

			half4 GrabPixel(v2f i, float weight, float kernelx){
				if (_Size <= 1 || weight == 0){
					return tex2D(_MainTex, half2(i.texcoord.x + _MainTex_TexelSize.x*kernelx*_Size, i.texcoord.y)) * weight;
				}else{
					half4 sum = half4(0,0,0,0);
					sum += tex2D(_MainTex, half2(i.texcoord.x + _MainTex_TexelSize.x*kernelx*_Size*0.2, i.texcoord.y))*0.2;
					sum += tex2D(_MainTex, half2(i.texcoord.x + _MainTex_TexelSize.x*kernelx*_Size*0.4, i.texcoord.y))*0.2;
					sum += tex2D(_MainTex, half2(i.texcoord.x + _MainTex_TexelSize.x*kernelx*_Size*0.6, i.texcoord.y))*0.2;
					sum += tex2D(_MainTex, half2(i.texcoord.x + _MainTex_TexelSize.x*kernelx*_Size*0.8, i.texcoord.y))*0.2;
					sum += tex2D(_MainTex, half2(i.texcoord.x + _MainTex_TexelSize.x*kernelx*_Size*1.0, i.texcoord.y))*0.2;
					return (sum + _TextureSampleAdd) * weight;
				}
			}

			half4 GrabPixely(v2f i, float weight, float kernely){
				if (_Size <= 1 || weight == 0){
					return tex2D(_MainTex, half2(i.texcoord.x, i.texcoord.y + _MainTex_TexelSize.y*kernely*_Size)) * weight;
				}else{
					half4 sum = half4(0,0,0,0);
					sum += tex2D(_MainTex, half2(i.texcoord.x, i.texcoord.y + _MainTex_TexelSize.y*kernely*_Size*0.2))*0.2;
					sum += tex2D(_MainTex, half2(i.texcoord.x, i.texcoord.y + _MainTex_TexelSize.y*kernely*_Size*0.4))*0.2;
					sum += tex2D(_MainTex, half2(i.texcoord.x, i.texcoord.y + _MainTex_TexelSize.y*kernely*_Size*0.6))*0.2;
					sum += tex2D(_MainTex, half2(i.texcoord.x, i.texcoord.y + _MainTex_TexelSize.y*kernely*_Size*0.8))*0.2;
					sum += tex2D(_MainTex, half2(i.texcoord.x, i.texcoord.y + _MainTex_TexelSize.y*kernely*_Size*1.0))*0.2;
					return (sum + _TextureSampleAdd) * weight;
				}
			}

			fixed4 frag(v2f IN) : SV_Target
			{
				half4 sum = half4(0,0,0,0);
				// #define GRABPIXEL(weight, kernelx) (tex2D(_MainTex, half2(IN.texcoord.x + _MainTex_TexelSize.x * kernelx*_Size, IN.texcoord.y)) + _TextureSampleAdd) * weight
				
				// sum += GrabPixel(IN, 0.05, -4.0);
				// sum += GrabPixel(IN, 0.09, -3.0);
				// sum += GrabPixel(IN, 0.12, -2.0);
				// sum += GrabPixel(IN, 0.15, -1.0);
				// sum += GrabPixel(IN, 0.18,  0.0);
				// sum += GrabPixel(IN, 0.15, +1.0);
				// sum += GrabPixel(IN, 0.12, +2.0);
				// sum += GrabPixel(IN, 0.09, +3.0);
				// sum += GrabPixel(IN, 0.05, +4.0);

				for(int i=0;i<9;i++){
					sum += GrabPixel(IN, 1.0/9, i-4.0);
				}

				// half4 sumy = half4(0,0,0,0);
				// for(int i=0;i<15;i++){
				// 	sumy += GrabPixely(IN, 1.0/15, i-7.0);
				// }
				// half4 sum = (sumx + sumy) * 0.5;

				// sum += GrabPixel(IN, 0.01, -9.0);
				// sum += GrabPixel(IN, 0.02, -8.0);
				// sum += GrabPixel(IN, 0.03, -7.0);
				// sum += GrabPixel(IN, 0.04, -6.0);
				// sum += GrabPixel(IN, 0.05, -5.0);
				// sum += GrabPixel(IN, 0.06, -4.0);
				// sum += GrabPixel(IN, 0.07, -3.0);
				// sum += GrabPixel(IN, 0.08, -2.0);
				// sum += GrabPixel(IN, 0.09, -1.0);
				// sum += GrabPixel(IN, 0.10,  0.0);
				// sum += GrabPixel(IN, 0.09, +1.0);
				// sum += GrabPixel(IN, 0.08, +2.0);
				// sum += GrabPixel(IN, 0.07, +3.0);
				// sum += GrabPixel(IN, 0.06, +4.0);
				// sum += GrabPixel(IN, 0.05, +5.0);
				// sum += GrabPixel(IN, 0.04, +6.0);
				// sum += GrabPixel(IN, 0.03, +7.0);
				// sum += GrabPixel(IN, 0.02, +8.0);
				// sum += GrabPixel(IN, 0.01, +9.0);

				sum = sum * IN.color;
				sum.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
				#ifdef UNITY_UI_ALPHACLIP
				clip (sum.a - 0.001);
				#endif
				return sum;

				// float distance = _Distance;

				// fixed4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;

				// color += (tex2D(_MainTex, half2(IN.texcoord.x + distance, IN.texcoord.y + distance)) + _TextureSampleAdd) * IN.color;
				// color += (tex2D(_MainTex, half2(IN.texcoord.x + distance, IN.texcoord.y)) + _TextureSampleAdd) * IN.color;
				// color += (tex2D(_MainTex, half2(IN.texcoord.x + distance, IN.texcoord.y - distance)) + _TextureSampleAdd) * IN.color;
				// color += (tex2D(_MainTex, half2(IN.texcoord.x, IN.texcoord.y - distance)) + _TextureSampleAdd) * IN.color;
				// color += (tex2D(_MainTex, half2(IN.texcoord.x - distance, IN.texcoord.y - distance)) + _TextureSampleAdd) * IN.color;
				// color += (tex2D(_MainTex, half2(IN.texcoord.x - distance, IN.texcoord.y)) + _TextureSampleAdd) * IN.color;
				// color += (tex2D(_MainTex, half2(IN.texcoord.x - distance, IN.texcoord.y + distance)) + _TextureSampleAdd) * IN.color;
				// color += (tex2D(_MainTex, half2(IN.texcoord.x, IN.texcoord.y + distance)) + _TextureSampleAdd) * IN.color;
				// color /= 9;
				
				// color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
				
				// #ifdef UNITY_UI_ALPHACLIP
				// clip (color.a - 0.001);
				// #endif

				// return color;
			}
		ENDCG
		}
		Pass
		{
			Name "FrontBlurVer"
		CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#pragma target 2.0

			#include "UnityCG.cginc"
			#include "UnityUI.cginc"

			#pragma multi_compile __ UNITY_UI_ALPHACLIP
			
			struct appdata_t
			{
				float4 vertex   : POSITION;
				float4 color    : COLOR;
				float2 texcoord : TEXCOORD0;
				UNITY_VERTEX_INPUT_INSTANCE_ID
			};

			struct v2f
			{
				float4 vertex   : SV_POSITION;
				fixed4 color    : COLOR;
				float2 texcoord  : TEXCOORD0;
				float4 worldPosition : TEXCOORD1;
				UNITY_VERTEX_OUTPUT_STEREO
			};
			
			fixed4 _Color;
			fixed4 _TextureSampleAdd;
			float4 _ClipRect;

			v2f vert(appdata_t IN)
			{
				v2f OUT;
				UNITY_SETUP_INSTANCE_ID(IN);
				UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(OUT);
				OUT.worldPosition = IN.vertex;
				OUT.vertex = UnityObjectToClipPos(OUT.worldPosition);

				OUT.texcoord = IN.texcoord;
				
				OUT.color = IN.color * _Color;
				return OUT;
			}

			sampler2D _MainTex;
			float4 _MainTex_TexelSize;
			float _Size;

			half4 GrabPixel(v2f i, float weight, float kernely){
				if (_Size <= 1 || weight == 0){
					return tex2D(_MainTex, half2(i.texcoord.x, i.texcoord.y + _MainTex_TexelSize.y*kernely*_Size)) * weight;
				}else{
					half4 sum = half4(0,0,0,0);
					sum += tex2D(_MainTex, half2(i.texcoord.x, i.texcoord.y + _MainTex_TexelSize.y*kernely*_Size*0.2))*0.2;
					sum += tex2D(_MainTex, half2(i.texcoord.x, i.texcoord.y + _MainTex_TexelSize.y*kernely*_Size*0.4))*0.2;
					sum += tex2D(_MainTex, half2(i.texcoord.x, i.texcoord.y + _MainTex_TexelSize.y*kernely*_Size*0.6))*0.2;
					sum += tex2D(_MainTex, half2(i.texcoord.x, i.texcoord.y + _MainTex_TexelSize.y*kernely*_Size*0.8))*0.2;
					sum += tex2D(_MainTex, half2(i.texcoord.x, i.texcoord.y + _MainTex_TexelSize.y*kernely*_Size*1.0))*0.2;
					return (sum + _TextureSampleAdd) * weight;
				}
			}

			fixed4 frag(v2f IN) : SV_Target
			{
				half4 sum = half4(0,0,0,0);  
				// #define GRABPIXEL(weight, kernely) (tex2D(_MainTex, half2(IN.texcoord.x, IN.texcoord.y + _MainTex_TexelSize.y * kernely*_Size)) + _TextureSampleAdd) * weight
				
				// sum += GrabPixel(IN, 0.05, -4.0);
				// sum += GrabPixel(IN, 0.09, -3.0);
				// sum += GrabPixel(IN, 0.12, -2.0);
				// sum += GrabPixel(IN, 0.15, -1.0);
				// sum += GrabPixel(IN, 0.18,  0.0);
				// sum += GrabPixel(IN, 0.15, +1.0);
				// sum += GrabPixel(IN, 0.12, +2.0);
				// sum += GrabPixel(IN, 0.09, +3.0);
				// sum += GrabPixel(IN, 0.05, +4.0);

				for(int i=0;i<9;i++){
					sum += GrabPixel(IN, 1.0/9, i-4.0);
				}

				// sum += GrabPixel(IN, 0.01, -9.0);
				// sum += GrabPixel(IN, 0.02, -8.0);
				// sum += GrabPixel(IN, 0.03, -7.0);
				// sum += GrabPixel(IN, 0.04, -6.0);
				// sum += GrabPixel(IN, 0.05, -5.0);
				// sum += GrabPixel(IN, 0.06, -4.0);
				// sum += GrabPixel(IN, 0.07, -3.0);
				// sum += GrabPixel(IN, 0.08, -2.0);
				// sum += GrabPixel(IN, 0.09, -1.0);
				// sum += GrabPixel(IN, 0.10,  0.0);
				// sum += GrabPixel(IN, 0.09, +1.0);
				// sum += GrabPixel(IN, 0.08, +2.0);
				// sum += GrabPixel(IN, 0.07, +3.0);
				// sum += GrabPixel(IN, 0.06, +4.0);
				// sum += GrabPixel(IN, 0.05, +5.0);
				// sum += GrabPixel(IN, 0.04, +6.0);
				// sum += GrabPixel(IN, 0.03, +7.0);
				// sum += GrabPixel(IN, 0.02, +8.0);
				// sum += GrabPixel(IN, 0.01, +9.0);

				sum = sum * IN.color;
				sum.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
				#ifdef UNITY_UI_ALPHACLIP
				clip (sum.a - 0.001);
				#endif
				return sum;

				// float distance = _Distance;

				// fixed4 color = (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd) * IN.color;

				// color += (tex2D(_MainTex, half2(IN.texcoord.x + distance, IN.texcoord.y + distance)) + _TextureSampleAdd) * IN.color;
				// color += (tex2D(_MainTex, half2(IN.texcoord.x + distance, IN.texcoord.y)) + _TextureSampleAdd) * IN.color;
				// color += (tex2D(_MainTex, half2(IN.texcoord.x + distance, IN.texcoord.y - distance)) + _TextureSampleAdd) * IN.color;
				// color += (tex2D(_MainTex, half2(IN.texcoord.x, IN.texcoord.y - distance)) + _TextureSampleAdd) * IN.color;
				// color += (tex2D(_MainTex, half2(IN.texcoord.x - distance, IN.texcoord.y - distance)) + _TextureSampleAdd) * IN.color;
				// color += (tex2D(_MainTex, half2(IN.texcoord.x - distance, IN.texcoord.y)) + _TextureSampleAdd) * IN.color;
				// color += (tex2D(_MainTex, half2(IN.texcoord.x - distance, IN.texcoord.y + distance)) + _TextureSampleAdd) * IN.color;
				// color += (tex2D(_MainTex, half2(IN.texcoord.x, IN.texcoord.y + distance)) + _TextureSampleAdd) * IN.color;
				// color /= 9;
				
				// color.a *= UnityGet2DClipping(IN.worldPosition.xy, _ClipRect);
				
				// #ifdef UNITY_UI_ALPHACLIP
				// clip (color.a - 0.001);
				// #endif

				// return color;
			}
		ENDCG
		}
	}
}
里面分了两个Pass来计算，这样算出的效果会好很多，然后里面试了跟多的计算，越多的分层，那么得到的效果也越高，也意味着更加的不流畅。将shader放到一个新建的材质球上，然后把材质拖到Image组件的Material属性栏上就可以了。


看看效果：



然后说第二个方式，它是将背景都给模糊的效果。

Shader "Custom/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组件的Material属性栏中即可，这里你可以调整Image的宽高，这样可以指定模糊那一块区域了。

看效果：

然后我移动和调整宽高之后：


当然也可以调成整屏模糊：






苏小败在路上
关注
  • 15
    点赞
  • 踩
  • 60
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 12
    评论
专栏目录
Unity UGUI Text竖排显示
07-11
很不错
Unity UI图片实现模糊功能
SnoopyNa2Co3的博客
08-06 1799
原理：其实就是获取图片，然后根据偏移获取不同像素，然后根据不同的透明度叠加得出一张模糊图 我这里没有优化正常情况用一个pass就足够 先上个图 拖动材质球Blur Size参数就有如上图效果 下面完整的shader，注意材质球要调渲染层3000就可以使用（PS：移动平台验证过可以使用） Shader "Effect/ImageBlur" { Properties { _Ma...
Unity背景模糊图片高斯模糊高性能的实现方案
最新发布
C#
03-06 833
【代码】Unity背景模糊图片高斯模糊高性能的实现方案。
Unity 高斯模糊(Gaussian Blur) 在UGUI中[高效][易用][效果棒]的实用方案
04-19
2019-04-19 新鲜出炉的原创作品 超实用的 Unity 高斯模糊(Gaussian Blur) 在UGUI中[高效][易用][效果棒]的实用方案 原文地址：https://blog.csdn.net/weixin_43452343/article/details/89407650 应该就是你想要
Unity3D UGUI特效之Image高斯模糊效果
08-26
主要为大家详细介绍了Unity3D UGUI特效之Image高斯模糊效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
unity3d-UGUI仿3D滑动
06-08
Unity3d仿3D滑动很真实,基于UGUI实现 例如卡牌的选择，关卡选择都能使用。
unity之模糊UI背景
qq_37524903的博客
08-16 1816
3.调节材质球的Size可以调节模糊程度。值越大，效果越模糊。2.创建材质球和shader 并赋值上去。
Unity UI界面局部模糊
sinat_34014668的博客
08-31 2940
UI界面局部模糊
Unity3D实现Camera镜头高斯模糊（Blur）和UGUI Image高斯模糊（Blur）效果
lcy的博客
11-08 7707
前言 高斯模糊是非常常用的一种特效，比如说营造景深或者毛玻璃等效果都可以使用。下面介绍一下镜头和UI上的使用。 1.Camera上的镜头特效 摄像机上可以通过两款特效插件非常方便的实现这种效果。第一款插件就是经典的ImageEffect，可以在镜头下添加BlurOptimized组件轻松的实现，具体的效果可以通过改变参数调节。第二款插件是PostProcess，它是第一款插件的升级版，功能也更加丰...
Unity自定义后处理——模糊效果
阿赵的博客
07-20 1363
继续介绍后处理的做法，这一期介绍的是模糊效果的做法。
【Unity】URP屏幕后处理UI模糊效果实现
两水先木示的博客
09-01 2845
主要以上内容，实际上就是因为Render Pass Event是只能After Rendering Transpanrets在透明物体渲染完成后进行屏幕后处理模糊，导致无法实现置顶UI高清，底下UI模糊的需求，如果可以控制这个后处理时机是在置顶UI渲染之前进行后处理，等后处理完成后再渲染指定UI 那就可以，然而...1个Canvas和2个摄像机。Shader代码实现模糊。
unity-ugui-XCharts-master.zip
12-10
unity插件 带各种常用的图表 饼图 折线图 柱状图等等 可以适用于2d和3d展示 开放了所有接口 可以自定义
Unity3d UGUI半透明或线性渐变图片显示不正常（模糊）问题解决（颜色空间不匹配）
qq_33789001的博客
03-01 4415
问题 如题的问题，之前没遇到过，透明渐变的图片在预览和各种软件上查看都很正常，但是放入UGUI上就有模糊的问题。 在Inspector上（正常）： 放到UGUI下： 各项设置都是默认： 解决方法 花了大半天时间才找到问题的点是颜色空间（Color Space） 这里给两种程序最省事的方法，嘎嘎。 修改为Gamma 因为我的工程是渲染给的工程，他修改过颜色空间为Linear，修改为Gamma后图片模糊的问题解决： 但是场景渲染效果可能有折扣，这个需要自己去协调。 设计工具颜色空间 要在PS上使用线性
unity 手机 模糊效果_几个unity效果
weixin_39544333的博客
11-25 162
由于项目需要，逐渐转向ue。之前做的一些unity效果（不包含在公司做的），选了几个稍有趣味性的，放这儿留作纪念。（并不代表我不再看好unity，只是工作需要，unity的灵活性NO.1，我会继续用unity做独立游戏）焦散效果（2018-8-19）：RT+卷积。本专栏logo就是从这里截的。https://www.zhihu.com/video/1224731429151793152翻页效果（2...
unity webgl网页运行后屏幕模糊，UI无响应问题解决
qq_45750353的博客
05-12 1475
设置垂直同步的意义在于防止画面高速高比例变换下的上一帧未渲染完成、下一帧已开始渲染导致的画面撕裂问题。打包运行后，打开网页，画面停留在第一帧，极其模糊，UI点击无响应，但鼠标点击音效正常播放。刚开始以为是前端代码被我玩坏了，还原h5文件与CSS文件后，问题未解决。2.Every Second V Blank：帧率30，手动设置无效。2.Every V Blank：帧率60，手动设置无效。1.Don’t Sync：关闭垂直同步，手动设置帧率。所以大概是‘帧’的问题？运行后，帧率稳定在100上下，呵呵。
【游戏开发实战】Unity ShaderGraph实现图片的高斯模糊效果
linxinfa的专栏
01-05 1万+
文章目录一、前言二、最终效果三、高斯模糊的原理四、ShaderGraph的高斯模糊实现 一、前言 之前我写了一篇文章：ShaderGraph使用教程与各种特效案例：Unity2020 有网友私信问我下面这个问题： 使用ShaderGraph如何实现高斯模糊的效果呢？今天我就来写下实现过程。 二、最终效果 Demo工程已上传到GitHub，地址：https://github.com/linxinfa/UnityShaderGraphGaussBlurDemo 三、高斯模糊的原理 对图片进行模糊处理，简单
【游戏开发小技】Unity通过UI全屏图来模糊场景画面（Shader | 模糊 | 滤镜 | Blur）
热门推荐
linxinfa的专栏
02-14 1万+
【游戏开发小技】Unity通过UI全屏图来模糊场景画面（Shader | 模糊 | 滤镜 | Blur）
Unity UGUI高斯模糊背景效果 简易解决方案
SaberZG的博客
11-18 1万+
UnityUI背景模糊效果简易解决方案1.功能描述简易界面框架搭建合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 1.功能描述 在我们玩游戏的时候，经常会看到一些游戏会对UI做这样的处理： 可以看到，新开的上层UI界面会以下层UI界面的模糊
【Unity Image Effect】Blur 模糊效果
onelei的博客
09-23 4713
Unity背景模糊效果实现技术 最开始是想自己写Shader做模糊处理，网上也参考了很多Shader的实现，发现效果都不理想。C#代码做高斯模糊处理效果也差强人意。而且UI界面打开的时候如果做背景模糊，处理耗时太长。后来发现Unity的assetstore里面的Legacy Image Effects插件有相机模糊处理功能，因此打算尝试一下。将该插件导入
unity-ugui制作表格
10-27
Unity-UGUI是Unity游戏引擎中的一个UI系统，可以用来创建和管理用户界面。它提供了丰富的功能和工具，使得开发者能够轻松地制作各种表格。 使用Unity-UGUI制作表格的步骤如下： 1. 创建Canvas对象：在Unity中，首先需要创建一个Canvas对象，作为UI渲染的容器。选择GameObject -> UI -> Canvas，即可创建一个Canvas对象。 2. 添加Table组件：选择Canvas对象，在Inspector面板中点击"Add Component"按钮，然后在搜索栏中输入"Table"，选择适合的Table组件，点击添加。 3. 设置表格的行列数：在Table组件的Inspector面板中，设置表格所需的行数和列数。 4. 设置表格样式：可以在Inspector面板中设置表格的颜色、大小等属性，以满足具体需求。 5. 添加表格内容：可以通过代码或者拖拽方式，向表格中添加所需的文本或图片。可以通过操作表格的行列索引，将内容放置在特定的位置。 6. 设置表格的交互性：可以为表格中的每个单元格添加点击事件或其他交互效果，提升用户体验。 7. 调整表格布局：可以通过调整Canvas的大小、位置，或者改变组件之间的层次关系，来调整表格的布局。 8. 完善表格功能：可以根据具体需求，添加更多表格的功能，比如排序、过滤、搜索等。 9. 测试和优化：在表格制作完成后，可以进行测试，查看表格的显示效果和交互效果，并进行优化。 总之，使用Unity-UGUI制作表格，只需简单的操作和设置，就能够创建出各种样式、功能丰富的表格，满足游戏或应用程序的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

苏小败在路上

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值