Text 在WebGL中显示带符号距离字段的文本 核心问题：

我想在WebGL中呈现文本

我不想通过“覆盖”的HTMLDOM元素来实现这一点

我希望实际的文本渲染发生在WebGL内部

初始解1 将每个字符渲染为大量四边形。 这不好，因为我需要渲染许多字符

初始解决方案2（已实施+尝试此解决方案）。 使用画布，将所有角色渲染为“地图集/地图”

将画布转换为WebGL纹理

当我需要渲染角色时，只需将其从纹理中拉出

问题：即使画布以80号字体渲染字体，而WebGL以20号字体渲染字体，由于各种形式的抗锯齿、插值和其他后期处理，它仍然模糊

我认为这是正确的解决办法。（不确定，这可能是错误的）。 符号距离字段：

对于每个像素，存储到最近边界的距离

问题: 我很难找到签名距离字段的任何WebGL实现

SDF能否与WebGL一起工作，或者WebGL是否存在阻止SDF工作的某些限制

如果是，是否有一些图书馆将采用以下内容：

• 用于渲染SDF和SDF的实际着色器
• 可以使用字体并生成渲染所需的SDF吗

编辑：是否有人可以验证以下是完整的SDF着色器？ （抄自）

---

是的，SDF非常适合WebGL应用程序。例如，Mapbox。这篇文章实际上包含了SDF着色器，因为它非常简单

---

关于问题的第二部分：最好事先为字体准备SDF纹理，而且有一些工具可以做到这一点，例如。

谢谢您的链接。我在上面的问题中复制了我认为是SDF着色器的部分。您能确认这是整个着色器吗？三行看起来太短了。@eavdb是的，正如我在回答中指出的，SDF非常简单（因此非常优雅）。太棒了！我还没有让它工作，但这显然是所有我需要的部分。回答接受！再次感谢@eavdb还有一个链接，你可以作为参考。我很好奇他们对CJK和阿拉伯语的处理有多好，字体有多大，可以支持所有语言。

precision mediump float;

uniform sampler2D u_texture;
uniform vec4 u_color;
uniform float u_buffer;
uniform float u_gamma;

varying vec2 v_texcoord;

void main() {
    float dist = texture2D(u_texture, v_texcoord).r;
    float alpha = smoothstep(u_buffer - u_gamma, u_buffer + u_gamma, dist);
    gl_FragColor = vec4(u_color.rgb, alpha * u_color.a);
}