使用着色器和距离场勾画字体轮廓

Question

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

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

这是碎片代码

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

这是垂直代码：

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 函数基本上是一种创建平滑斜坡以消除字母边缘锯齿的方法。如果要勾勒出字母的轮廓，则需要将字母抗锯齿从字母中移出轮廓的粗细。因此，首先您需要一个新的轮廓厚度常量：

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