OpenGL Fade In/Out Effect

Started by
4 comments, last by SPHERICAL 10 years, 7 months ago

I couldn't find an up to date tutorial about it and I'm not sure how this can be done.

I have an image with a text (the game title), it's a 200x100 BMP image.

Some pixels are have the (255, 0, 255) color and during the loading, I set the alpha value to 255 when I find these values.

In my initialization code:

    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

An my pixel shader:

    void main()
    {
        color = texture2D(objectTexture, UV).rgba;
    }

So it's displaying fine, but I want to add an effect of fade in/out on it, but just the title, nothing else.

The "regular" way I found is to create a polygon that covers the image and change it's alpha, but then the things behind it are also faded (and you can notice the polygon around it).

Another way is to create a pixel shader that receives an alpha value, and I send these values I calculate based on the time, so I have in the pixel shader:

    in float alpha;
    void main()
    {
        color = vec4(texture2D(objectTexture, UV).rgb, alpha);
    }

But this would surely mess the already transparent pixels since I'm discarding the image's alpha values.

I found about the command glTexEnv() but I couldn't find it in the OpenGL4.0 reference pages, so I'm guessing it's outdated and I couldn't find the updated one.

How can I get this effect?

Advertisement

Hmm I think I got it, I just added an


if(color.w == 1)
{
    color.w = alpha; //the value I sent
}

I've read that if statements should be avoided in the shaders but I couldn't think of any other option, is there any better way to do this?

Edit: Also, this made me wonder... I had to create a separate programID that receives the alpha and uses it for the fading effect, but what am I supposed to do then if I have an object with a material type of Y (a specific shader) and I want to add this fading effect to it? (Like those effects of characters going stealth)

Am I supposed to create each of these effects plus an alternative version for the alpha effect?

I highly recommend vertex color blending. In this case you would have a quad or maybe a set of quads that represent your titles.

By blending a vertex alpha with the texture sample, you will get the desired result without using the branching statement mentioned, and at a much better performance.

In this case you would set all the vertices to white color, and just manipulate the alpha of these vertices. Your shader would multiply the vertex color and the texture lookup.

Let me know if you have any issues.

Oh, and if instead of fading alpha you want to fade from white / black or to white or black, use a simple quad that covers your desired area and draw it on top.

Set the colors to white/black as desired and just tweak the alpha. A simple blend operation like EaseIn / EaseOut will give you even better results than linear blending. ActionScript tutorials are all over the place that will give you these easing equations.

Hmm I couldn't find practical examples of this effect you mentioned, but I tried to do this:

vertexShader:


uniform vec4 vertexAlpha;
 
out vec4 pixelAlpha;
void main()
{
    //other stuff too
    pixelAlpha = vertexAlpha;
}

pixelShader:


in vec4 pixelAlpha;
 
out vec4 color;
void main()
{
    color = texture2D(objectTexture, UV).rgba * pixelAlpha;
}

And in the code I have a float[4] for the alphaChannel values (set to white, 1 in alpha), but when I change the alpha my quad is going blacker and blacker, but leaving the black quad on screen instead of disappearing, so I think I'm off something...

Edit: Ah, I also think it's relevant to mention that the texture already has an alpha value (though I manually set them all to 255) and I'm using:


glEnable(GL_BLEND);
glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

This would work if I always had a black screen and want to fade in/out, but I'm trying to achieve the fade in/out with transparency (for example with a background image behind, and then an image fades in/out over it).

How can I get this effect?

Edit2: Reading here (http://www.opengl.org/archives/resources/faq/technical/transparency.htm) I noticed I was trying to render the transparent object first, but this might be causing/being caused by some other problem... I have a background image and a small quad image on screen, and I'm drawing them in the order: Background -> Quad.

But even with blend disabled, I'm only getting the Background displayed.

I only get the see the Quad if I draw them in the order Quad -> Background.

Am I doing something terribly wrong here for this to happen?

Edit3: I disabled glEnable(GL_DEPTH_TEST) before drawing 2Ds objects and the effect is finally showing! Thank you very much!

I made a fade in/out for a simple polygon that fades in and out, because of the variation of the Z coordinate of that polygon.


#version 330 core

in vec4 fragColor;

out vec4 finalColor;

in float zPos;

void main()
{
	vec4 color = fragColor;

	float partA = -1.0 * zPos;
	float partB = partA - 7.0;
	color.a = 1.0 - partB;

	finalColor = color;
}

zPos is always negative in my case, so in partA I make it a positive value, then in partB I decrease it by 7. The value in partB is used to get alpha value for the color of the polygon.

The initial value of zPos is -8.0, then it increases to -7.0. This is a fade in. Then the zPos from value -7.0 dereases again to -8.0. This way i get a fade out.

In this video a recorded the game that uses this fragment shader for fading in/out the squares that are in background.

Hope this will help you to write the right shader for your problem. :)

P.S. Sorry for my english, if i made any mistakes.

This topic is closed to new replies.

Advertisement