在WebGL中使用带符号的距离字段渲染文本

Question

核心问题：

我想在WebGL中渲染Text。

我不想通过＆＃34;重叠＆＃34; HTML DOM元素。

我希望实际的文本呈现发生在WebGL中。

初始解决方案1 ​​

将每个角色渲染为大量四边形。  这不好，因为我需要渲染很多字符。

初始解决方案2（已实施+尝试过此解决方案）。

使用Canvas，将所有字符渲染为＆＃34; atlas / map＆＃34;。

将Canvas转换为WebGL纹理。

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

问题：即使Canvas呈现字体大小为80的字体，并且WebGL呈现字体大小为20的字体，由于各种形式的抗锯齿，插值，它的仍然模糊 ，以及其他任何后期处理。

我认为正确的解决方案。 （不确定，这可能是错的）。

签名距离字段：https://www.youtube.com/watch?v=CGZRHJvJYIg

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

问题

我无法找到签名距离字段的任何WebGL实现。

1. SDF可以与WebGL一起使用，还是WebGL有一些限制，阻止SDF工作。

2. 如果是这样，是否会有一些图书馆：

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

编辑：有人可以验证以下是完整的SDF着色器吗？

（从https://www.mapbox.com/blog/text-signed-distance-fields/复制）

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

Answer 1

是的，SDF非常适合WebGL应用程序。例如，Mapbox uses它。该帖子实际上包含SDF着色器，因为它非常简单。

对于问题的第二部分：事先为字体准备SDF纹理会更好，并且还有其他工具可以做到这一点。例如This one。