FboTrailing example with transparent background

advanced
#1

In the examples folder there is an ofApp that creates a trailing effect by blending several ofFbo renders without calling ofClear. It uses ofDrawRectangle with a given color and a fadeAmount as alpha.

Is it possible to make the same but with a completely transparent background? Any openGL hack that allows this?

One solution I’ve thought is having

vector<ofFbo> fbos( fadeAmount );

Then at every loop of my application iterate over one of those FBOs and do:

// Main OF loop begin
//
fbos[current].begin();
ofClear(0); // Completely clear
... // Draw stuff for trailing effect
fbos[current].end();

// Draw all fbos on top of each other
screenFbo.begin();
for(ofFbo& fbo : fbos)
{
    fbo.draw(...);
}
screenFbo.end();
screenFbo.draw(...); // Final result from all fbos
if(current++ == fbos.size()) current = 0;
//
// Main OF loop end

I haven’t tested this but I believe it should work using the correct blend mode, however it is extremely costly regarding the amount of FBOs required. Something tells me there must be a better way…Might not?

Cheers

#2

you can just clear the fbo once with transparency 0 and then keep drawing on it without clearing, no?

#3

Well, then the trails will not fade away.

Maybe I could use ofClear with a known color, and then check for that color in a shader and discard it. Still hacky though… I might be overthinking this

#4

Hi, to fade the trails you could draw a semitransparent rect on top. If you get artifacts you might want to allocate the FBO to use floats.

#5

Thanks! However, I want to draw some trails on a fully transparent fbo, because I’m using that texture as overlay for a video stream. If I use a semitransparent rect (like the fboTrails example) then the video will also be faded away.

#6

Hmm, could you perhaps do the trails separately and then composite them with the video?

#7

In that case it’s not easy to create a fading trail, as in the effect the example creates. Right?

#8

Hi,

Not entirely sure how it’s all supposed to blend together in the end, but if I wanted fading trails on top of a video and the trails can be one colour I would:

Setup:

  • Allocate an FBO
  • Clear it to black

Draw:

  • Bind this FBO

  • Draw semitransparent black rect, (this gives you the fade)

  • Draw your particle in white

  • Unbind

  • Draw the video

  • Use additive blend (and colorize it with whatever colour you have set with ofSetColor) or a shader to blend the trails FBO on top.

There’ll be a way to do it with alpha as well, but the caffeine hasn’t really hit yet so it’s escaping me.

#9

Maybe my caffeine level is also at a minimum, but

How do I prevent the semitransparent black rect to tint the video? Also it won’t be semitransparent as the lack of ofClear for the trailing fbo will make it pitch black after some frames.

If that’s what you mean by additive blend please elaborate a bit.

#10

Hi,

So you’ll end up with a black and white FBO with your trails, if you draw that on top of your video with additive blending the black will become transparent like so:

(Just nicked this from the Internets, it shows individual particles being drawn so it’s not the same, but you can see the additive blending in effect )

If you have a color other than white set (via ofSetColor) when your draw your trail FBO on top of the video, the trail FBO will use that color instead of white.

1 Like
#11

So:

x + 0 = x;

Go figure! I knew it was something simple!
Thanks! :smiley:

#12

Hi, Is this how to do it suggested by @hahakid ?

 //--------------------------------------------------------------
    void ofApp::setup(){
        
        ofSetBackgroundColor(100, 100, 100);

        fbo.allocate(400, 400, GL_RGBA, 4);
        fbo.begin();
        ofClear(ofColor(0,0,0,0));
        fbo.end();  
    }

    //--------------------------------------------------------------
    void ofApp::draw(){

        ofEnableBlendMode(OF_BLENDMODE_ALPHA);
        
        fbo.begin();

        ofSetColor(0,0,0,20);
        ofDrawRectangle(0, 0, 400,400);
        
   
        ofSetColor(255, 255, 255);
        ofTranslate(200, 200);
        ofNoFill();
        ofRotate(ofGetElapsedTimef()*50,1,0,0.5);
        ofDrawBox(0, 0, 0, 200);

        fbo.end();
        
        ofEnableBlendMode(OF_BLENDMODE_ADD);
        
        ofSetColor(0, 255, 0);
        fbo.draw(0, 0);
    }

Result:

1 Like