抗鋸齒概述距離字段字體

Question

我有一個距離字體字體，我想用一個大的白色邊框輪廓。除了我不確定如何消除顏色和輪廓之間的過渡別名之外，我已經有了這個工作。

我目前的片段着色器看起來像這樣

uniform sampler2D u_texture; 

varying vec4 v_color; 
varying vec2 v_texCoord; 

const float smoothing = 1.0/16.0; 

void main() 
{ 
    float distance = texture2D(u_texture, v_texCoord).a; 
    float alpha = smoothstep(0.3 - smoothing, 0.3 + smoothing, distance); 
    if (distance < 0.5) 
     gl_FragColor = vec4(1.0, 1.0, 1.0, alpha); 
    else 
     gl_FragColor = vec4(v_color.rgb, alpha); 
} 

任何指針到我如何實現平穩過渡將是巨大的。

Answer 1

當我在着色器中發現混合函數時，我到了那裏。

我最後的着色器的代碼如下所示：

uniform sampler2D u_texture; 
varying vec4 v_color; 
varying vec2 v_texCoord; 

const float smoothing = 1.0/16.0; 

void main() 
{ 
    float distance = texture2D(u_texture, v_texCoord).a; 
    float alpha = smoothstep(0.3 - smoothing, 0.3 + smoothing, distance); 
    if (distance >= 0.45 && distance < 0.55) 
     gl_FragColor = mix(vec4(1.0, 1.0, 1.0, alpha), vec4(v_color.rgb, alpha), (distance - 0.45) * 10.0); 
    else if (distance < 0.45) 
     gl_FragColor = vec4(1.0, 1.0, 1.0, alpha); 
    else 
     gl_FragColor = vec4(v_color.rgb, alpha); 
} 

以下將生成圖像。