最近需要用到这个shader,就稍微研究了一下,这里做一下笔记,免得回来自己忘了~
思路:
看了不少文章,其实都大同小异,分为3步完成。
1,先建一个平面出来(也可以是个精灵),来显示效果。当然你要是准备做屏幕特效那就当我没说,这里不讨论了,只是用法不同。
2,建立我们的shader,我们先用 unity 自带的 GrabPass 采样到当前平面下的像素数据(你就可以想象成屏幕截图)
3,将抓取到的像素数据进行模糊处理
这里说一下模糊处理需要注意的细节,一般做模糊的时候,我们总会想到用高斯模糊,但是其实这个不是最优选择,因为用高斯的话我们还需要建立高斯核,然后不断的用它去对图像进行滤波,次数越多,图像越模糊。
但是实际情况中发现,如果背景里有棱角分明的图像时(比如ui的框框),发现它模糊后,轮廓还是会比较清晰(也就是不够毛)。
所以还有很多其它的思路,核心思想就是破坏图像,让它变糊~
1:先对图像进行向下采样,再做模糊。
我们先把原始图做低画质处理,比如原图100x100,我们把它采样缩成50x50,然后模糊完了以后,我们再把它放大回100x100。
这里还有个偷懒的招,就是用 unity 的 RenderTexture ,这样可以直接采出来一张小的。
2:使用噪声
这没啥好说的,就是用噪声纹理,来改变像素的分布。
当然我懒,还是网上找了个人家写好的shader,当然它有个小问题,就是图像是上下颠倒的,我们反转一下uv坐标的y轴就可以了,它的实现思路就是对像素进行扰动,偏转uv坐标,以达到模糊的效果。
以下是改好了的shader:
Shader "my/FrostedGlass"
{
Properties
{
_blurSizeXY("BlurSizeXY", Range(0,10)) = 2
}
SubShader
{
// 透明队列,在所有不透明的几何图形后绘制
Tags { "Queue" = "Transparent" }
// 采样后面的图像
GrabPass { }
Pass
{
CGPROGRAM
#pragma target 3.0
#pragma debug
#pragma vertex vert
#pragma fragment frag
sampler2D _GrabTexture : register(s0);
float _blurSizeXY;
struct data
{
float4 vertex : POSITION;
float3 normal : NORMAL;
};
struct v2f
{
float4 position : POSITION;
float4 screenPos : TEXCOORD0;
};
v2f vert(data i)
{
v2f o;
o.position = mul(UNITY_MATRIX_MVP, i.vertex);
o.screenPos = float4(o.position.x, -o.position.y, o.position.z, o.position.w);
return o;
}
half4 frag( v2f i ) : COLOR
{
float2 screenPos = i.screenPos.xy / i.screenPos.w;
float depth= _blurSizeXY * 0.0005;
screenPos.x = (screenPos.x + 1) * 0.5;
screenPos.y = 1 - (screenPos.y + 1) * 0.5;
half4 sum = half4(0,0,0,0);
sum += tex2D( _GrabTexture, float2(screenPos.x-5.0 * depth, screenPos.y+5.0 * depth)) * 0.025;
sum += tex2D( _GrabTexture, float2(screenPos.x+5.0 * depth, screenPos.y-5.0 * depth)) * 0.025;
sum += tex2D( _GrabTexture, float2(screenPos.x-4.0 * depth, screenPos.y+4.0 * depth)) * 0.05;
sum += tex2D( _GrabTexture, float2(screenPos.x+4.0 * depth, screenPos.y-4.0 * depth)) * 0.05;
sum += tex2D( _GrabTexture, float2(screenPos.x-3.0 * depth, screenPos.y+3.0 * depth)) * 0.09;
sum += tex2D( _GrabTexture, float2(screenPos.x+3.0 * depth, screenPos.y-3.0 * depth)) * 0.09;
sum += tex2D( _GrabTexture, float2(screenPos.x-2.0 * depth, screenPos.y+2.0 * depth)) * 0.12;
sum += tex2D( _GrabTexture, float2(screenPos.x+2.0 * depth, screenPos.y-2.0 * depth)) * 0.12;
sum += tex2D( _GrabTexture, float2(screenPos.x-1.0 * depth, screenPos.y+1.0 * depth)) * 0.15;
sum += tex2D( _GrabTexture, float2(screenPos.x+1.0 * depth, screenPos.y-1.0 * depth)) * 0.15;
sum += tex2D( _GrabTexture, screenPos-5.0 * depth) * 0.025;
sum += tex2D( _GrabTexture, screenPos-4.0 * depth) * 0.05;
sum += tex2D( _GrabTexture, screenPos-3.0 * depth) * 0.09;
sum += tex2D( _GrabTexture, screenPos-2.0 * depth) * 0.12;
sum += tex2D( _GrabTexture, screenPos-1.0 * depth) * 0.15;
sum += tex2D( _GrabTexture, screenPos) * 0.16;
sum += tex2D( _GrabTexture, screenPos+5.0 * depth) * 0.15;
sum += tex2D( _GrabTexture, screenPos+4.0 * depth) * 0.12;
sum += tex2D( _GrabTexture, screenPos+3.0 * depth) * 0.09;
sum += tex2D( _GrabTexture, screenPos+2.0 * depth) * 0.05;
sum += tex2D( _GrabTexture, screenPos+1.0 * depth) * 0.025;
return sum / 2;
}
ENDCG
}
}
Fallback Off
}
不过方法都是大同小异,先采样屏幕,然后对采样到的像素数据想法设法的把它搞糊,就可以了,2333。然后我们看看效果图
模糊前:
模糊后:
PS:这骗文章写的不错,想了解更多的,可以看看
http://www.tuicool.com/articles/ZvQzAfF