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

2019-11-07 22:49:58

字体：大中小

来源：转载

供稿：网友

最近需要用到这个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。然后我们看看效果图

模糊前：这里写图片描述