fonts - 使用着色器勾勒字体轮廓并使用距离场

Question

我正在使用 Hiero 生成的 BitmapFont。我遵循了这个很棒的指南 https://github.com/libgdx/libgdx/wiki/Distance-field-fonts正确使用距离场。我还使用指南中提供的着色器。一切都很好。

接近尾声时，指南中提到在距离场抗锯齿之上，应该可以很容易地从提供的着色器向字体添加轮廓。它与调整 distance 参数有关。我相信对于知道如何处理着色器的人来说这很容易。但我没有。

这是代码

#ifdef GL_ES
precision mediump float;
#endif

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.5 - smoothing, 0.5 + smoothing, distance);
    gl_FragColor = vec4(v_color.rgb, alpha);
}

这是vert代码:

uniform mat4 u_projTrans;

attribute vec4 a_position;
attribute vec2 a_texCoord0;
attribute vec4 a_color;

varying vec4 v_color;
varying vec2 v_texCoord;

void main() {
    gl_Position = u_projTrans * a_position;
    v_texCoord = a_texCoord0;
    v_color = a_color;
}

从这里如何使用着色器添加轮廓？

Answer 1

smoothstep 函数基本上是一种创建平滑斜坡以消除字母边缘锯齿的方法。如果你想勾勒出字母的轮廓，你需要将 alpha 抗锯齿从字母中移出轮廓的粗细。所以首先你需要一个新的轮廓厚度常量:

const float outlineWidth = 3.0/16.0; //will need to be tweaked
const float outerEdgeCenter = 0.5 - outlineWidth; //for optimizing below calculation

然后修改您的 alpha 以允许现在更大的字母:

float alpha = smoothstep(outerEdgeCenter - smoothing, outerEdgeCenter + smoothing, distance);

现在您需要第二个抗锯齿边缘来将不透明轮廓与不透明字母分开。它将与旧的 alpha 计算相同，因为它在同一个地方。

float border = smoothstep(0.5 - smoothing, 0.5 + smoothing, distance);

最后，您需要通过混合轮廓颜色和字母颜色来计算不透明颜色。

uniform vec4 u_outlineColor; //declared before main()

gl_FragColor = vec4( mix(u_outlineColor.rgb, v_color.rgb, border), alpha );

总结一下你的新片段着色器:

#ifdef GL_ES
precision mediump float;
#endif

uniform sampler2D u_texture;
uniform vec4 u_outlineColor;

varying vec4 v_color;
varying vec2 v_texCoord;

const float smoothing = 1.0/16.0;
const float outlineWidth = 3.0/16.0;
const float outerEdgeCenter = 0.5 - outlineWidth;

void main() {
    float distance = texture2D(u_texture, v_texCoord).a;
    float alpha = smoothstep(outerEdgeCenter - smoothing, outerEdgeCenter + smoothing, distance);
    float border = smoothstep(0.5 - smoothing, 0.5 + smoothing, distance);
    gl_FragColor = vec4( mix(u_outlineColor.rgb, v_color.rgb, border), alpha );
}

您可以通过在 batch.begin() 和 batch.end() 之间调用它来设置边框颜色:

shaderProgram.setUniformf("u_outlineColor", myOutlineColor);