Displaying text in P3D using Javascript mode

am767

Hi all,

I am a bit of a beginner in Processing in general and I've run into a problem that the Ref page and Google haven't helped me solve. I am working on a sketch that relies on having a 3D view. However, when running in P3D in javascript mode I cannot get any text to appear. It works fine in Javascript when I use the default 2D renderer, and it works fine in Java mode with P3D, but I can't get both to work at the same time!

Below is a simplified example of the problem.

void setup () {
  size (200,200,P3D);
}

void draw() {

  background(100,0,50);
  fill(50);
  noStroke();
  rect(5,5,190,190);
  fill(255);
  //pushMatrix();
  //translate(0,0,20);  
  text("test text",100,100);
  //popMatrix();
}

GoToLoop

Dunno whether the issue always existed or was introduced more recently, but indeed text() is failing miserably in WebGL mode for Pjs library! :-&

Funnily it's working alright in a very old sketch I've got, where main renderer is P3D while PGraphics layer isn't P3D nor OPENGL. You can watch it here:
http://studio.ProcessingTogether.com/sp/pad/export/ro.9oKy5N3D6zFZT

However, as soon as createGraphics() is changed to P3D instead, it fails just like your example!
You can copy & paste the sketch on the site below if you wanna do experiments on it:
http://www.OpenProcessing.org/sketch/create

Then I've tried to tweak your example to use PGraphics for the text().
But inexplicably it failed when main renderer is P3D, regardless of the renderer used in createGraphics()!!! ~X(

PGraphics textLayer;

void setup () {
  size (200, 200, P3D);
  smooth(4);
  noLoop();

  imageMode(CORNER);
  rectMode(CORNER);
  noStroke();

  textLayer = createGraphics(width, height, JAVA2D);
  textLayer.smooth(4);
  textLayer.beginDraw();

  textLayer.fill(-1);
  textLayer.textSize(030);
  textLayer.textAlign(CENTER, CENTER);
  textLayer.text("Test Text...", width>>1, height>>1);

  textLayer.endDraw();
}

void draw() {
  background(100, 0, 50);

  fill(0100);
  rect(5, 5, width - 10, height - 10);

  image(textLayer, 0, 0);
}

Most you can do is post an issue on Pjs's GitHub: 8-|
https://GitHub.com/processing-js/processing-js/issues

am767

I've got it working now after familiarising myself a little with PGraphics. As you say, it only seems to work when you have a 3D PGraphic within a P2D space, and not when you try imposing a 2D text PGraphic onto a P3D space. Considering the vast majority of my sketch is 3D it certainly makes things a little clunkier with all those pg. prefixes all over the place, but better that than not functioning at all! Thank you very much for your help.