Text partly invisible with P3D renderer

Hi,

i have a problem using the P3D renderer. I am drawing some text and icons to a pgraphics object. This worked well using the Java2D renderer. To be able to introduce 3D rotation, I now switched to the P3D renderer. The poblem: Now sometimes only part of the text is rendered as shown in the following example where the text should read “California”.

Any suggestions?

Regards and thanks

Uli

It is hard to say without seeing your code.

Generic advice: in 2D the order in that you draw determines what is covering what (like on a canvas). In 3D it’s different. Here the z value determines what is behind what. The order in that you draw doesn’t matter anymore.

So in your example it might be the case that you should use a translate(0,0,2); right before text() command

OR perhaps post your code please

2 Likes

Hi, thanks for your reply. I tried to to use the translate function as suggested by you but it did not help. Here is some sample code which also leads to the shown error:

	public static void main(String[] args) {
		ArrayList<String> _tagwords = new ArrayList<String>();

		String[] a = { "MAIN" };
		Test3D fw = new Test3D();
		PApplet.runSketch(a, fw);
	}

	public void settings() {
		size(800, 600, P3D);
	}

	public void setup() {
	}

	public void draw() {

		textLayer = createGraphics(iwidth, iheight, P3D);

		colorMode(RGB, 255);

		String font = "Bebas";

		textLayer.beginDraw();
		textLayer.textAlign(CENTER);
		int mainFontSize = 1000;

		font = "Bebas Neue Bold";
		textLayer.textFont(createFont(font, mainFontSize));
		textLayer.fill(color(255,255,255));
		
		textLayer.translate(0,0,200);
		textLayer.text("California", 3000, 2000);
		textLayer.save("../tmpimages/" + "3dtest.jpg");
		
		textLayer.endDraw();

		exit();
	}

}

Your help would be appreciated!! Thanks!!

needed complete rewrite to test something here,
-a- please post processing IDE testable code
with default path
if files needed ( here like font… ) provide or default

-b- your size numbers / for size() / font / PGraphics / translate / text position
is confusing and might be part of the problem

-c- a textFont.save(outfile); can not be used here?

-d- your structure
createGraphics in draw / save / exit i changed:
–1- i first create it in setup
–2- show by draw
–3- print by key ‘p’

// https://discourse.processing.org/t/text-partly-invisible-with-p3d-renderer/13575/3

PGraphics textLayer;
int iwidth = 800;
int iheight = 600;
String sfont = "Arial";
int mainFontSize = 100;

String outfile = "data/3dtest.png";

void settings() {
  size(iwidth, iheight, P3D);
}

void setup() {
  colorMode(RGB, 255);
  textLayer = createGraphics(iwidth, iheight, P3D);
  textLayer.beginDraw();
  textLayer.background(0,0,80);
  textLayer.textAlign(CENTER);
  textLayer.textFont(createFont(sfont, mainFontSize));
  textLayer.fill(color(255, 255, 255));
  textLayer.translate(0, 0, 20);  // change 200 to 20 to see full string
  textLayer.text("California", 300, 200);
  textLayer.endDraw();
  println("click canvas and use:\nkey [p] to save picture");
}

void draw() {
  background(200,200,0);   // should never be visible! or printed
  image(textLayer,0,0);    // show first what you created
}

public void keyPressed() {
  if ( key == 'p' )  {
    save(outfile);
    // textLayer.save(outfile);   // can NOT use!
    println("saved to "+outfile);
  }
}

3 Likes

I suggest two modifications to @kll 's code
MOD 1
Change line
textLayer.background(0,0,80);
to
textLayer.clear();
At the moment we have a solid background so it has to be drawn before that other graphic elements, and if those elements have an opaque background then it might obscure some of the text.
If fact I would make sure all the foregorund graphic elements have a transparent background.
MOD 2
This is entirely optional but P2D and P3D are not good at rendering small size text (EDIT: I think things might have improved in this area). The font used here is sans-serif and very large so is not apparent in this sketch. This suggestion is to use JAVA2D to create the text layer i.e.
textLayer = createGraphics(iwidth, iheight, JAVA2D);

2 Likes

Does using this hint() solve it?

void setup() {
  size(600, 600, P3D);
}
void draw() {
  background(#123456);
  fill(255);
  sphere(300);
  textSize(100);
  
  hint(DISABLE_DEPTH_TEST);
  // everything you want on top goes here   
  fill(0);
  text("abcdefgh", 50, 150);
  hint(ENABLE_DEPTH_TEST);
}
2 Likes

Hi, thanks for the idea, but for me, it does not work. I need the output image to be 6000x4000 pixel.
So I have to use textLayer.save(outfile);
I also adjusted the text size to 1.000 which is the required output text size.

If I adjus this, I have the same problem using your code

:

Here is your adjusted code I am using:

public class Test3D_V2 extends PApplet {

	PGraphics textLayer;
	int iwidth = 800;
	int iheight = 600;
	String sfont = "Arial";
	int mainFontSize = 1000;

	String outfile = "data/3dtest.png";
	
	public static void main(String[] args) {

		String[] a = { "MAIN" };
		Test3D_V2 fw = new Test3D_V2();
		PApplet.runSketch(a, fw);
	}

	public void settings() {
	  size(iwidth, iheight, P3D);
	}

	public void setup() {
	  colorMode(RGB, 255);
	  textLayer = createGraphics(6000, 4000, P3D);
	  textLayer.beginDraw();
	  textLayer.background(0,0,80);
	  textLayer.textAlign(CENTER);
	  textLayer.textFont(createFont(sfont, mainFontSize));
	  textLayer.fill(color(255, 255, 255));
	  textLayer.translate(0, 0, 20);  // change 200 to 20 to see full string
	  textLayer.text("California", 3000, 2000);
	  
	  textLayer.save(outfile);
	  
	  textLayer.endDraw();
	  println("click canvas and use:\nkey [p] to save picture");
	}

	public void draw() {
	  background(200,200,0);   // should never be visible! or printed
	  image(textLayer,0,0);    // show first what you created
	}

	public void keyPressed() {
	  if ( key == 'p' )  {
	    save(outfile);
	    // textLayer.save(outfile);   // can NOT use!
	    println("saved to "+outfile);
	  }
	}

}

The Idea of quark does indeed work, but I would like to use the P3D renderer. I also tried hamoid’s ideas but it lead to the same error.

I am open for any other idea to make P3D work. Thanks.

I can reproduce it. First, without trying, I thought it was a depth issue (something occluding the text).

But it’s not the case. I believe it’s some kind of memory / buffer limitation.

The good news is that for me it works by doing this:

  textLayer.textFont(createFont(sfont, mainFontSize, true, 
    new char[] {'C', 'a', 'l', 'i', 'f', 'o', 'r', 'n'}));

So I limit the character set and that makes it work.

BTW. I’m using a GTX 1060. I’m not sure an integrated graphics card could handle 6000x4000.

3 Likes

Hi hamoid,

this does indeed work (lenovo t480s, nvidia mx150) and might be the solution. Thanks a lot to all of you!

Regards

Uli