transparent png has white edge artifact

I’m using ofImage and transparent png. The png is basically a white circle with a transparent background. However, there’s a border artifact that occasionally shows up on the bottom and right of the image where it should be black. See the attached image the bottom blue and red circle have a line artifact on the right of them.

I think it’s a subpixel thing or some type of border being added. I’ve set the x/y values of objects to floor() so that they don’t land on a subpixel and that seemed to fix it a bit (it was worse) but it’s still there. Sometimes it goes away and sometimes it’s there.

Has anyone else experienced this or have an idea how to fix it?

![](http://forum.openframeworks.cc/uploads/default/1002/Screen shot 2011-03-06 at 4.26.20 PM.png)

Have you tried this on a device yet? I noticed the same artefacts in the simulator once, but no problems at all on the device.

I had the same problem. So try:

  1. As daanvanhasselt says try it on a device.

  2. Make sure that your positions are aligned to pixel boundaries. http://forum.openframeworks.cc/t/png-image-±transparent-background/5426/0

  3. Make a PNG with separation between the mark and the circle

Thanks for the ideas.

1. As daanvanhasselt says try it on a device.

I have a first gen iphone and in both the simulator AND the device I see this issue. However, I’ve had 2 people with iphone 4 test and both said they didn’t see this - although there was also pixel doubling for them because the resolution is higher and I haven’t addressed that yet. I haven’t had anyone get to test on 3g or 3gs yet.

**2. Make sure that your positions are aligned to pixel boundaries. http://forum.openframeworks.cc/t/png-image-±transparent-background/5426/0

Yeah, I’m using floor(x), floor(y) but that doesn’t seem to fix it entirely. I’m also tweening the size of the image, but I don’t think that’s an issue since it shows the artifact even without the tween.

3. Make a PNG with separation between the mark and the circle

I’ve also tried this. I’ve made significant transparent space between the circle and edges, but the edges still show this. I’ve also tried making it a white circle with black background and use a blending mode to remove the black. The same issue occurs. It’s odd because the bigger circles are all the same png and all aligned to a pixel boundary - yet the blue one shows the artifact and the two others don’t.

Thanks for the thoughts so far, I’m kind of out of ideas. I’m thinking maybe I should try to copy the ofImage into a ofTexture and see if the same thing happens.

If you send me your project I’ll test it for you on my iPhone 3gs and iPad 1. I fixed the ‘retina’ issue as suggested in a thread around here, but to save you the trouble:

Open the iPhone + OF Lib.xcodeproj, and in EAGLView.mm, change initWithFrame so it looks like this

  
  
- (id) initWithFrame:(CGRect)frame  
{  
	if((self = [super initWithFrame:frame])) {  
        // Get the layer  
        CAEAGLLayer *eaglLayer = (CAEAGLLayer *)super.layer;  
		  
        eaglLayer.opaque = true;  
		eaglLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:  
										[NSNumber numberWithBool:YES], kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8, kEAGLDrawablePropertyColorFormat, nil];  
		  
  
		// added for hires support  
		if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)]) {  
			if ([[UIScreen mainScreen] scale] > 1)  
				// code below doesn't work on iPad 3.2 OS,  
				// but doesn't need to because scale is 1.0  
				[self setContentScaleFactor:[[UIScreen mainScreen] scale]];  
		}  
		  
		// TODO: add initSettings to override ES2Renderer even if available  
        renderer = [[ES2Renderer alloc] init];  
		  
        if (!renderer) {  
            renderer = [[ES1Renderer alloc] init];  
		  
            if (!renderer) {  
			[self release];  
			return nil;  
		}  
        }  
		  
		[[self context] renderbufferStorage:GL_RENDERBUFFER_OES fromDrawable:eaglLayer];  
		  
		  
		self.multipleTouchEnabled = true;  
		self.opaque = true;  
		activeTouches = [[NSMutableDictionary alloc] init];  
	}  
	  
	return self;  
}  
  

Then go to ofAppiPhoneWindow.mm and from

  
  
[ofxiPhoneGetGLView() startRender];  
  

to

  
  
float * bgPtr = ofBgColorPtr();  
  

should be like this:

  
  
	[ofxiPhoneGetGLView() startRender];  
  
	// added for hires report  
	int ofwidth = ofGetWidth();  
	int ofheight = ofGetHeight();  
	  
	if ([[UIScreen mainScreen] respondsToSelector:@selector(scale)]) {  
		ofwidth *= [[UIScreen mainScreen] scale];  
		ofheight *= [[UIScreen mainScreen] scale];  
	}  
	  
	// this could be taken out and included in ofAppBaseWIndow  
	if(orientation == OFXIPHONE_ORIENTATION_PORTRAIT || orientation == OFXIPHONE_ORIENTATION_UPSIDEDOWN)  
		glViewport( 0, 0, ofwidth, ofheight );  
	else  
		glViewport( 0, 0, ofheight, ofwidth );  
	  
	float * bgPtr = ofBgColorPtr();  
  

and that’s it I guess!

Cheers

Thanks! I really appreciate it. I’ll package up the code and send it over. :slight_smile: I tried redoing the images again with no luck. Maybe another pair of eyes will help - plus I only have a first gen phone to test on myself.

Hi,
have white edges on png too.
Solved by clearing at the beginning of draw(), so the images will not keep on drawing over and over

ofClear(0, 0, 0, 0);
1 Like