Question

I’m attempting to write a shader to put a border around text. It compiles and runs ok, but the border is grainy and aliased. Any suggestions for making it better please?

This is the first shader I have written so don’t have much knowledge about the API. Could any example code be commented please? I don’t want to just copy and paste an answer; I’d like to understand it.

Additionally, I have a problem when I make the text smaller which is best explained by this image. Any suggestions on fixing this too please?

The edge detection could be better too. So far I take advantage of the fact that the antialiased texture I use for input has edges with 0.0 < alpha < 1.0

So far I have this:

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

Answer 1

Why aren’t you setting the value of gl_FragColor to total? Alpha is no more maintained correctly….

Next, total.a = 1 – alpha; (from outer to inner)

or a variant like:

total.a = abs(0.5 – alpha); (blend both sides)

would probably make more sense, when blending.