Re : PGraphics transparency

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

1. PGraphics textLayer, pg1, pg2;
2. int option;
3. color backgroundColor = color(0); // color(255); // the transparency is enforced below
   
4.  
5. void setup() {
6.   size(800, 800, P3D);
7.   PFont font = createFont("Arial", 200, true);
8.   textFont(font);
9.   textAlign(CENTER, CENTER);
10.  
11.   textLayer = createGraphics(width, height, P3D);
12.   textLayer.beginDraw();
13.   textLayer.background(backgroundColor, 0);
14.   textLayer.noStroke();
15.   textLayer.fill(255);
16.   textLayer.textFont(font);
17.   textLayer.textAlign(CENTER, CENTER);
18.   textLayer.text("TEST", width/2, height/2);
19.   textLayer.endDraw();
20.  
21.   PShape shapeTest = createShape();
22.   shapeTest.beginShape();
23.   shapeTest.noStroke();
24.   shapeTest.noFill();
25.   shapeTest.textureMode(NORMAL);
26.   shapeTest.texture(textLayer);
27.   shapeTest.vertex(0, 0, 0, 0);
28.   shapeTest.vertex(width, 0, 1, 0);
29.   shapeTest.vertex(width, height, 1, 1);
30.   shapeTest.vertex(0, height, 0, 1);
31.   shapeTest.endShape(CLOSE);
32.  
33.   pg1 = createGraphics(width, height, P3D);
34.   pg1.beginDraw();
35.   pg1.background(backgroundColor, 0);
36.   pg1.image(textLayer, 0, 0);
37.   pg1.endDraw();
38.  
39.   pg2 = createGraphics(width, height, P3D);
40.   pg2.beginDraw();
41.   pg2.background(backgroundColor, 0);
42.   pg2.shape(shapeTest);
43.   pg2.endDraw();
44. }
45.  
46. void draw() {
47.   background(255);
48.   switch(option) {
49.     case 0:
50.       frame.setTitle("1. Direct drawing");
51.       fill(255);
52.       text("TEST", width/2, height/2);
53.       break;
54.     case 1:
55.       frame.setTitle("2. textLayer PGraphics");
56.       image(textLayer, 0, 0);
57.       break;
58.     case 2:
59.       frame.setTitle("3. PGraphics + textLayer PGraphics");
60.       image(pg1, 0, 0);
61.       break;
62.     case 3:
63.       frame.setTitle("4. PGraphics + PShape + textLayer PGraphics");
64.       image(pg2, 0, 0);
65.       break;
66.   }
67. }
68.  
69. void mousePressed() {
70.   option = ++option%4;
71. }