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/%E9%9B%99%E9%82%8A%E6%BF%BE%E6%B3%A2%E5%99%A8