PGraphics transparency in P3D

Processing Coding Questions
1

Hey guys,

i am trying to draw a pgraphics image on top of the rest of the sketch here.

It seems to behave weirdly though. In this example i am drawing a line pattern, at z = -50, an ellipse at 0 and the pgraphics image on z = 50

The pgraphics interacts with the circle as expected, it has a transparent background.

With the lines however, it draws a white background on top of the lines. I want the pgraphics image to consistently draw with its transparent background.

What is going on here?

PGraphics pg;

void setup() {
  size(1000, 700, P3D);

  pg = createGraphics(200, 200, P2D);
}


void draw() {

  background(255);


  translate(0, 0, -50);

  //FOR LOOP LINE PATTERN
  for (int i = 0; i <= width; i+=width/50) {
    stroke(0, 0, 200);
    strokeWeight(3);
    if (i <= width-1)line(i, 0, i, height);
  }

  translate(0, 0, 50);


  //SIMPLE BLACK ELLIPSE
  fill(0);
  ellipse(width/2, height/2, height, height);


  translate(0, 0, 50);
  
  //DRAW PGRAPHICS WITH TRANSPARENT BACKGROUND
  pg.beginDraw();
  //pg.clear();
  //pg.background(255, 0);
  pg.fill(255, 0, 0);
  pg.noStroke();
  pg.ellipse(pg.width/2, pg.height/2, pg.width, pg.width);
  pg.endDraw();
  
  translate(0, 0, 50);
  imageMode(CENTER);
  image(pg, mouseX, mouseY);
  
  translate(0, 0, -50);



  println(pg.format);
}

debugImg
debugImg947×564 10.6 KB

2

I noticed the black ellipse is actually drawn at z=50.

However, I don’t think that will solve your transparency problem. My guess is there’s some weirdness with the pgraphics and ellipse being drawn on the same z plane?

1 Like
3

Hello,

Try this in setup():
hint(ENABLE_DEPTH_SORT);

Also look look up hint() in the references.

I have also used this when I have text in P3D that is transformed along Z-axis.

Added some text to see this:

Your code with modifications 
PGraphics pg;

void setup() 
  {
  size(1000, 700, P3D);
  pg = createGraphics(200, 200, P2D);
  //hint(ENABLE_DEPTH_TEST);
  hint(ENABLE_DEPTH_SORT);
  textSize(24);
  }

void draw() 
  {
  background(255);
  translate(0, 0, -50);

  //FOR LOOP LINE PATTERN
  for (int i = 0; i <= width; i+=width/50) 
    {
    stroke(0, 0, 200);
    strokeWeight(3);
    if (i <= width-1)line(i, 0, i, height);
    }

  translate(0, 0, 50);

  //SIMPLE BLACK ELLIPSE
  fill(0);
  ellipse(width/2, height/2, height, height);

  translate(0, 0, 50);
  
  //DRAW PGRAPHICS WITH TRANSPARENT BACKGROUND
  pg.beginDraw();
  //pg.clear();
  //pg.background(255, 0);
  pg.fill(255, 0, 0);
  pg.noStroke();
  pg.ellipse(pg.width/2, pg.height/2, pg.width, pg.width);
  pg.endDraw();
  
  translate(0, 0, 50);
  imageMode(CENTER);
  image(pg, mouseX, mouseY);
  
  fill(0, 255, 0);
  text("TEXT", mouseX+100, mouseY, 0 );
  
  //translate(0, 0, -50);
  println(pg.format);
  }

:)

4 Likes
4

Thanks for this i had already tried using hint(), not with sort though. Will have to look into it some more in the future.

Your solution works.
Thanks!

2 Likes