GLSL边框着色器

Question

我正在尝试编写一个着色器，以在文字周围加上边框。它可以编译并运行，但边框很粗糙且有走样。请问有什么建议可以让它更好吗？

这是我写的第一个着色器，因此对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);
    }
}

- James Webster

Answer 1

为什么你没有将gl_FragColor的值设置为total？这样alpha就无法正确维护了....

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

或者像这样的变体：

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

在混合时可能更有意义。

- Karthik Kumar Viswanathan

---

这已经产生了更好的结果，但对于较小的文本仍不可用。请问有更好的边缘检测建议吗？ - James Webster

我将把这个答案标记为正确的，因为它指出了我的代码中的一个缺陷。 然而，应该注意到对于未来的观众，它没有解决问题中提出的所有问题。 我还没有找到完美的解决方案。 - James Webster

对于较小的比例，您必须传递另一个可变的浮点比例；并将上述alpha与其相乘... total.a = scale *（0.5-alpha）等。随着文本大小的缩小，比例会缩小，因此它将产生一个较小的区域，其中包含粉色等。只需尝试不断实验，直到找到一个好的解决方案！ :) - Karthik Kumar Viswanathan

1. 实际上，对于位图字体，2D的边缘检测是通过形态学算法完成的。完美的边缘检测则是通过连接组件完成的。
2. 由于它们都不是实时的，因此采用这种方法：如果您通过顶点渲染文本，则传递一个顶点着色器来查看字体的轮廓边缘，并根据参数发出颜色变化。然后像卡通渲染系统一样，像素着色器获取该输入并进行混合处理。

- Karthik Kumar Viswanathan

Answer 2

在代码中，我看到你设置了gl_FragColor = u_borderColor，其中(0,0,0,0)是总的alpha值>0 <1。首先将总的alpha值更改为其他对比色，然后你的代码可以用于图像。但是文本具有不同的弯曲，这使得它变得粗糙，因此需要更改渲染方式，这需要查看代码才能确定。如果我理解有误，请指正。谢谢。

- user1465380