GLSL 边框着色器答案

【问题标题】：GLSL Border ShaderGLSL 边框着色器
【发布时间】：2015-05-18 17:23:15
【问题描述】：

我正在尝试编写一个着色器来为文本设置边框。它编译并运行正常，但边框呈颗粒状且有锯齿。有什么建议可以让它变得更好吗？

这是我编写的第一个着色器，所以对 API 了解不多。可以评论任何示例代码吗？我不想只是复制和粘贴答案；我想了解一下。

此外，当我缩小文本时，我遇到了一个问题，这张图片可以很好地解释这一点。请问有什么解决这个问题的建议吗？

边缘检测也可以更好。到目前为止，我利用了我用于输入的抗锯齿纹理的边缘与0.0 < alpha < 1.0

到目前为止，我有这个：

#ifdef GL_ES
precision mediump float;
#endif
varying vec2 v_texCoord;
uniform sampler2D u_texture;
uniform vec4 u_borderColor;
uniform float u_width;
uniform float u_height;

void main()
{
    mediump vec4 total = vec4(0.0);

    float alpha = texture2D(u_texture, v_texCoord).a; 
    //If somewhere between complete transparent and completely opaque
    if (alpha > 0.0 && alpha < 1.0)
    {
        total.rgb = u_borderColor.rgb;
        total.a *= u_borderColor.a;
        gl_FragColor = u_borderColor;
    }
    else
    {
        gl_FragColor = texture2D(u_texture, v_texCoord);
    }
}

【问题讨论】：

标签： ios glsl opengl-es-2.0 shader

【解决方案1】：

为什么不将 gl_FragColor 的值设置为 total？ Alpha 不再正确维护....

接下来，total.a = 1 - alpha；（从外到内）

或类似的变体：

total.a = abs(0.5 - alpha); （两边混合）

在混合时可能会更有意义。

【讨论】：

这产生了更好的结果，但仍然不能用于较小的文本。请问有什么更好的边缘检测建议吗？
我将此答案标记为正确，因为它指出了我的代码存在缺陷。然而，未来的观众应该注意到，它并没有解决问题中提出的所有问题。我还没有找到完美的解决方案。
对于较小的比例，您必须通过另一个不同的浮动比例；并将上面的 alpha 与它相乘 ... total.a = scale*(0.5 - alpha) 等随着文本大小的缩小，比例会缩小，所以它会产生一个较小的粉红色区域等。只是试验它直到你得到一个很好的解决方案！ :)
1.实际上，对于位图字体，通过形态学执行 2D 体面边缘检测。完美的边缘检测由连接的组件执行。 2. 由于它们都不是实时的，请采用这种方法：如果您正在通过顶点渲染文本，请传递一个顶点着色器，该着色器查看字体的轮廓边缘并根据参数发出颜色变化。然后像素着色器接受该输入并混合。它类似于 Cel 着色系统。

【解决方案2】：

在代码中，如果 alpha 为 >0 <1，我看到您的设置 gl_FragColor = u_borderColor 是总数中的 (0,0,0,0)。首先将您的总数更改为其他一些对比色，然后您的代码将用于图像。但是文本有不同的弯曲，这使得它变得颗粒状，所以需要改变它的渲染，没有代码就不能说。如果我错了，请提出建议谢谢

【讨论】：