最近在做一些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) = ex
- ||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/%E9%9B%99%E9%82%8A%E6%BF%BE%E6%B3%A2%E5%99%A8
