UnityShader-BilateralFilter（双边滤波，磨皮滤镜）

前言

最近趁着Steam打折入了好多个游戏，昨天刚刚通关了一个《Ruiner》的游戏。

游戏类似《孤胆枪手》，但是加入了很多技能元素和动作元素，加上游戏本身的卡通渲染+赛博朋克风格，总体感觉还是不错的。

国庆玩了几个大作连刷了几天，有点伤。最近反倒倾向于玩一些小游戏，简单粗暴。不用它三七二十一，莽夫上去就是干！

我发现blog也是这样，最近半年写的blog似乎都有点长，有时候也来点短小精悍的换换口味。今天就来玩一个简单但是又比较好玩的效果-双边滤波。

简介

双边滤波(Bilateral Filter)，可能没有高斯滤波那样著名，但是如果说磨皮滤镜，那肯定是无人不知无人不晓了，用双边滤波就可以实现很好的皮肤滤镜效果，不管脸上有多少麻子，用完双边滤波，瞬间变身白富美。下图来自一款磨皮滤镜插件的效果图，左侧为原始效果，右侧为滤镜后的效果。本文中我们也会实现一个双边滤波后处理，可以达到近似的效果。

所谓滤波，是将信号中特定波段频率滤除的操作。正常高斯模糊（高斯滤波）在进行采样的时候，主要是考虑了像素之间的距离关系（空域信息domain），也就是按照正态分布将当前像素点周围像素加权平均得到滤波后的结果，可以得到很好的模糊效果。但是高斯模糊是对整个图像无差异地进行模糊，也就是整张图片全部模糊掉。关于高斯模糊，之前在Unity Shader后处理：高斯模糊这篇blog中详细介绍过，这里不再赘述。

高斯模糊的定义如下：

而双边滤波是高斯滤波进阶版本，可以在模糊的同时保持图像中的边缘信息。除了考虑正常高斯滤波的空域信息（domain）外，还要考虑另外的一个图像本身携带的值域信息（range）。这个值域信息的选择并非唯一的，可以是采样点间像素颜色的差异，可以是采样点像素对应的法线信息，可以是采样点像素对应的深度信息（3D渲染中拿到法线和深度还是要比单纯的2D图像处理可以做的事情多不少哈）。

双边滤波定义如下：

可见，除了正常的图像距离权重c之外，额外添加了图像相似信息权重s，而s是基于图像本身信息获得的，使用c和s相乘的结果作为最终的权重。即在采样图像及周围点时，对于每一个像素点，需要乘以距离权重乘以图片相似性权重相加得到总和，然后除以每一个像素点距离权重乘以相似性权重的和，即：

关于双边滤波对图像进行处理，可以参考《Bilateral Filtering for Gray and Color Images》这篇论文（似乎要出墙），上文高斯滤波定义，双边滤波定义公式均来自该论文。

基于颜色差值的双边滤波

先来看一下基于颜色差值的双边滤波，这是图像处理方面最常用的滤波方式，也是传说中的磨皮滤镜的实现方式。我们的值域信息权重来源于图像本身，也就是采样图像当前像素点，然后对于其周围的像素点，计算周围像素点与当前像素点颜色（转为灰度）后的差值作为权重进行双边滤波操作。

此处本人使用了后处理进行双边滤波操作，由于高斯滤波和双边滤波操作本身属于线性操作，可以拆分成横向纵向两个Pass进行，大大计算的时间复杂度。对于高斯模糊的正态分布函数，对于图像处理可以按照正态分布公式动态生成，不过在游戏这种性能吃紧的后处理中，直接使用预计算好的正态分布值即可。

Shader关键代码如下：

half CompareColor(fixed4 col1, fixed4 col2)
{
	float l1 = LinearRgbToLuminance(col1.rgb);
	float l2 = LinearRgbToLuminance(col2.rgb);
	return smoothstep(_BilaterFilterFactor, 1.0, 1.0 - abs(l1 - l2));
}

fixed4 frag_bilateralcolor (v2f i) : SV_Target
{
	float2 delta = _MainTex_TexelSize.xy * _Blu