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

总结

以上是生活随笔为你收集整理的毛玻璃，磨砂玻璃材质，shader笔记的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。