Opengl es 抗锯齿轮廓距离字段字体

我有一个距离域字体，我想用一个大的白色边框来勾勒它。除了我不确定如何防止颜色和轮廓之间的过渡出现混叠外，我还可以很好地处理这个问题

我当前的片段着色器如下所示

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

---

任何关于如何实现平滑过渡的提示都将非常有用。

我最终在着色器中发现了mix函数

我的最终着色器代码如下所示：

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

制作下面的图片