The fade problem: best practices for blending two images?

I have an FBO that has an image drawn to it, then when a new image is selected to be drawn to it, it is drawn semi-transparently so that it has the effect of “fading in” on top of the other image. This is meant to have the effect of transitioning between the images. The problem is that you end up with little ghost traces of the old image that is not entirely erased. What are some approaches to this problem you have used in the past?

This isn’t a great example, but you can see in the upper middle section a bit of “left over” image.

I can think of some more complicated approaches to this, like copy the FBO to a new FBO object when a new image is loaded, and then draw that FBO on top of the other and fade it out over time. Or, break open the FBO pixels and do some direct manipulation, lerping the values, but this sounds expensive.

How about using a shader with two textures? GLSL has a mix() function (and lots of great functions in general) where you can mix two variables (float, vec3, etc) together with a float (0.0 - 1.0). And using the gpu for this is really fast!

1 Like

Also check out the examples/gl/fboTrailsExample/
Floating point FBOs should fix the ghosting issue you mention.

The fboTrailsExample demonstrates the difference.

1 Like

WOW thank you both! For the sake of ease I went with Theo’s suggestion and it worked instantly.

Literally as easy as changing the allocation mode
fbo.allocate(dimensions, dimensions, GL_RGBA32F_ARB);

2 Likes