OpenGL?Shader抗鋸齒如何實現

這篇文章主要為大家展示了“OpenGL Shader抗鋸齒如何實現”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“OpenGL Shader抗鋸齒如何實現”這篇文章吧。

繪制圓形鋸齒問題

普通繪制圓形形狀時可以看到圖形邊緣會有明顯鋸齒現象并不像真實圓形形狀一樣圓潤邊緣平滑。在glsl中這種情況是常見情況，這里是可以借助glsl內置函數來消除鋸齒現象。

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超出畫圓范圍，小于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>
    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函數介紹

smoothstep(a, b, x)函數結果范圍：

內置函數smoothstep就能實現繪制圓形圖形的抗鋸齒效果。可能之前有使用過內置函數step同樣都是步進式功能函數，不同于step函數可以理解為if-else而smoothstep函數是平滑過渡的。

抗鋸齒實現

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

    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范圍進行修改。例如修改成0.02，運行結果可以發現圓形變模糊了。這就是區間過大導致平滑區間漸變范圍在肉眼可見范圍了，因此設置一個適當過渡區間才能實現較好的抗鋸齒效果。

擴展

清楚實現抗鋸齒原理之后，可以根據需要自行實現一個平滑過渡函數來實現抗鋸齒功能。類似像以下兩個自制平滑過渡函數最終實現效果幾乎看不出太大區別。

自制smoothstep函數抗鋸齒

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函數抗鋸齒

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

linearstep

以上是“OpenGL Shader抗鋸齒如何實現”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！