抗锯齿概述了距离场字体

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

制作下面的图片。