How to overlay a png with a transparent background?

This is seemingly a simple matter, but not finding answers for it…

I just want to overlay a png with a transparent background on top of other stuff I’m drawing in oF. I’ve deleted an image’s background with the magic wand in paint.net, but in oF it still has a black background when I load and draw it with ofImage.

If I put it in a BlendMode block the background goes away, but I don’t want the non-transparent parts to blend, just sit on top.

there’s some add-ons with mask and blending…
(if you don’t mind to include external stuff)

@moebiussurfing Hey, thanks for the links. Do you know which of those three is simplest to use for what I want to do?

Hey @roymacdonald , do you know of a way to overlay pngs without addons?

make sure the png you are using was saved using transparency in the file format.
use ofEnableAlphaBlending()
and ofDisableDepthTest()

1 Like

yes. you dont need any addon for that. what @dimitre mentions is what you need.

Yeah, thanks, @dimitre , I almost fell victim to the villainous wiles of DOCTOR ADDON. I did a simple test overlaying the png over a colored rectangle and it works fine.

But for my specific needs, I’m still having a little trouble. I have a couple of images that I’m already doing additive alpha blending with. I want to overlay the png on top of those, without having its color affected by the additive blending. I’ve tried

ofEnableBlendMode(OF_BLENDMODE_ADD);

//draw stuff

ofDisableBlendMode();

ofEnableAlphaBlending();

//overlay png

ofDisableAlphaBlending();

and

ofEnableAlphaBlending();|

ofEnableBlendMode(OF_BLENDMODE_ADD);|
//stuff|
ofDisableBlendMode();|
//overlay|
ofDisableAlphaBlending();|

and

ofEnableBlendMode(OF_BLENDMODE_ADD);
//stuff
ofEnableBlendMode("various other blend modes");
ofDisableBlendMode();

but none of these produce the desired effect. Do I need to do something convoluted like write the additive-blended images to a single new image and then using ofEnableAlphaBlending()?

Hi @s_e_p
can you post the results you are getting and maybe a mockup made in some photo editing app to show what it is that you want to achieve?
if none of this combinations work you can always draw into an fbo all the additive layers and then draw the fbo and on top draw the png using alpha blending

Here’s the result when trying

ofEnableBlendMode(OF_BLENDMODE_ADD);
//draw  camera images
//ofEnableAlphaBlending(); //this doesn't change anything
//draw logo
ofDisableBlendMode();

the logo looks transparent, presumably because it’s having the camera image colors added it to it. the logo also doesn’T appear from the start. I’d like it to look solid like this:

ohh wait are you setting the color with ofSetColor(255,255,255,255) before drawing the image? otherwise it will draw with the previously set color, which might have an alpha value (the fourth value) less than 255 which would make it transparent.

Also maybe try OF_BLENDMODE_ALPHA for the logo, and maybe even for all of the layers. The logo should be on a transparent background. Have a look at the blendingExample. The rainbow circle is a .tiff on a transparent background; the only blend mode where it looks opaque is OF_BLENDMODE_ALPHA.

Sometimes it can help to render into a pair of ofFbos too.

Yeah, I needed to ofSetColor(255) like you said. The alpha-setting stuff was so deep in my classes that I forgot it persists into ofApp::update(). And @TimChi is also right that I need to do

ofEnableBlendMode(OF_BLENDMODE_ADDITIVE);
//blended stuff
ofEnableBlendMode(OF_BLENDMODE_ALPHA);
//overlay
ofDisableBlendMode();

Thank you!

Glad to know you solved it.
In the future try enclosing your drawing commands between ofPushStyle and ofPopStyle();

ofPushStyle();
//your drawing commands
ofPopStyle();

ofPopStyle() stores the current style into a stack and ofPopStyle() takes out the style from the stack and restores it.

what gets saved and restored with these calls are

fill
blendingMode
smoothing
circleResolution
sphereResolution
curveResolution
lineWidth	
polyMode
rectMode
drawBitmapMode
backgroundColor
2 Likes