Unity Shader 实现磨皮效果

最近在做一些UI使用的shader，大部分是对UV进行一些操作，今天看需求文档时发现美术同学的要求里有一项是类似磨皮的效果，本来我也比较好奇这些美颜效果都是怎么做的，所以就趁此机会实验一下。查了一大堆页面后发现可以实现磨皮效果的算法有很多，常用到的有双边滤波器、表面模糊方法、选择性模糊方法等。勉强看明白了双边滤波和表面模糊方法的公式，所以以下就使用这两种方法在Unity中实现下磨皮效果。

双边滤波方式

参考双边滤波器中的解释，首先映入眼帘的就是一大堆公式，比如这个:

嗯还有积分，有点吓人了，再往下看终于找到了需要用的公式:

大概意思就是考虑了空间距离和颜色相近程度两个方面以后的计算，所以名字里有"双边"两个字，这篇文章解释的挺清晰。

这个公式会看起来更适合转换为代码实现:

大概解释下:: g(i,j) 可以理解为纹理坐标为(i,j)的点的颜色; σ _d 和 σ _r 是空间距离维度和颜色差异维度上的两个平滑参数; f(i,j) 可以理解为对(i,j)点的颜色, 即 tex2D(_MainTex, float2(i,j)); exp是自然底数e的幂次方计算，即 exp(x) = e ^x; ||f(i,j) - f(k,l)|| 意思是 f(i,j) - f(k,l) 向量的模, 模的符号也可以用单个 | 来表示即 |f(i,j) - f(k,l)|, 我猜可能有时为了和绝对值计算区分开而专门写成双竖线形式吧

好，接下来就可以在shader里实现上面的公式了，直接上代码吧。

float Luminance(float3 color)
{return dot(color, float3(0.2125, 0.7154, 0.0721));
}   float4 BilateralFilter(float2 uv)
{float i = uv.x;float j = uv.y;float sigmaSSquareMult2 = (2*_SigmaS*_SigmaS);float sigmaRSquareMult2 = (2*_SigmaR*_SigmaR);float3 centerCol = tex2D(_MainTex, uv).rgb;                 // 中心点像素的颜色 //float centerLum = Luminance(centerCol);                      // 中心点像素的亮度 //float3 sum_up;                                                // 分子 //float3 sum_down;                                                // 分母 //for(int k=-_Radius; k<=_Radius; k++){for(int l=-_Radius; l<=_Radius; l++){float2 uv_new = uv+_MainTex_TexelSize.xy*float2(k,l);float3 curCol = tex2D(_MainTex, uv_new).rgb;        // 当前像素的颜色 //float curLum = Luminance(curCol);                     // 当前像素的亮度 //float3 deltaColor = curCol-centerCol;float len = dot(deltaColor, deltaColor);// float exponent = -((i-k)*(i-k)+(j-l)*(j-l))/sigmaSSquareMult2 - (curLum-centerLum)*(curLum-centerLum)/sigmaRSquareMult2;float exponent = -((i-k)*(i-k)+(j-l)*(j-l))/sigmaSSquareMult2 - len/sigmaRSquareMult2;float weight = exp(exponent);sum_up += curCol*weight;sum_down += weight;}}float3 rgb = sum_up/sum_down;return float4(rgb*_Brightness, 1);
}v2f vert (appdata v)
{v2f o;o.vertex = UnityObjectToClipPos(v.vertex);o.uv = TRANSFORM_TEX(v.uv, _MainTex);return o;
}float4 frag (v2f i) : SV_Target
{return BilateralFilter(i.uv);
}

核心方法就是 BilateralFilter，此方法根据给定的采样半径_Radius来对周围(2*_Radius+1)(2_Radius+1)个像素进行采样，并分别计算出这些采样点的权重，然后把颜色和权重相乘后累加起来作为分子，同时权重也累加起来作为分母，这些点采样结束后把分子累加值除以分母累加值，就是当前像素点的颜色。

表面模糊方法

主要参考这篇文章,公式如下:

参数图里解释的很清晰，那就直接去shader中实现就好了，直接上代码。

float3 CalculateWeight(float3 xi, float3 x1)
{return 1-abs(xi-x1)/(2.5*_Threshold);
}float4 SurfaceFilter(float2 uv)
{float3 x1 = tex2D(_MainTex, uv).rgb;float3 sum_up;                // 分子 //float3 sum_down;            // 分母 //// 对 (2*_Radius+1)*(2*_Radius+1) 大小的矩形区域内所有像素采样 //for(int i=-_Radius; i<=_Radius; i++){for(int j=-_Radius; j<=_Radius; j++){float2 uv_new = uv + float2(j,i) * _MainTex_TexelSize.xy;float3 xi = tex2D(_MainTex, uv_new).rgb;sum_up += CalculateWeight(xi, x1)*xi;sum_down += CalculateWeight(xi, x1);}}float3 rgb = sum_up/sum_down;return float4(rgb,1);
}v2f vert (appdata v)
{v2f o;o.vertex = UnityObjectToClipPos(v.vertex);o.uv = TRANSFORM_TEX(v.uv, _MainTex);return o;
}float4 frag (v2f i) : SV_Target
{float4 col = SurfaceFilter(i.uv)*_Brightness;return col;
}

核心方法是 SurfaceFilter, 表面模糊方法也需要指定一个采样半径，这样好确定对多大范围内的像素进行采样，整个过程和双边滤波器基本一致，只是计算权重的方法不一样，按照公式忠实的还原即可。执行效果如图:

看起来比较模糊，效果不太理想，如果想要清晰一些的话就会有非皮肤区域过亮的问题，像这样:

难怪看有的文章里说还要检测下皮肤区域，看样是要把这个算法只应用到皮肤上，而避开嘴和眼睛之类的地方，自己还是太naive，还得再继续研究，那可能要另起一篇文章了。

综上，通过在shader中按照公式实现两种算法来达到简单的磨皮效果，这里只是验证两种方法的效果，所以没有进行优化，采样数也过大，实际运行在移动设备上应该耗电和发热都不小，还有很多经过优化的算法实现，可以多google了解下。

非常感谢参考文章里的各位大神。

package下载地址
提取码：qcgs

参考链接:: https://blog.csdn.net/trent1985/article/details/49864397; https://blog.csdn.net/piaoxuezhong/article/details/78302920; https://blog.csdn.net/mumusan2016/article/details/54578038; https://zh.wikipedia.org/zh-s; https://zh.wikipedia.org/zh/雙邊濾波器