Fading in OpenGL

OpenGL OpenGL: Advanced Coding
1

Hi!

I have a few questions about fading graphics in OpenGL:

  1. If I have used a bitmap-font to print text onscreen and then want to gradually fade the text to black(or the color of the background which may be a texture), how would I do that?

  2. If I have a “credits-textscroll” moving vertically and I want to add smooth fading to the top of the screen where the text disappears and to the bottom of the screen where it appears, how would I do that?

  3. If I have a big texture covering the entire screen (e.g. a logo), and I want to fade it to black, how would I do that?

Any solutions or hints to solving these problems would be greatly appreciated.

/Daniel

2

you should look in to blending, all of your questions can be answered by using the correct blending fuctions.

3

I agree with that… blending is the way to go, here’s an example of how it works for the logo fading out:

GLfloat alpha;

glEnable(GL_BLEND);
glDisable(GL_DEPTH_TEST);

for(alpha=1.0; alpha>0.0; alpha -=0.05)
{
glClear color buffer to black
glColor4f(1.0, 1.0, 1.0, alpha);
drawLogo();
swapBuffers();
}

of course, drawLogo() shouldn’t contain any glColorxx() commands, if so, they have to use the alpha value provided by the loop.

For the text scroller, make the alpha value of the vertices dependent on their Y-position:

if(y>topFadeBorder)
alpha = (y-topFadeBorder) /
(screenHeight-topFadeBorder);
else if(y<bottomFadeBorder)
alpha = (bottomFadeBorder-y) /
bottomFadeBorder;
else alpha = 1.0

or something like that
Hope that helped.

4

> I agree with that… blending is the way
> to go, here’s an example of how it works
> for the logo fading out:
>

Thank you very much for your help!
I have one more question:

If I have a texture of e.g. height 150 pixels and width 50 pixels and I want to fade the upper pixelrows 0-9 of the texture with a gradient fade so that pixelrow 0 is transparent and pixelrow 10 is opaque, how would I go about doing that?

I was thinking about something like this:

  1. Clear stencil buffer + Enable it
  2. Draw texture (record stencil values)
  3. Draw a precomputed texture(“gradually fading texture”-mask; each row of the “mask” having a different alpha value) of height 10 at rows 0-9 of the texture in step 2, using the recorded stencil buffer-values and blending turned on.

(I have never used the stencil buffer, and have recently started to use blending so please don’t flame me for bad pseudo-code!)

Anyway, is this the correct/best way of doing this?

Thank you in advance.

/Daniel

5

>a texture of e.g. height 150 pixels and
>width 50 pixels

First of all, texture widths and heights always have to be a power of 2 (2, 4, 8, 16, 32, 64, 128, 256…)
Others might work on some OpenGL-implementations, but definitely won’t work on all of them.

>and I want to fade the upper pixelrows 0-9
>of the texture with a gradient fade so that
>pixelrow 0 is transparent and pixelrow 10 is
>opaque, how would I go about doing that?

Is this fading static or will it change while the program runs? If you want do have the upper 10 pixels faded statically, use an RGBA-texture with an alpha channel. Every pixel in the texture has 4 bytes, R, G, B and A. Where A is 0, the texture is fully transparent, where A is 255 it’s completely opaque. Don’t forget to use GL_RGBA and GL_RGBA8 as the respective parameters in glTeximage2D().

For dynamic fading, you could either generate the alpha channel in your texture on-the-fly (could be done by drawing a gradient quad into the alpha buffer and copying it to your texture using glCopyTexImage2D() or glCopySubTexImage2D()), and you could also generate non-linear alpha channels.
Or, if I understand it correctly, go by your pseudocode - only draw the alpha texture first, then the RGB texture (if I’m not mistaken).

The third possbility would be, to tesselate the texture polygon into several quads, the top row of quads being 10 pixels high, and using glColor4f(r, g, b, alpha) to generate the alpha gradient by giving alpha 1.0 at the bottom vertices of the row, and 0.0 at the top vertices. Then the fading could also be dynamic and you could do some other neat effects with the texture (warping, etc.).

6

I got a much better/simpler/faster one Color the top and bottom verts of each letter quad the same, but have their colors depend upon the vertical position. This way, you can do it w/o a loop. What I’d do is each frame… (psuedocode, VB/C++ )

Sub DrawText()
{
hicolor = some position/height-based equation
locolor = some position/height-based equation

glBegin GL_QUADS
glColor4f hicolor, hicolor, hicolor, hicolor
doHighVerts
glColor4f locolor, locolor, locolor, locolor
doLowVerts
glEnd
}

So there you have it, text that darkens and becomes translucent as it comes in/goes out Not too hard to do. Also note that I can come up with these sorts of things, but not actually be able to do them. Doesn’t that suck? :stuck_out_tongue:

Oh wait, DUURRRR!!! Dodger took my colored vertex idea before I thought of it! :stuck_out_tongue: (I just saw it hehe) Oh well, mine looks better!