PGraphics transparency

Core Library Questions

m.peres

in Core Library Questions • 2 months ago

I am developing a project in Processing and I have now stumbled across this problem that is melting my brain. Whenever I try to set a PGraphics to fully transparent it fails:

PGgraphics with smoth() and calling background(0, 0):

It does clear the buffer, however transparent and semi-transparent pixels are draw instead using the colour used in the background function, in this case black. In my case, the white text is being drawn with a black outline around.

Following this topic https://forum.processing.org/topic/2-0xx-how-to-set-p2d-p3d-pgraphics-pixels-to-transparent-via-the-pixel-array I kind of managed to clear reset a PGraphics to transparent using noSmooth(). However as far as I understood this workaround was no need anymore as the bug was fixed.

I would be glad if anyone could shed some light on this topic. My current config are:

MacBook with OSX 10.8.4

Intel HD Graphics 4000

and Processing 2.0.1 using P3D mode.

Replies(6)

amnon.owed

Re: PGraphics transparency

2 months ago

Changed topic type to questions.

Try using clear() and make sure it's within beginDraw() + endDraw().

Otherwise show a code example that displays the problem.

m.peres

Re: PGraphics transparency

2 months ago

Hey Amnon, thanks for the reply.

I tried clear() without any success, so I followed up to make a standalone code to demonstrate my problem and to my surprise I could not replicate the problem. So after a few hours bashing my head on 'why', I ended up tracing the root of the problem to OpenGL retained mode (PShape). Here is a sample code:

PGraphics textLayer;

PGraphics bgLayer;

PShape shapeTest;

PFont font;

void setup() {

size(800, 800, P3D);

textLayer = createGraphics(width, height, P3D);

bgLayer = createGraphics(width, height, P3D);

String[] fontList = PFont.list();

font = createFont(fontList[round(random(fontList.length-1))], 200, true);

textLayer.beginDraw();

textLayer.fill(255);

textLayer.noStroke();

textLayer.textFont(font);

textLayer.textAlign(CENTER, CENTER);

textLayer.text("TESTE", width/2, height/2);

textLayer.endDraw();

shapeTest = createShape();

shapeTest.beginShape();

shapeTest.noStroke();

shapeTest.noFill();

shapeTest.textureMode(NORMAL);

shapeTest.texture(textLayer);

shapeTest.vertex(-width/2, -height/2, 0,0);

shapeTest.vertex(width/2, -height/2, 1,0);

shapeTest.vertex(width/2, height/2, 1,1);

shapeTest.vertex(-width/2, height/2, 0,1);

shapeTest.endShape(CLOSE);

bgLayer.beginDraw();

//Black outline

bgLayer.background(0, 0);

//Black outline the same

//bgLayer.clear();

//Red outline

//bgLayer.background(255, 255, 255, 0);

bgLayer.translate(width/2, height/2);

bgLayer.shape(shapeTest);

bgLayer.endDraw();

}

void draw() {

background(125);

image(bgLayer, 0, 0);

}

amnon.owed

Re: PGraphics transparency

2 months ago

To start with a sidenote, in your code example you are not using textLayer.clear(); on the initial textLayer (this is relevant because PGraphics don't start out transparent). More importantly, I have found the real problem and the solution.

To pinpoint it I made a test sketch that more clearly separated the 4 different stages/options, which were present in your sketch already. I have added the test sketch below. I am using white-on-white so only the incorrect pixels will light up (which are none under option 1 direct drawing, so it starts all white). Press the mouse to cycle through the 4 options and see the result (the name of the option is displayed in the window title).

The problem is the interpolation of semi-transparent pixels on a transparent PGraphics. These pixels interpolate to the fully transparent background color. Suppose you draw a text (or any shape) on the transparent PGraphics. For anti-aliasing purposes it will have some semi-transparent pixels. When the background color is fully transparent black, the pixels will interpolate to transparent black. When the background color is fully transparent white, the pixels will interpolate to transparent white. If you then display the transparant PGraphics on a background with non-matching opaque color, the semi-transparent pixels will stand out. The default transparent background color used with clear() is black, so it will only look good on black/dark backgrounds.

The solution is to match the color of the transparent background used to clear a PGraphics with the color of the background it will eventually be displayed upon. To test this change the used background color in the test sketch below to white (which is in line with the actual background color) and you will see all artifacts in the semi-transparent pixels disappear.

At least this is my theory.

Test Code

PGraphics textLayer, pg1, pg2;
int option;
color backgroundColor = color(0); // color(255); // the transparency is enforced below
void setup() {
size(800, 800, P3D);
PFont font = createFont("Arial", 200, true);
textFont(font);
textAlign(CENTER, CENTER);
textLayer = createGraphics(width, height, P3D);
textLayer.beginDraw();
textLayer.background(backgroundColor, 0);
textLayer.noStroke();
textLayer.fill(255);
textLayer.textFont(font);
textLayer.textAlign(CENTER, CENTER);
textLayer.text("TEST", width/2, height/2);
textLayer.endDraw();
PShape shapeTest = createShape();
shapeTest.beginShape();
shapeTest.noStroke();
shapeTest.noFill();
shapeTest.textureMode(NORMAL);
shapeTest.texture(textLayer);
shapeTest.vertex(0, 0, 0, 0);
shapeTest.vertex(width, 0, 1, 0);
shapeTest.vertex(width, height, 1, 1);
shapeTest.vertex(0, height, 0, 1);
shapeTest.endShape(CLOSE);
pg1 = createGraphics(width, height, P3D);
pg1.beginDraw();
pg1.background(backgroundColor, 0);
pg1.image(textLayer, 0, 0);
pg1.endDraw();
pg2 = createGraphics(width, height, P3D);
pg2.beginDraw();
pg2.background(backgroundColor, 0);
pg2.shape(shapeTest);
pg2.endDraw();
}
void draw() {
background(255);
switch(option) {
case 0:
frame.setTitle("1. Direct drawing");
fill(255);
text("TEST", width/2, height/2);
break;
case 1:
frame.setTitle("2. textLayer PGraphics");
image(textLayer, 0, 0);
break;
case 2:
frame.setTitle("3. PGraphics + textLayer PGraphics");
image(pg1, 0, 0);
break;
case 3:
frame.setTitle("4. PGraphics + PShape + textLayer PGraphics");
image(pg2, 0, 0);
break;
}
}
void mousePressed() {
option = ++option%4;
}

m.peres

Re: PGraphics transparency

2 months ago

Hey Amnon,

I kind of reached a similar conclusion, however, the problem is when I try to use an image with different tones of transparency and PShape, please use ball.png as texture for the PShape obejct. See how the top row (Processing) compares to the bottom row (Photoshop) on my own machine:

Ball image:

https://docs.google.com/file/d/0Byc_CK5OAMcmMUZYTGo5aUNEbk0/edit?usp=sharing

Processing x Photoshop:

https://docs.google.com/file/d/0Byc_CK5OAMcmWkI4RXg2azQ1TDA/edit?usp=sharing

amnon.owed

Re: PGraphics transparency

2 months ago

When I replace the textLayer PGraphics in my test code as posted above with the ball.png you provided, then I get the top result with options 3 and 4 and I get the bottom result with option 2. I think this can be explained by the fact that option 2 blends against a background (as is always the case in Photoshop) while options 3 and 4 blend against transparency. So that's comparing apples and oranges. The similar cases 2 and Photoshop actually do produce the same result. Although that conclusion doesn't solve your problem. I think the best you can do is work towards your desired Processing output. Try using blendMode. Also, to get finer control over the exact blend math you could write a shader. There are shaders with the Photoshop blending modes available.

m.peres

Re: PGraphics transparency

2 months ago

Thanks Amnon, I really appreciate you taking the time to shed some light on this topic. I will look into writing a custom shader.

Top Reply