# OpenGL OpenGL Fade In/Out Effect

This topic is 1595 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

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);


    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?

##### Share on other sites

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?

Edited by Danicco

##### Share on other sites

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.

##### Share on other sites

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.

##### Share on other sites

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

uniform vec4 vertexAlpha;

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


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!

Edited by Danicco

##### Share on other sites

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.

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

##### Share on other sites

This topic is 1595 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Create an account

Register a new account

• ### Similar Content

• By xhcao
Does sync be needed to read texture content after access texture image in compute shader?
My simple code is as below,
glUseProgram(program.get());
glBindImageTexture(0, texture[0], 0, GL_FALSE, 3, GL_READ_ONLY, GL_R32UI);
glBindImageTexture(1, texture[1], 0, GL_FALSE, 4, GL_WRITE_ONLY, GL_R32UI);
glDispatchCompute(1, 1, 1);
// Does sync be needed here?
glUseProgram(0);
GL_TEXTURE_CUBE_MAP_POSITIVE_X + face, texture[1], 0);
glReadPixels(0, 0, kWidth, kHeight, GL_RED_INTEGER, GL_UNSIGNED_INT, outputValues);

Compute shader is very simple, imageLoad content from texture[0], and imageStore content to texture[1]. Does need to sync after dispatchCompute?

• My question: is it possible to transform multiple angular velocities so that they can be reinserted as one? My research is below:

• I have this code below in both my vertex and fragment shader, however when I request glGetUniformLocation("Lights[0].diffuse") or "Lights[0].attenuation", it returns -1. It will only give me a valid uniform location if I actually use the diffuse/attenuation variables in the VERTEX shader. Because I use position in the vertex shader, it always returns a valid uniform location. I've read that I can share uniforms across both vertex and fragment, but I'm confused what this is even compiling to if this is the case.

#define NUM_LIGHTS 2
struct Light
{
vec3 position;
vec3 diffuse;
float attenuation;
};
uniform Light Lights[NUM_LIGHTS];

• By pr033r
Hello,
I have a Bachelor project on topic "Implenet 3D Boid's algorithm in OpenGL". All OpenGL issues works fine for me, all rendering etc. But when I started implement the boid's algorithm it was getting worse and worse. I read article (http://natureofcode.com/book/chapter-6-autonomous-agents/) inspirate from another code (here: https://github.com/jyanar/Boids/tree/master/src) but it still doesn't work like in tutorials and videos. For example the main problem: when I apply Cohesion (one of three main laws of boids) it makes some "cycling knot". Second, when some flock touch to another it scary change the coordination or respawn in origin (x: 0, y:0. z:0). Just some streng things.
I followed many tutorials, change a try everything but it isn't so smooth, without lags like in another videos. I really need your help.
My code (optimalizing branch): https://github.com/pr033r/BachelorProject/tree/Optimalizing
Exe file (if you want to look) and models folder (for those who will download the sources):
http://leteckaposta.cz/367190436
Thanks for any help...

• By Andrija
I am currently trying to implement shadow mapping into my project , but although i can render my depth map to the screen and it looks okay , when i sample it with shadowCoords there is no shadow.
Here is my light space matrix calculation
mat4x4 lightViewMatrix; vec3 sun_pos = {SUN_OFFSET * the_sun->direction[0], SUN_OFFSET * the_sun->direction[1], SUN_OFFSET * the_sun->direction[2]}; mat4x4_look_at(lightViewMatrix,sun_pos,player->pos,up); mat4x4_mul(lightSpaceMatrix,lightProjMatrix,lightViewMatrix); I will tweak the values for the size and frustum of the shadow map, but for now i just want to draw shadows around the player position
the_sun->direction is a normalized vector so i multiply it by a constant to get the position.
player->pos is the camera position in world space
the light projection matrix is calculated like this:
uniform mat4 light_space_matrix; void main() { gl_Position = light_space_matrix * transfMatrix * vec4(position, 1.0f); } Shadow fragment shader:
out float fragDepth; void main() { fragDepth = gl_FragCoord.z; } I am using deferred rendering so i have all my world positions in the g_positions buffer