# PGraphics transparency in P3D

**URL:** <https://discourse.processing.org/t/pgraphics-transparency-in-p3d/29703>\
**Category:** Coding Questions\
**Created:** [April 28, 2021, 1:05pm UTC](https://discourse.processing.org/t/pgraphics-transparency-in-p3d/29703 "2021-04-28T13:05:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Skranker](https://avatars.discourse-cdn.com/v4/letter/s/858c86/32.png) [@Skranker](https://discourse.processing.org/u/Skranker)\
**Post date:** [April 28, 2021, 1:05pm UTC](https://discourse.processing.org/t/pgraphics-transparency-in-p3d/29703/1 "2021-04-28T13:05:28Z")

</div>

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?

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1c2f69087067a7bf20e780af88775a52ba895ffb.png)

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [April 28, 2021, 3:04pm UTC](https://discourse.processing.org/t/pgraphics-transparency-in-p3d/29703/2 "2021-04-28T15:04:31Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 28, 2021, 3:40pm UTC](https://discourse.processing.org/t/pgraphics-transparency-in-p3d/29703/3 "2021-04-28T15:40:14Z")

</div>

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**
>
> ```auto
> 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);
> }
> 
> ```

`:)`

---

<div class="post-metadata">

**Author:** ![Skranker](https://avatars.discourse-cdn.com/v4/letter/s/858c86/32.png) [@Skranker](https://discourse.processing.org/u/Skranker)\
**Post date:** [April 28, 2021, 4:35pm UTC](https://discourse.processing.org/t/pgraphics-transparency-in-p3d/29703/4 "2021-04-28T16:35:02Z")

</div>

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!