最近在做一些UI使用的shader静檬，大部分是對(duì)UV進(jìn)行一些操作，今天看需求文檔時(shí)發(fā)現(xiàn)美術(shù)同學(xué)的要求里有一項(xiàng)是類(lèi)似磨皮的效果樱调，本來(lái)我也比較好奇這些美顏效果都是怎么做的洪己，所以就趁此機(jī)會(huì)實(shí)驗(yàn)一下。查了一大堆頁(yè)面后發(fā)現(xiàn)可以實(shí)現(xiàn)磨皮效果的算法有很多蠢棱，常用到的有 雙邊濾波器锌杀、表面模糊方法、選擇性模糊方法等泻仙。勉強(qiáng)看明白了雙邊濾波和表面模糊方法的公式糕再，所以以下就使用這兩種方法在Unity中實(shí)現(xiàn)下磨皮效果。
雙邊濾波方式
參考 雙邊濾波器 中的解釋?zhuān)紫扔橙胙酆煹木褪且淮蠖压接褡热邕@個(gè):
嗯還有積分突想，有點(diǎn)嚇人了，再往下看終于找到了需要用的公式:
大概意思就是考慮了空間距離和顏色相近程度兩個(gè)方面以后的計(jì)算究抓，所以名字里有"雙邊"兩個(gè)字猾担，這篇文章 解釋的挺清晰。
這個(gè)公式會(huì)看起來(lái)更適合轉(zhuǎn)換為代碼實(shí)現(xiàn):
大概解釋下:
- g(i,j) 可以理解為紋理坐標(biāo)為(i,j)的點(diǎn)的顏色
- σd 和 σr 是空間距離維度和顏色差異維度上的兩個(gè)平滑參數(shù)
- f(i,j) 可以理解為對(duì)(i,j)點(diǎn)的顏色, 即 tex2D(_MainTex, float2(i,j))
- exp是自然底數(shù)e的冪次方計(jì)算刺下，即 exp(x) = ex
- ||f(i,j) - f(k,l)|| 意思是 f(i,j) - f(k,l) 向量的模, 模的符號(hào)也可以用單個(gè) | 來(lái)表示即 |f(i,j) - f(k,l)|, 我猜可能有時(shí)為了和絕對(duì)值計(jì)算區(qū)分開(kāi)而專(zhuān)門(mén)寫(xiě)成雙豎線形式吧
好绑嘹，接下來(lái)就可以在shader里實(shí)現(xiàn)上面的公式了，直接上代碼吧橘茉。
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; // 中心點(diǎn)像素的顏色 //
float centerLum = Luminance(centerCol); // 中心點(diǎn)像素的亮度 //
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; // 當(dāng)前像素的顏色 //
float curLum = Luminance(curCol); // 當(dāng)前像素的亮度 //
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工腋，此方法根據(jù)給定的采樣半徑_Radius來(lái)對(duì)周?chē)?2_Radius+1)(2*_Radius+1)個(gè)像素進(jìn)行采樣，并分別計(jì)算出這些采樣點(diǎn)的權(quán)重擅腰，然后把顏色和權(quán)重相乘后累加起來(lái)作為分子，同時(shí)權(quán)重也累加起來(lái)作為分母翁潘，這些點(diǎn)采樣結(jié)束后把分子累加值除以分母累加值趁冈，就是當(dāng)前像素點(diǎn)的顏色。
表面模糊方法
主要參考 這篇文章,公式如下:
參數(shù)圖里解釋的很清晰拜马，那就直接去shader中實(shí)現(xiàn)就好了箱歧，直接上代碼。
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; // 分母 //
// 對(duì) (2*_Radius+1)*(2*_Radius+1) 大小的矩形區(qū)域內(nèi)所有像素采樣 //
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, 表面模糊方法也需要指定一個(gè)采樣半徑一膨，這樣好確定對(duì)多大范圍內(nèi)的像素進(jìn)行采樣呀邢，整個(gè)過(guò)程和雙邊濾波器基本一致，只是計(jì)算權(quán)重的方法不一樣豹绪，按照公式忠實(shí)的還原即可价淌。執(zhí)行效果如圖:
看起來(lái)比較模糊申眼，效果不太理想，如果想要清晰一些的話就會(huì)有非皮膚區(qū)域過(guò)亮的問(wèn)題蝉衣，像這樣:
難怪看有的文章里說(shuō)還要檢測(cè)下皮膚區(qū)域括尸，看樣是要把這個(gè)算法只應(yīng)用到皮膚上，而避開(kāi)嘴和眼睛之類(lèi)的地方病毡，自己還是太naive濒翻，還得再繼續(xù)研究，那可能要另起一篇文章了啦膜。
綜上有送，通過(guò)在shader中按照公式實(shí)現(xiàn)兩種算法來(lái)達(dá)到簡(jiǎn)單的磨皮效果，這里只是驗(yàn)證兩種方法的效果僧家，所以沒(méi)有進(jìn)行優(yōu)化雀摘，采樣數(shù)也過(guò)大，實(shí)際運(yùn)行在移動(dòng)設(shè)備上應(yīng)該耗電和發(fā)熱都不小八拱，還有很多經(jīng)過(guò)優(yōu)化的算法實(shí)現(xiàn)阵赠，可以多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
