毛玻璃，磨砂玻璃材质，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笔记相关推荐

外发光材质Shader
转载自 http://www.unitymanual.com/6943.html 游戏中我们经常会遇到需要制作外发光效果的地方,比如武器,比如坐骑要带一个牛掰的光晕.今天我找到了个好效果: 外发光材 ...
Unity学习shader笔记[一百]简单焦散Caustic效果
焦散是模仿光透过水底的一个投影景象有两个版本,改版最后效果如下这里是简单的基于物体的焦散,基于水体的焦散思路是水面物体的shader中拿到ColorBuffer,然后用水体的屏幕空间坐标取采集Co ...
OpenGL shader笔记
OpenGL shader笔记目录 OpenGL shader笔记 uniform varying 访问顶点访问顶点--颜色访问顶点属性--法线 gl_Normal 访问顶点--纹理坐标 at ...
Unity双面材质Shader
Unity双面材质Shader. 正面渲染支持漫反射贴图.法线贴图.高光度等.背面渲染支持漫反射贴图. Shader代码如下: Shader "LiangHaoXiangShaders/Do ...
threejs 源码解析_ThreeJS 物理材质shader源码分析(顶点着色器)
ThreeJS 物理材质shader源码分析(顶点着色器) Threejs将shader代码分为ShaderLib和ShaderChunk两部分,ShaderLib通过组合ShaderChunk的代码 ...
unity build-in管线中的PBR材质Shader分析研究
PBR分析前言我理解的PBR PBR组成部分直接光漫反射直接光镜面反射(高光) 间接光漫反射间接光镜面反射最终加和结果前言近来,用到了几次Surface Shader,对于其封装好的 ...
Unity 自定义自发光材质 shader (对比Standard Eimission)
自定义自发光shader的时候会遇到同样的HDR 颜色,但是standard表现正常而自己写的shader不正常的情况. 原因是因为Bloom效果是基于 standard的泛光材质调的,而自己写的E ...
Unity海洋shader笔记①
不久前玩了神秘海域4和盗贼之海,对游戏中形状生动颜色通透的大海产生了兴趣,于是开始查着资料学习自己动手写一个海洋的水效渲染.这个shader基本是边学边写的,编写过程中我学到了很多新的知识. 目前的效 ...
UE5——材质学习笔记（1）
前言:本系列笔记记录UE上各种常见材质的制作方法: 文章目录 1.失真(水流扰动)材质说明分析 texCoord节点 2.动画材质说明分析 flipbook节点 frac节点 floor节点 ...

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

毛玻璃，磨砂玻璃材质，shader笔记相关推荐

最新文章

热门文章