Why are there dark edges / halos between transparent and opaque areas of textured surfaces (in opengl es 2.0 fragment shaders)

Question

I'm using a PNG texture image to control the opacity of fragments in an Opengl es 2.0 shader (on iOS). The result I am after is light grey text on top of my scene's medium grey background (the fragments shader is applied to a triangle strip in the scene). The problem is that there are dark edges around my text -- they look like artifacts. I'm using PNG transparency for the alpha information -- but I'm open to other approaches. What is going on and how can I do this correctly?

I'm posting this question for reference and search. I have an answer and will post in 8 hours when Stackoverflow lets me :) — Dreamwieber, Oct 20 '11 at 20:14
There are already a number of questions here on premultiplied alpha and PNGs. For example, [this one](http://stackoverflow.com/questions/7189417/convert-png-from-premultiplied-alpha-to-conventional-alpha-transparancy). — Nicol Bolas, Oct 20 '11 at 20:44
Yes, I did want to address however a simpler approach than messing with premultiplied alphas -- for search purposes. (And I plan on referencing other relevant answers as well.) — Dreamwieber, Oct 20 '11 at 21:45

score 1 · Accepted Answer · edited May 23 '17 at 12:03

First, look at this answer regarding PNG transparency and premultiplied alpha. Long story short, the pixels in the PNG image that have less than 100% opacity are being premultiplied, so they are in effect getting darker as they get more transparent. Hence the dark artifacts around the edges.

Even without PNG and premultiplied transparency, you may still run into the problem if you forget to set your fragment shader's color before applying transparency.

A solution to this problem (where you want text to be a light grey color, and everything in the texture map that's not text to be transparent) would be to create a texture map where your text is white and the background is black.

This texture map will control the alpha of your fragment. The RGB values of your fragment will be set to your light grey color.

For example:

// color used for text
lowp vec4 textColor = vec4(.82,.82,.82,1.0);

gl_FragColor = textColor;

// greyscale texture passed in as uniform
lowp vec4 alphaMap = texture2D(u_alpha_texture,v_texture);

// set the alpha using the texture  
gl_FragColor.w = alphaMap.x;

In cases where your color texture varies, this approach would require two separate texture map images (one for the color, and one for the alpha). Clearly, this is less efficient then dealing with one PNG that has alpha transparency baked-in. However, in my experience it is a good tradeoff (premultiplied pixels can be counter-intuitive to deal with, and the other approaches to loading PNG transparency without pre-multiplication introduce added complexity).

An upside to this approach is that you can vary the color of the text independently of the texture map image. For instance if you wanted red text, you could change the textColor value to:

lowp vec4 textColor = vec4(1.0,0.0,0.0,1.0);

You could even vary the color over time, etc, all independently of the alpha. That's why I find this approach to be flexible.

Why are there dark edges / halos between transparent and opaque areas of textured surfaces (in opengl es 2.0 fragment shaders)

1 Answers1