UNANSWERED: Vertex texture anti-alias or alpha transparancy png problem

hype1

Hi,

I have an issue which I cannot resolve even after spending hours and hours trying to. I hope someone is able to help me.

I am using vertices with a transparent white png texture (an icon) in front of a shape with a fill. I use vertices is because I want to rotate these shapes later on but for clarity purposes I have kept my setup as simple as possible while being able to reproduce this problem.

Here is my code:

PImage icon1;
color bgColor = color(255, 255, 110);
color buttonBgColor = color(140, 255, 255);
int w = 300;
int h = 300;

void setup() {
  size(400, 400, P3D);
  noStroke();
  smooth(8);
  icon1 = loadImage("icon1a.png");
  blendMode(BLEND);
}

void draw() {
  background(bgColor);
  pushMatrix();    
    translate(width / 2, height / 2, 0);     
    beginShape();
      fill(buttonBgColor);
      vertex(-w/2, -h/2, 0, 0, 0); // TL
      vertex(w/2, -h/2, 0, 1, 0);  // TR
      vertex(w/2, h/2, 0, 1, 1);   // BR
      vertex(-w/2, h/2, 0, 0, 1);  // BL 
    endShape(CLOSE);
    beginShape();
      noFill();
      textureMode(NORMAL);
      texture(icon1);
      vertex(-w/2, -h/2, 0, 0, 0); // TL
      vertex(w/2, -h/2, 0, 1, 0);  // TR
      vertex(w/2, h/2, 0, 1, 1);   // BR
      vertex(-w/2, h/2, 0, 0, 1);  // BL 
    endShape(CLOSE);
  popMatrix();
}

And here is the resulting image:

As you can see, there is a problem with anti-aliasing around the white icon png. I found that this is because my texture is scaled down. My 'icons1a.png' is 400x400 pixels (the circle is placed on a transparent background with a certain margin around it), but my shape is 300x300 pixels. When I set the width and height of my shape to 400x400 this dark line disappears. Since I will rotate and work with z-values later on I cannot have my icon the exact size of the shape. I've tried different blendmodes to no avail.

What is going on here? Who knows a solution? Is this a bug in the OPENGL renderer?

Here you will find the used png image:

Poersch

This problem is most probably related to your image. In PNG files, even the fully transparent background actually has a color, in your case it seems to be black. While invisible in the most cases it gets obvious when OpenGL has to up- or down-scale your image. The following image should scale without any problems: test

hype1

Yes that's a version of the png that does work as expected. Thanks! Now I have tried everything in both Adobe Illustrator and Photoshop with the Save For Web command. I used a background in my documents, white, with 0% opacity. This does not help me. Any thoughts on how to get rid of this in my png's that I need to export from Adobe Illustrator?

Poersch

Great! I also use Photoshop. There are many ways:

• Create a new document in the desired size.
• Fill the background in the shapes color/pattern (in this case white).
• Use the selection/masking/vector tools to create a selection in your shapes form/size.
• Now select Layer > New > Layer via Copy.
• Hide the Background layer
• Save file as PNG.

Or:

• Open your PNG file.
• Select Edit > Fill, choose the wanted color/pattern, mark Preserve Transparency and click OK.
• Save file.

Or:

• Open your PNG file.
• Mark the little checkerboard icon next to "Lock" in your Layers window (tooltip: Lock transparent pixels).
• Fill the layer in the desired color/pattern.
• Save file.

hype1

Thanks for your help. I understand what you are doing here and I have seen that in my example above your method does work. However, I am working on a sketch which draws on PGraphics to enable layered graphics. Unfortunately I encounter the same issue, even with your corrected png.

Here is my code which reproduces the problem:

PImage icon1;
PGraphics iconsGL;
color bgColor = color(255, 0, 0);
color buttonBgColor = color(140, 255, 255);
color strokeColor = color(255, 255, 255);
int w = 300;
int h = 300;

void setup() {
  size(500, 500, P3D);
  frameRate(25);
  noStroke();
  smooth(8);
  blendMode(BLEND);
  iconsGL = createGraphics(width, height, P3D);
  icon1 = loadImage("test.png");  
}

void draw() {
  background(bgColor);
  iconsGL.beginDraw();
    iconsGL.smooth(8);
    iconsGL.blendMode(BLEND);  
    iconsGL.pushMatrix();    
      iconsGL.translate(width / 2, height / 2, 0);   
      iconsGL.beginShape();
        iconsGL.fill(buttonBgColor);
        iconsGL.stroke(strokeColor);       
        iconsGL.strokeWeight(4);
        iconsGL.vertex(-w/2, -h/2); // TL
        iconsGL.vertex(w/2, -h/2);  // TR
        iconsGL.vertex(w/2, h/2);   // BR
        iconsGL.vertex(-w/2, h/2);  // BL 
      iconsGL.endShape(CLOSE);
      iconsGL.beginShape();
        iconsGL.noFill();
        iconsGL.textureMode(NORMAL);
        iconsGL.texture(icon1);
        iconsGL.vertex(-w/2, -h/2, 0, 0, 0); // TL
        iconsGL.vertex(w/2, -h/2, 0, 1, 0);  // TR
        iconsGL.vertex(w/2, h/2, 0, 1, 1);   // BR
        iconsGL.vertex(-w/2, h/2, 0, 0, 1);  // BL 
      iconsGL.endShape(CLOSE);
    iconsGL.popMatrix();
  iconsGL.endDraw();
  image(iconsGL, 0, 0);
}

Here is the screenshot:

And here is your png again:

It seems the backgroundcolor appears around the icon because the alpha value is blended with the icon background (first shape drawn).

hype1

I added iconsGL.blendMode(ADD); after iconsGL.texture(icon1) // line 38 and this works when the .png is white, but with other colors this does not work. Also the use of tint() is not working when using blendmode ADD. Any ideas?

hype1

Sigh... this post is now accidentally labeled 'answered' while it is not. I cannot remove 'Accepted Answer' from replies above (I'm new to this type of forum and I didn't knew what it meant).

hype1

Still looking for an answer to my problem. Who is able to help me?

Poersch

Sorry for the uber-late reply, took my time off the forums.

The alpha blending on alpha enabled PGraphics objetcs was a little buggy in earlier versions of Processing, they fixed that in Processing 3.0. Reference