# Change or fix text Background in P3D

**URL:** <https://discourse.processing.org/t/change-or-fix-text-background-in-p3d/13903>\
**Category:** Coding Questions\
**Created:** [September 10, 2019, 8:28am UTC](https://discourse.processing.org/t/change-or-fix-text-background-in-p3d/13903 "2019-09-10T08:28:41Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [September 10, 2019, 8:28am UTC](https://discourse.processing.org/t/change-or-fix-text-background-in-p3d/13903/1 "2019-09-10T08:28:41Z")

</div>

Hi people, have a new question:

When using P3D the text is written with the original background of your sketch (or any color, don’t know from where it takes the color).

I was trying to put a text but there appear a text background that I don like, much easier to see the picture:

 ![Captura%20de%20pantalla%20de%202019-09-10%2010-19-26](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/8f18da2f031079c9356574a6d029e74a6510f2d2.png)  
**Can I delete the background color of the text** or something? (in other texts I don’t have any problem, but this one is bothering me)

This is the code if it helps in something:

```auto
float b=0;

void setup(){
  size(1024,900,P3D);
  background(0);
  noStroke();
}
void draw(){
  background(0);
  b = map(mouseY,0,height,-190,200);
  pushMatrix();
  translate(width/2+200,height/2);
            pushStyle();
            fill(0,0,255);
            stroke(0,0,255);
            textSize(50);
            fill(0,0,255);
            text("Z",0,0,10);
            text("z",20,-10,10);
            text("Z",30,-50,10);
            popStyle();
  fill(255);
  beginShape();  
  vertex(-150,0);
    bezierVertex(-150,0,-10,-190,150,0);
    bezierVertex(150,0,10,190,-150,0);
  endShape(CLOSE);
  fill(0);
  ellipse(0,0,100,100);
  fill(255);
  ellipse(0,0,40,40);
  fill(122);
  beginShape();  
  vertex(-150,0);
    bezierVertex(-150,0,-10,-190,150,0);
    bezierVertex(150,0,10,b,-150,0);
  endShape(CLOSE);
  popMatrix();
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [September 10, 2019, 9:23am UTC](https://discourse.processing.org/t/change-or-fix-text-background-in-p3d/13903/2 "2019-09-10T09:23:38Z")

</div>

actually in P2D and P3D there is no background for text  
and this way it suddenly works

```auto
float b=0;

void setup() {
  size(1024, 900, P3D);
  background(0);
  noStroke();
}
void draw() {
  background(0);
  translate(width/2+200, height/2);
  draw_eye();
 // if ( b > 100) 
    draw_text();
}

void draw_eye() {
  push();
  b = map(mouseY, 0, height, -190, 200);
  fill(255);
  beginShape();  
  vertex(-150, 0);
  bezierVertex(-150, 0, -10, -190, 150, 0);
  bezierVertex(150, 0, 10, 190, -150, 0);
  endShape(CLOSE);
  fill(0);
  ellipse(0, 0, 100, 100);
  fill(255);
  ellipse(0, 0, 40, 40);
  fill(122);
  beginShape();  
  vertex(-150, 0);
  bezierVertex(-150, 0, -10, -190, 150, 0);
  bezierVertex(150, 0, 10, b, -150, 0);
  endShape(CLOSE);
  pop();
}

void draw_text() {
  push();
  textSize(50);
  fill(0, 0, 255);
  text("Z", 0, 0, 10);
  text("z", 20, -10, 10);
  text("Z", 30, -50, 10);
  pop();
}

```

and it also works with the text at

```auto
  text("Z", 0, 0);
  text("z", 20, -10);
  text("Z", 30, -50);

```

But note that here the text is drawn AFTER the shapes…

you draw the text prior, but try to raise it with `z = 10`  
and so you seem to have found some renderer bug?

 ![text3D_bug](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/ce0df9d780d3fd988276324a7bb59fec5b2aee30.png)

* * *

```auto
void draw() {
  background(0);
  translate(width/2, height/2);
  translate(200,0);
  draw_eye(); if ( b > 100) draw_text();
  translate(-400,0);
  draw_eye(); if ( b > 100) draw_text();
}

```

 ![sleepy_eye](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c35e6305cfff87b7771cbe03e85e9372c2e868c4.png)

---

<div class="post-metadata">

**Author:** ![Waboqueox](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/waboqueox/32/5643_2.png) [@Waboqueox](https://discourse.processing.org/u/Waboqueox)\
**Post date:** [September 10, 2019, 10:14am UTC](https://discourse.processing.org/t/change-or-fix-text-background-in-p3d/13903/3 "2019-09-10T10:14:56Z")

</div>

Thanks @kll, its works!! 🤗🤗

Had all untidy because of the things I was trying (change color depending on the open or close it is, the scroll of the eyelid was added after, etc…) (the entire code is too large, but all comented 😅)

```auto
and so you seem to have found some renderer bug?

```

That seems 🤔

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [September 10, 2019, 4:22pm UTC](https://discourse.processing.org/t/change-or-fix-text-background-in-p3d/13903/4 "2019-09-10T16:22:48Z")

</div>

> [@kll](#):
>
> so you seem to have found some renderer bug?

Possibly just the way that layering and compositing works in the graphics pipeline.

Some solutions:

1. change draw order – draw text last
2. render text to a PGraphics (which has a transparent background) and then place it in a z layer using image();
3. try using hint(); e.g. pg.hint(ENABLE\_DEPTH\_SORT); – this may require you to separate out your other layers as well. [hint() / Reference / Processing.org](https://processing.org/reference/hint_.html)

Trying to do 2D in 3D is often going to cause a variety of unwelcome z-fighting problems. In general it is much easier to:

1. create a P3D sketch
2. create a P2D PGraphics
3. draw your 2D scene(2) exactly as you want, with no layering problems, on the PGraphics
4. place it in your 3D space with image()