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

UGUI研究院之Image模糊效果（十八）

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
 
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挂上去。

UGUI研究院之Image模糊效果（十八） - 雨松MOMO程序研究院 - 1

 

看一下效果吧。

UGUI研究院之Image模糊效果（十八） - 雨松MOMO程序研究院 - 2

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

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

最后编辑：
作者：雨松MOMO
专注移动互联网，Unity3D游戏开发
站内专栏 QQ交谈 腾讯微博 新浪微博
捐 赠写博客不易，如果您想请我喝一杯星巴克的话？就进来看吧!

您可能还会对这些文章感兴趣！

《UGUI研究院之Image模糊效果（十八）》有 19 条评论

  1. dong 说：
    2017 年 8 月 31 日下午 12:46

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

    回复
  2. 凯凯哥 说：
    2017 年 3 月 17 日下午 4:57

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

    回复
  3. 低级工程师烧猪 说：
    2016 年 8 月 1 日上午 11:27

    改成高斯模糊是不是效果更好？

    回复
  4. 陆宇杨 说：
    2016 年 5 月 16 日上午 2:04

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

    回复
  5. 盖世杰 说：
    2015 年 12 月 11 日下午 3:01

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

    回复
  6. Frederick_F 说：
    2015 年 7 月 10 日下午 4:11

    请问一下，Ugui可以播放视频吗？

    回复
  7. 那些年 说：
    2015 年 7 月 10 日下午 12:11

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

    回复
  8. 小刘 说：
    2015 年 7 月 9 日下午 12:55

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

    回复

留下一个回复

你的email不会被公开。