c++ - 如何使用 OpenGL 渲染平滑字体(实际上是任何 "flat"形状)？

Question

我创建了 ftmesh library在我的 OpenGL ES 3 屏幕上绘制字体。代码有效，但字符的边缘参差不齐。我正在使用带有 OpenGL ES 3 的 NVidia Jetson AGX Xavier，glShadeModel(GL_SMOOTH) 没有任何效果(并且 glEnable(GL_POLYGON_SMOOTH) 说 Invalid枚举——因为它在 ES 2 或 3 中是不允许的。

这是显示丑陋边缘的屏幕截图示例:

唯一的选择是在四周添加偏移边缘并使外部部分 100% 透明吗？

或者有没有办法用着色器做到这一点？获得示例链接会很棒。

我当前的着色器只是按原样传输顶点:

varying vec4 polygon_color;

attribute vec2 in_position;
attribute vec4 in_color;

void main()
{
    polygon_color = in_color;
    gl_Position = vec4(in_position.xy, 0, 1);
}

这是片段着色器:

varying vec4 polygon_color;

void main()
{
    gl_FragColor = polygon_color;
}

我在 glDrawArrays() 调用之前将所有 in_color 顶点设置为 (1.0f, 1.0f, 1.0f, 0.75f) .

样本缓冲区(解决方案)

正如 Rabbid76 在评论中所建议的，我尝试添加多重采样。它有一个效果，它创建了一种网格的形式，但是......比预期的要透明得多(见下图)。

1. 在我的 g_egl_visual_attributes 中，我添加了 EGL_SAMPLE_BUFFERS，如下所示:

    constexpr EGLint const g_egl_visual_attributes[] =
    {
        EGL_RED_SIZE, 8,
        EGL_GREEN_SIZE, 8,
        EGL_BLUE_SIZE, 8,
        EGL_ALPHA_SIZE, 8,
        EGL_SURFACE_TYPE, EGL_WINDOW_BIT,
        EGL_SAMPLE_BUFFERS, 1,   // <-- added this option
        EGL_SAMPLES, 8,          //     and this one
        EGL_NONE,
    };
   

   注意:在我的配置中，EGL_SAMPLES of 16 不起作用(没有这样的缓冲区可用)。

2. 然后我启用了示例 alpha 覆盖

    glEnable(GL_SAMPLE_ALPHA_TO_COVERAGE);
    glEnable(GL_SAMPLE_COVERAGE);
   

   但这有如下所示的副作用......

   

3. 所以我在没有调用 glEnable() 的情况下进行了尝试，现在它按预期工作了]!

   如果你仔细观察，在最后一张图片中我们可以看到边缘处的抗锯齿:

   

   所以 MSAA 解决了这个问题。

Answer 1

库 FreeTypeGL 提供了更好的抗锯齿功能，但它通过距离贴图以完全不同的方式渲染字符，作为副作用，它不能形成完美的角:

https://github.com/rougier/freetype-gl