Sign in to follow this  

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.

If you intended to correct an error in the post then please contact us.

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:



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?

Share this post

Link to post
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 this post

Link to post
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 this post

Link to post
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 this post

Link to post
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:


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 ( 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 this post

Link to post
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.


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


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

Share this post

Link to post
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.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • 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,
      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?
      glBindFramebuffer(GL_READ_FRAMEBUFFER, framebuffer);
                                     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?
    • By Jonathan2006
      My question: is it possible to transform multiple angular velocities so that they can be reinserted as one? My research is below:
      // This works quat quaternion1 = GEQuaternionFromAngleRadians(angleRadiansVector1); quat quaternion2 = GEMultiplyQuaternions(quaternion1, GEQuaternionFromAngleRadians(angleRadiansVector2)); quat quaternion3 = GEMultiplyQuaternions(quaternion2, GEQuaternionFromAngleRadians(angleRadiansVector3)); glMultMatrixf(GEMat4FromQuaternion(quaternion3).array); // The first two work fine but not the third. Why? quat quaternion1 = GEQuaternionFromAngleRadians(angleRadiansVector1); vec3 vector1 = GETransformQuaternionAndVector(quaternion1, angularVelocity1); quat quaternion2 = GEQuaternionFromAngleRadians(angleRadiansVector2); vec3 vector2 = GETransformQuaternionAndVector(quaternion2, angularVelocity2); // This doesn't work //quat quaternion3 = GEQuaternionFromAngleRadians(angleRadiansVector3); //vec3 vector3 = GETransformQuaternionAndVector(quaternion3, angularVelocity3); vec3 angleVelocity = GEAddVectors(vector1, vector2); // Does not work: vec3 angleVelocity = GEAddVectors(vector1, GEAddVectors(vector2, vector3)); static vec3 angleRadiansVector; vec3 angularAcceleration = GESetVector(0.0, 0.0, 0.0); // Sending it through one angular velocity later in my motion engine angleVelocity = GEAddVectors(angleVelocity, GEMultiplyVectorAndScalar(angularAcceleration, timeStep)); angleRadiansVector = GEAddVectors(angleRadiansVector, GEMultiplyVectorAndScalar(angleVelocity, timeStep)); glMultMatrixf(GEMat4FromEulerAngle(angleRadiansVector).array); Also how do I combine multiple angularAcceleration variables? Is there an easier way to transform the angular values?
    • By dpadam450
      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
      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 ( inspirate from another code (here: 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):
      Exe file (if you want to look) and models folder (for those who will download the sources):
      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:
      mat4x4_ortho(lightProjMatrix,-SHADOW_FAR,SHADOW_FAR,-SHADOW_FAR,SHADOW_FAR,NEAR,SHADOW_FAR); Shadow vertex shader:
      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
      My shadow calculation in the deferred fragment shader:
      float get_shadow_fac(vec4 light_space_pos) { vec3 shadow_coords = / light_space_pos.w; shadow_coords = shadow_coords * 0.5 + 0.5; float closest_depth = texture(shadow_map, shadow_coords.xy).r; float current_depth = shadow_coords.z; float shadow_fac = 1.0; if(closest_depth < current_depth) shadow_fac = 0.5; return shadow_fac; } I call the function like this:
      get_shadow_fac(light_space_matrix * vec4(position,1.0)); Where position is the value i got from sampling the g_position buffer
      Here is my depth texture (i know it will produce low quality shadows but i just want to get it working for now):
      sorry because of the compression , the black smudges are trees ...
      EDIT: Depth texture attachment:
  • Popular Now