fading a generative effect to transparent

beginners
#1

I am drawing some ribbons over a moving image in a simple altered reality demonstration.

I have seen the examples of fading out effects that write a rectangle of translucent color over the effect but this always leaves a hint of the color over the top of the video.

So I am looking for a fade out that just fllters the alpha channel of the effect layer steadily to zero while the effect continues to draw over the top.

I have written this which grabs the Pixels of the FBO object and iterates through the image adjusting the alpha channel only:

  
  
    rgbaFbo.readToPixels(ofp);  
      
    for(int px=0; px<1280; px++) {  
        for(int py=0; py<720; py++) {  
            ofColor pc = ofp.getColor(px, py);  
            pc.set(pc.r, pc.g, pc.b, pc.a - 20);  
            ofp.setColor(px, py, pc);  
        }  
    }

This runs very slowly and I am convinced there must be another way to do this with a Shader or something. Unfortunately I haven’t found one and do not understand Shaders well enough to write one myself.

Thanks in advance for any help!

#2

If I understand you correctly, couldn’t you just do this:

  
  
ofSetColor(255,255,255,122);  
fbo.draw(0, 0);  
ofSetColor(255,255,255,255);  
// other drawing code
#3

thank you for such a quick reply joshua!

i think your solution just applies one permanent alpha fade to the fbo.

i would like everything in the fbo to decay incrementally every frame to 0 alpha (transparent) because i will draw more ribbons on the fbo every frame. if i don’t make them more transparent every frame they will eventually fill the screen.

#4

Turned out that all I needed was to draw directly to my ofxFX effects objects - using them like FBOs - and then apply…

  
ofClear(0, 0, 0, 40);

…each frame to fade the previously drawn effects away to transparent.

I’m learning :slight_smile:

#5

Ah, ok, I think I misunderstood what you were trying to do, and I dropped the ball in responding, oops :slight_smile:

The FBO is like a stored graphics context, so you can clear it, use multiple textures, draw it multiple places, combine things within it, apply shaders to it, and so, everything else that you can do with texture manipulation in a regular ofTexture or in drawing ofTextures to the screen. Anyways, sounds like you’re on your way.

#6

So this problem is still bugging me :slight_smile: using this:

  
ofClear(0, 0, 0, 40);

…only fades to a light shade of transparent black with alpha of 40 when applied with each frame. It seems that ofClear is blending this black colour with whatever is already in the FBO. With this in mind I did some calculations and worked out that:

  
ofClear(0, 0, 0, 25);

…is the fastest way to blend to a more transparent FBO. A lower alpha seems to take a longer time because of how ofClear seems to be blending and obviously a higher alpha will mean the FBO is less transparent.

However this is still not transparent! So I tried to create a fragment shader that just affects the alpha of a texture:

  
                                      uniform sampler2DRect backbuffer;  
                                        
                                      void main(void) {  
                                          vec4 old = texture2DRect(backbuffer, gl_TexCoord[0].st);  
                                          if(old.w <= 0.05) old.w = 0.0; else old.w -= 0.05;  
                                          gl_FragColor = old;  
  
                                      }

…but this doesn’t seem to fade to transparent either - it leaves a trace of what was in the FBO behind. I can fade the colour channels as well as the alpha but this seems to leave an alpha trace behind.

I am not a shader expert so I am probably misunderstanding how they work. I am probably also misunderstanding what ofClear does and how it is affected by different blend modes.

Can anyone enlighten me? I can’t even figure out how to initialise a FBO as transparent at the moment!

#7

I can’t even figure out how to initialise a FBO as transparent at the moment

To do that you want to do:

  
  
fbo.begin();  
ofClear(0, 0, 0, 0);  
fbo.end();

It sounds like you might be having blending problems inside your fbo? You might try playing with the different blend modes, info on what they are is here: http://www.opengl.org/sdk/docs/man/xhtml/glBlendFunc.xml. There’s also a blending example in examples/graphics that wil help you get started trying that out.