首页 >Unity3D频道 >【UGUI研究院】 > UGUI研究院之Image模糊效果(十八)
2015
06-24

UGUI研究院之Image模糊效果(十八)

先去unity官网上把对应unity版本的UI着色器都下载下来。然后对其进行一番简单的修改,/–add–之间的内容就是我添加的。

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

		_ColorMask ("Color Mask", Float) = 15
        //--------------add------------------
        _Distance ("Distance", Float) = 0.015
        //--------------add------------------
	}

	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]
		Fog { Mode Off }
		Blend SrcAlpha OneMinusSrcAlpha
		ColorMask [_ColorMask]

		Pass
		{
		CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#include "UnityCG.cginc"
			
			struct appdata_t
			{
				float4 vertex   : POSITION;
				float4 color    : COLOR;
				float2 texcoord : TEXCOORD0;
			};

			struct v2f
			{
				float4 vertex   : SV_POSITION;
				fixed4 color    : COLOR;
				half2 texcoord  : TEXCOORD0;
			};
			
			fixed4 _Color;

			v2f vert(appdata_t IN)
			{
				v2f OUT;
				OUT.vertex = mul(UNITY_MATRIX_MVP, IN.vertex);
				OUT.texcoord = IN.texcoord;
#ifdef UNITY_HALF_TEXEL_OFFSET
				OUT.vertex.xy += (_ScreenParams.zw-1.0)*float2(-1,1);
#endif
				OUT.color = IN.color * _Color;
				return OUT;
			}

			sampler2D _MainTex;
            //--------------add------------------
            float _Distance;
            //--------------add------------------
			fixed4 frag(v2f IN) : SV_Target
			{
//				//half4 color = tex2D(_MainTex, IN.texcoord) * IN.color;
//				//clip (color.a - 0.01);
//				//return color;

                //--------------add------------------
                float distance = _Distance;
                fixed4 computedColor = tex2D(_MainTex, IN.texcoord) * IN.color;
                computedColor += tex2D(_MainTex, half2(IN.texcoord.x + distance , IN.texcoord.y + distance )) * IN.color;
                computedColor += tex2D(_MainTex, half2(IN.texcoord.x + distance , IN.texcoord.y)) * IN.color;
                computedColor += tex2D(_MainTex, half2(IN.texcoord.x , IN.texcoord.y + distance )) * IN.color;
                computedColor += tex2D(_MainTex, half2(IN.texcoord.x - distance , IN.texcoord.y - distance )) * IN.color;
                computedColor += tex2D(_MainTex, half2(IN.texcoord.x + distance , IN.texcoord.y - distance )) * IN.color;
                computedColor += tex2D(_MainTex, half2(IN.texcoord.x - distance , IN.texcoord.y + distance )) * IN.color;
                computedColor += tex2D(_MainTex, half2(IN.texcoord.x - distance , IN.texcoord.y)) * IN.color;
                computedColor += tex2D(_MainTex, half2(IN.texcoord.x , IN.texcoord.y - distance )) * IN.color;
                computedColor = computedColor / 9;
                return computedColor;
                //--------------add------------------
			}
		ENDCG
		}
	}
}

然后在创建一个材质把这个Shader挂上去。

Snip20150624_1

 

看一下效果吧。

Snip20150624_2

如果运行时想改的话就封装一个方法来动态的更换材质即可,欢迎大家测试看看效率如何。

参考:http://www.zedia.net/2013/blur-filter-for-uitexture-in-ngui/

最后编辑:
作者:雨松MOMO
专注移动互联网,Unity3D游戏开发
捐 赠写博客不易,如果您想请我喝一杯星巴克的话?就进来看吧!

UGUI研究院之Image模糊效果(十八)》有 19 条评论

  1. dong说:

    这个模糊效果不是很好,只叠加了distance上的那个点,改成叠加范围内所有点是不是会好很多

  2. 凯凯哥说:

    你这只是模糊了一层Image,用_GrabTexture应该可以模糊背面所有UI吧

  3. 改成高斯模糊是不是效果更好?

  4. 陆宇杨说:

    我加了一些shader,grey,发光,都么效果,加载materail和没加一样,有人知道原因么

  5. 盖世杰说:

    我想问。。。这个效果不能通过DOTween来实现的么

  6. 请问一下,Ugui可以播放视频吗?

  7. 那些年说:

    打扰一下, 请问这些着色器对应的资源在官网哪里下载呢。。我找了半天没找到。不好意思

  8. 小刘说:

    请教一下 Shader error in ‘CustomUI/Default’: Program ‘vert’, error X3501: ‘vert’: entrypoint not found (on d3d9)Compiling Vertex program为何报这个错呢

留下一个回复

你的email不会被公开。 必填项已用 * 标注。