TA实践分享:简单且只采样一次的磨砂玻璃/模糊算法(Unity+UE)
- 作者:admin
- /
- 时间:2天前
- /
- 浏览:96 次
- /
- 分类:厚积薄发
【USparkle专栏】如果你深怀绝技,爱“搞点研究”,乐于分享也博采众长,我们期待你的加入,让智慧的火花碰撞交织,让知识的传递生生不息!
一、原理
在现实中我们常见的模糊效果很多来自磨砂玻璃,磨砂玻璃之所以产生模糊的效果是由于光线照射到玻璃上发生的一系列折射/反射/散射现象。
特别是磨砂玻璃微观视角下凹凸起伏的表面会使光线的折射变得很复杂,使折射的影像变得朦胧模糊。
并且相较于光滑的玻璃,磨砂玻璃粗糙的表面会表现为漫反射的效果。光线在进入颗粒结构的磨砂玻璃后产生的不规则散射也是模糊效果的重要成因。
常见的模糊算法都是在多次采样的基础上按照一定的权重取均值,包括高斯模糊、动态模糊和景深模糊等都是如此,所以对高分辨率纹理的卷积操作是模糊算法的重要性能瓶颈。
考虑到卷积模糊算法的性能消耗,作者选择另辟蹊径,通过模拟磨砂玻璃的折射与反射实现类似的模糊效果。
二、磨砂玻璃
UE
大致思路是:使用UE基于物理的折射与反射光照模型实现磨砂玻璃效果,且暂不考虑光线散射的因素。
整体材质节点如下:

需要注意的要点:
1.开启材质折射功能
在详情面板中,将混合模式(Blend Mode)从不透明(Opaque)更改为半透明(Translucent),并将照明模型(Lighting Model)从体积无方向(Volumetric Non Directional)更改为表面半透明体积(Surface TranslucencyVolume)。更改这些设置会启用主材质节点上的折射(Refraction)引脚。完成之后,材质细节(Details)面板应该类似于下图。

2.两种折射模式的选择
常用的两种折射模式:折射率(Index of Refraction)和像素法线偏移(Pixel Normal Offset)

区别:
折射率(Index of Refraction)模型模拟了光线在介质之间传播时的折射方式。这非常适合小物体,例如罐子、玻璃杯和其他曲面。 但是,用于较大的平面时,可能会产生不可预测的结果和瑕疵,因为场景颜色是从屏幕之外读取的。
像素法线偏移(Pixel Normal Offset)使用顶点法线作为参考,然后通过计算每个像素的法线与顶点法线的差异程度,从而算出折射偏移。这很适合较大的平面,比如水面,因为你不需要用常量偏移来从屏幕之外读取数据。
具体选择何种模式可以根据项目需求进行试验。作者制作的磨砂玻璃主要用于平面模型,选择的折射模式是像素法线偏移。因为在折射率模式下模糊效果会受到视线夹角的强烈影响,在某些视线方向下模糊效果会消失或者过强。
3.法线纹理采样器Mip模式设为“Mip偏差”
设置Mip偏差的必要性:默认的Mip计算方式会使贴图在较远的距离下清晰度下降,导致模糊效果在远距离时消失,而使用“Mip等级”设定固定的MipLevel级别虽然解决了远处模糊效果消失的问题,但也会导致低像素对应高纹素造成的噪点闪烁问题。
所以需要选择“Mip偏差”模式,并给一个偏移(Bias)参数以适当偏移降低MipLevel。

4.其他效果和功能
- 反射/菲尼尔/其它自定义效果可以根据需求来添加。
- 并且折射模糊可以通过替换不同效果的法线贴图实现多种风格的模糊效果。
- 折射模糊实现的磨砂玻璃与普通玻璃的性能消耗相当,远低于卷积算法实现的磨砂玻璃。
实际效果对比:
折射模糊

近距离的折射模糊

卷积模糊

近距离的卷积模糊

Unity
Unity中没有提供类似UE的折射实现方案,所以模糊效果的实现有些许不同,但其思路也是以折射的方式实现磨砂玻璃效果。
基本方法:以噪声扰动UV偏移场景颜色,然后通过比较场景深度剔除对玻璃前面物体的错误偏移。
材质节点展示:

整体

噪声采样部分

深度比较遮罩

最终颜色输出
三、需要注意的要点
1.启用Depth Texture与Opaque Texture,SurfaceType设置为Transparent。


2.建议使用RGB噪声贴图而非灰度噪声,灰度噪声在对UV偏移时方向为(-1,-1)~(1,1),而RGB噪声的偏移会更随机。

3.如果没有深度遮罩,玻璃前面的物体也会被模糊。

没有深度遮罩时
4.最终颜色建议输出到Emission而非BaseColor,因为BaseColor输入的颜色应该不包含光照信息,场景颜色本身包含光照结果,如果再对其进行光照计算会出现不可控的颜色和亮度。

5.设置噪声贴图Mip采样模式为Bias,并根据需要把Bias参数设置为小于0的整数。

实际效果:

四、模糊后处理
磨砂玻璃的效果也可以用于后处理材质,提供另一种美术风格的模糊效果。
UE
整体材质节点如下:

折射模糊:

卷积模糊:

Unity
整体材质节点如下:

M实际效果:

这是侑虎科技第1771篇文章,感谢作者RE Ding供稿。欢迎转发分享,未经作者授权请勿转载。如果您有任何独到的见解或者发现也欢迎联系我们,一起探讨。(QQ群:793972859)
作者主页:https://www.zhihu.com/people/ding-yan-qing-75
再次感谢RE Ding的分享,如果您有任何独到的见解或者发现也欢迎联系我们,一起探讨。(QQ群:793972859)