OpenGL ES 2.0 - Blending issue with text (iOS)

Question

I have grey shadows around texts when I blend them with OpenGL.

Currently, this is my blending function :

glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

If I change it to :

glBlendFunc(GL_ONE, GL_ONE_MINUS_SRC_ALPHA);

It works, and I obtain the same result with Gimp :

But, however with GL_ONE, the text can't be faded into the background anymore. It's like it's either transparency 0 or 1.

Also with GL_ONE, a crossfade between 2 pictures will somehow make the result image super bright :

Whereas with GL_SRC_ALPHA it looks normal :

So both solutions have pros and cons. I don't want the grey shadows, but I want to keep the crossfade effect.. Any suggestions would be very appreciated.

This is my fragment shader :

gl_FragColor = (v_Color * texture2D(u_Texture, v_TexCoordinate));

And here's how the textures (text and images) are loaded (premultiplied last):

+ (GLuint)getGLTextureFromCGIImage:(CGImageRef)cgiImage {
    size_t width = CGImageGetWidth(cgiImage);
    size_t height = CGImageGetHeight(cgiImage);

    GLubyte *spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
    NSUInteger bytesPerPixel = 4;
    NSUInteger bytesPerRow = bytesPerPixel * width;
    NSUInteger bitsPerComponent = 8;

    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

    CGContextRef spriteContext = CGBitmapContextCreate(spriteData,
                                                       width,
                                                       height,
                                                       bitsPerComponent,
                                                       bytesPerRow,
                                                       colorSpace,
                                                       kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big);

    CGColorSpaceRelease(colorSpace);

    CGContextDrawImage(spriteContext, CGRectMake(0, 0, width, height), cgiImage);
    CGContextRelease(spriteContext);

    return [GLMediaUtils getGLTextureFromPixelsInFormat:GL_RGBA
                                                  width:(int)width
                                                 height:(int)height
                                                 pixels:spriteData];
}

+ (GLuint)getGLTextureFromPixelsInFormat:(GLenum)format
                                   width:(int)width
                                  height:(int)height
                                  pixels:(void *)pixels {

    glActiveTexture(GL_TEXTURE0);

    GLuint texture;
    glGenTextures(1, &texture);


    glBindTexture(GL_TEXTURE_2D, texture);


    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);


    GLenum type = GL_UNSIGNED_BYTE;
    if(format == GL_RGB) // RGB565
        type = GL_UNSIGNED_SHORT_5_6_5;

    glTexImage2D(GL_TEXTURE_2D, 0, format, width, height, 0, format, type, pixels);

    free(pixels);
    glFlush();

    return texture;
} 

Answer 1

You're almost there. You need to use pre-multiplied alpha if you want to avoid ghosting from the texture (because GL blending is post-multiplied alpha normally, which causes color bleed across the channels).

Normally GL_ONE works because the correct alpha has been pre-baked into the texture RGB color channels prior to texture upload. If you start adding custom fading on top of that in the shader then you end up with a desync between the alpha you use for blending in the shader and the alpha that was used for pre-multiplication.

... so you need to add an adjustment to your fragment shader based on the new alpha value to get back to a stable premultiplication value. Something like:

vec4 texColor = texture2D(u_Texture, v_TexCoordinate);
// Scale the texture RGB by the vertex color
texColor.rgb *= v_color.rgb;
// Scale the texture RGBA by the vertex alpha to reinstate premultiplication
gl_FragColor = texColor * v_color.a;

The other approach is to store the font as only a luminance texture. You get grey shadows because the color channels are black outside of the font and texture filtering is mixing white and black. If you know the font color is white you don't need to store RGB values in a texture at all ... (or if you are lazy just keep the existing texture and flood fill the entire texture RGB channels with white).