毛玻璃，磨砂玻璃材质，shader笔记

最近需要用到这个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