How do I get text to display in a 3D environment in processing.js?

bwandelt

There appears to be a basic problem with displaying text in a 3D environment in processing.js .

My sketch works in Processing but in processing.js text display is corrupted (each letter appears truncated, only a few pixels survive. It looks like a broken-up horizontal line where the text should be).

I can reproduce this behavior if I change P2D to P3D in the standard Typography/Letters example copied below for easy reference.

This problem is not browser specific - I have identical results in Chrome, Safari, and Firefox.

Any help would be much appreciated!

/**
 * Letters. 
 * 
 * Draws letters to the screen. This requires loading a font, 
 * setting the font, and then drawing the letters.
 */

PFont f;

void setup() {
  size(640, 360,P3D); //The original version has P2D here - with P3D none of the letters appear correctly.
  background(0);

  // Create the font
  println(PFont.list().toString);
  f = createFont("Georgia", 24);
  textFont(f);
  textAlign(CENTER, CENTER);
} 

void draw() {
  background(0);
  noLights();
  textMode(SCREEN);
  // Set the left and top margin
  int margin = 10;
  translate(margin*4, margin*4);

  int gap = 46;
  int counter = 35;

  for (int y = 0; y < height-gap; y += gap) {
    for (int x = 0; x < width-gap; x += gap) {

      char letter = char(counter);

      if (letter == 'A' || letter == 'E' || letter == 'I' || letter == 'O' || letter == 'U') {
        fill(255, 204, 0);
      } 
      else {
        fill(255);
      }

      // Draw the letter to the screen
      text(letter, x, y);

      // Increment the counter
      counter++;
    }
  }
}

GoToLoop

• My experience w/ WebGL canvas is almost nil so I can't offer much help. :|
• But I've got this online P3D sketch that displays 2 words.
• Although a little blurred, they seemed OK. Hope it helps:

http://studio.processingtogether.com/sp/pad/export/ro.9oKy5N3D6zFZT/latest