快捷導(dǎo)航

詳解OpenGL Shader抗鋸齒的實(shí)現(xiàn)

更新時(shí)間：2022年02月11日 16:04:27 作者：JulyYu

普通繪制圓形形狀時(shí)可以看到圖形邊緣會(huì)有明顯鋸齒現(xiàn)象并不像真實(shí)圓形形狀一樣圓潤(rùn)邊緣平滑。本文將介紹如何通過(guò)自制函數(shù)實(shí)現(xiàn)抗鋸齒，需要的可以參考一下

繪制圓形鋸齒問(wèn)題

普通繪制圓形形狀時(shí)可以看到圖形邊緣會(huì)有明顯鋸齒現(xiàn)象并不像真實(shí)圓形形狀一樣圓潤(rùn)邊緣平滑。在glsl中這種情況是常見(jiàn)情況，這里是可以借助glsl內(nèi)置函數(shù)來(lái)消除鋸齒現(xiàn)象。

vec3 sdfCircle(vec2 uv,float r,vec3 value){
    float d = length(uv) - r;
    return d > 0. ? vec3(0.3294, 0.3294, 0.9333) : value; // 大于0超出畫(huà)圓范圍，小于0在畫(huà)圓范圍內(nèi)
}
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    uv -= 0.5; // x: <-0.5, 0.5>, y: <-0.5, 0.5>
    uv.x *= iResolution.x/iResolution.y; // x: <-0.5, 0.5> * aspect ratio, y: <-0.5, 0.5>
    vec3 circle = sdfCircle(uv,0.4,vec3(1.));
    circle = mix(circle,sdfCircle(uv,0.3,vec3(1.)),0.5);
    circle = mix(circle,sdfCircle(uv,0.2,vec3(1.)),0.7);
    gl_FragColor = vec4(circle,.9);
}

smoothstep函數(shù)介紹

smoothstep(a, b, x)函數(shù)結(jié)果范圍：

返回值	條件
0	x<a<b 或 x>a>b
1	x<b<a 或 x>b>a
某個(gè)值	根據(jù)x在[a,b]或[b,a]區(qū)間范圍內(nèi)，返回一個(gè)在[0,1]之間的值

內(nèi)置函數(shù)smoothstep就能實(shí)現(xiàn)繪制圓形圖形的抗鋸齒效果?？赡苤坝惺褂眠^(guò)內(nèi)置函數(shù)step同樣都是步進(jìn)式功能函數(shù)，不同于step函數(shù)可以理解為if-else而smoothstep函數(shù)是平滑過(guò)渡的。

抗鋸齒實(shí)現(xiàn)

使用smoothstep實(shí)現(xiàn)抗鋸齒功能需要修改一下原先的畫(huà)圓公式。原來(lái)只需要使用到length(uv) - r來(lái)判斷是否選擇繪制圓的顏色，而現(xiàn)在需要修改成通過(guò)smoothstep(m-0.002,m+0.002,length(uv) - 0.2)計(jì)算值作為mix函數(shù)混合系數(shù)值來(lái)實(shí)現(xiàn)平滑過(guò)渡到畫(huà)圓色值，這樣就能實(shí)現(xiàn)抗鋸齒了。

    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    uv -= 0.5; // x: <-0.5, 0.5>, y: <-0.5, 0.5>
    uv.x *= iResolution.x/iResolution.y; // x: <-0.5, 0.5> * aspect ratio, y: <-0.5, 0.5>
    float m = 0.2;
    m = smoothstep(m-0.002,m+0.002,length(uv) - 0.2);
    vec3 pixel = mix(vec3(1.),vec3(0.3294, 0.3294, 0.9333),m);
    gl_FragColor = vec4(pixel,1.0);

如果把腳本其中m-0.002,m+0.002把0.002范圍進(jìn)行修改。例如修改成0.02，運(yùn)行結(jié)果可以發(fā)現(xiàn)圓形變模糊了。這就是區(qū)間過(guò)大導(dǎo)致平滑區(qū)間漸變范圍在肉眼可見(jiàn)范圍了，因此設(shè)置一個(gè)適當(dāng)過(guò)渡區(qū)間才能實(shí)現(xiàn)較好的抗鋸齒效果。

擴(kuò)展

清楚實(shí)現(xiàn)抗鋸齒原理之后，可以根據(jù)需要自行實(shí)現(xiàn)一個(gè)平滑過(guò)渡函數(shù)來(lái)實(shí)現(xiàn)抗鋸齒功能。類似像以下兩個(gè)自制平滑過(guò)渡函數(shù)最終實(shí)現(xiàn)效果幾乎看不出太大區(qū)別。

自制smoothstep函數(shù)抗鋸齒

float smootherstep(float edge0, float edge1, float x) {
    float t = (x - edge0)/(edge1 - edge0);
    float t1 = t*t*t*(t*(t*6. - 15.) + 10.);
    return clamp(t1, 0.0, 1.0);
}
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    uv -= 0.5; // x: <-0.5, 0.5>, y: <-0.5, 0.5>
    uv.x *= iResolution.x/iResolution.y; // x: <-0.5, 0.5> * aspect ratio, y: <-0.5, 0.5>
    float m = 0.2;
    m = smootherstep(m-0.002,m+0.002,length(uv) - 0.2);
    vec3 pixel = mix(vec3(1.),vec3(0.3294, 0.3294, 0.9333),m);
    gl_FragColor = vec4(pixel,1.0);
}

自制linearstep函數(shù)抗鋸齒

float linearstep(float edge0, float edge1, float x) {
    float t = (x - edge0)/(edge1 - edge0);
    return clamp(t, 0.0, 1.0);
}
void main(){
   vec2 uv = gl_FragCoord.xy / iResolution.xy;
    uv -= 0.5; // x: <-0.5, 0.5>, y: <-0.5, 0.5>
    uv.x *= iResolution.x/iResolution.y; // x: <-0.5, 0.5> * aspect ratio, y: <-0.5, 0.5>
    float m = 0.2;
    m = linearstep(m-0.002,m+0.002,length(uv) - 0.2);
    vec3 pixel = mix(vec3(1.),vec3(0.3294, 0.3294, 0.9333),m);
    gl_FragColor = vec4(pixel,1.0);
}

smoothstep