最近在做一些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