抗锯齿概述距离字段字体

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); 
} 

以下将生成图像。