如何修复边缘有符号距离场输出？答案

【问题标题】：How to fix edged Signed Distance Fields output?如何修复边缘有符号距离场输出？
【发布时间】：2017-07-06 01:40:14
【问题描述】：

我尝试使用 OpenGL ES 2.0 和有符号距离字段来渲染一些文本/字体。我为一种字体创建了一个 SDF 位图，可以将一些文本渲染到屏幕上，但是显示的文本非常边缘。

在这里你可以看到我的签名距离场输入的一部分：Input

在这里你可以在屏幕上看到我的输出：output

生成纹理并使用位图填充：

    GL.Enable(EnableCap.Texture2D);
    GL.Hint(HintTarget.PerspectiveCorrectionHint, HintMode.Nicest);
    GL.GenTextures(1, out TextureId); 
    GL.BindTexture(TextureTarget.Texture2D, TextureId); GL.TexParameter(TextureTarget.Texture2D, TextureParameterName.TextureMinFilter, (int) TextureMinFilter.NearestMipmapLinear);
    GL.TexParameter(TextureTarget.Texture2D, TextureParameterName.TextureMagFilter, (int) TextureMagFilter.Linear);
    GL.GenerateMipmap(TextureTarget.Texture2D);
    GL.TexImage2D(TextureTarget2d.Texture2D,0,TextureComponentCount.Rgba,Width,Height,0,PixelFormat.Rgba,PixelType.UnsignedByte,ImageData);
    GL.GenerateMipmap(TextureTarget.Texture2D);

片段着色器：

void main() 
{   
    float distance = texture2D(tex_object, tc).a;
    float alpha = smoothstep(0.5 - 0.05, 0.5 + 0.05, distance); 
    fragColor = vec4(fColor.rgb, fColor.a * alpha);
}

着色器编译正确，值传递正确，因为显示了字母。有人知道如何解决这个问题并使其更顺畅吗？

【问题讨论】：

显示您的代码。
@BDL 代码添加

标签： fonts opengl-es

【解决方案1】：

您正在使用 NearestMipmapLinear，而您应该使用 LinearMipmapNearest。

NearestMipmapLinear 在 mipmap 级别之间进行平滑插值，并在 mips 内进行点过滤。

LinearMipmapNearest 是 mipmap 级别之间的点过滤和 mips 内的双线性过滤。

【讨论】：

当我更改 TextureMinFilter 时，这并没有什么不同。 NearestMipmapLinear 和 LinearMipmapNearest 看起来几乎一样。