getting outline on transparent ofImage in fbo

[memphistechno]

  
  
ofImage cat0, cat1, cat2;  
cat0.loadImage("bottom.tif");  
cat1.loadImage("mouth.tif");  
cat2.loadImage("top.tif");  
  
catFbo.begin();  
    ofSetColor(255,255);  
    ofTranslate(catHeadPositionVec);  
        cat0.draw(0,0,size,size);  
        cat1.draw(0,0,size,size);  
        cat2.draw(0,0,size,size);  
catFbo.end();  
  

results in these awful white outlines, regardless if I use PNG or TIF. Exported from GIMP on Linux.

[jvcleave]

Are you using ofEnableAlphaBlending() somewhere else in the app?

[memphistechno]

yes sir, it seems to change the outline when I change the ofBackground()

every other image in that screenshot is the same format/type: partially transparent PNG or TIF under the same GL conditions (alpha blending, GL_RGBA fbo), the only difference is I am scaling happycat up, when the others images have been resized down

[memphistechno]

loading much larger images diminishes the effect


[memphistechno]

believe it or not, this is going up in a respectable museum

[theo]

Hi Bill,

The issue here is that when you have a clear FBO it will have some default clear color.

That clear color could be:
(0,0,0,0); black pixels with no transparency

Or
(255,255,255,0); white pixels with no transparency

Or basically any color you can think of.

The issue you see with the edges is when the pixels in your png textures are not completely clear or completely opaque ( this is usually at the edges )

These semi-transparent pixels from the png are blended with your clear color.

To see this try adding these lines after your fbo allocate code

  
  
catFbo.begin();    
    ofClear(255,0,0,0);   
catFbo.end();  
  

Now you’ll see the edges have a red tint to them.

Anyway I think this can be solved by using ( after the catFbo.begin(); call in draw ):

glBlendFuncSeparate(GL_ONE, GL_SRC_COLOR, GL_ONE, GL_ONE_MINUS_SRC_ALPHA);

see topic: http://forum.openframeworks.cc/t/weird-problem-rendering-semi-transparent-image-to-fbo/2215/0