iDevGames Forums
Using blending for a text fading effect. - Printable Version

+- iDevGames Forums (
+-- Forum: Development Zone (/forum-3.html)
+--- Forum: Graphics & Audio Programming (/forum-9.html)
+--- Thread: Using blending for a text fading effect. (/thread-8.html)

Using blending for a text fading effect. - cjcaufield - Jun 30, 2010 04:35 PM

I'm working on an app that renders a grid of frequently changing text using OpenGL shaders and glyph textures. The glyph textures are GL_LUMINANCE/GL_UNSIGNED_BYTE because the glyphs themselves are anti-aliased. When rendering, I use a fragment shader that has two texture inputs, one is the glyph texture, and the other is a texture containing the ascii data to be rendered. The fragment shader starts by doing some layout calculations to find the proper glyph texture coordinates for the current gl_FragCoord. Next, the shader samples the glyph texture to get a luminance value, and then uses this value to mix between a background color and a foreground color. The resulting color is then written to gl_FragColor. The app redraws the grid of text every frame because it is almost always changing. This all works perfectly and the performance is great.

I would like to modify the app so that previously rendered text "fades out" over a time interval t, while new text still appears immediately. My approach so far has been to turn on blending and change the fragment shader to output an alpha value less than 1.0.

My problem is, I can't quite figure out what alpha value the shader should output. Obviously, the equation should involve both t and the sampled glyph luminance, but I can't quite get it right. My best attempt thus far has been:

alpha = mix(scalar * t, 1.0, glyphLuminance)

This looks great, but it has one big problem, the text never completely fades out --it always stops at a very dim level and stays around forever. I'm not sure if this is due to an error in my math, or, to the inherent rounding errors that come with OpenGL blending and non-floating point buffers. Another problem is that the resulting fade out time depends on the frame rate. I would prefer the solution to be real time.

Can anyone help me out? How would you approach this problem?

Thanks :-)

Using blending for a text fading effect. - Skorche - Jun 30, 2010 05:36 PM

Just render both the old and new text and fade the alpha. You will be saving yourself a huge bag of hurt rather than trying to blend over the top of the framebuffer repeatedly.

Using blending for a text fading effect. - cjcaufield - Jun 30, 2010 08:21 PM

Hey Scott, thanks for the advice.

As you've pointed out, blending is a pain, and I'd love to avoid it, but I'm not sure that's possible in this case. Since the text can potentially change every frame, I'd have to remember and draw up to 60 * t old text grids, not just 2. Or, am I misunderstanding your suggestion?