毛玻璃，磨砂玻璃材质，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