2d text renders badly

[stephanschulz]

My canvas uses WEBGL and i am trying to draw regular debug text on top in 2D.

I am following this WEBGL method https://p5js.org/reference/#/p5/text

function preload() {
  inconsolata = loadFont(
    "https://cdnjs.cloudflare.com/ajax/libs/bwip-js/2.0.6/Inconsolata.otf"
  );
}

function setup() {
  pixelDensity(1); //lower is faster

  var canvas = createCanvas(windowWidth, windowHeight, WEBGL);

  textFont(inconsolata);
  textSize(20);
  textAlign(CENTER, CENTER);

Drawing text inside displayHUD() makes it look very glitchy. drawing text inside draw() is glitchy too but in 3D space.

[stephanschulz]

Oh strange. I am on macOS and in chrome it looks bad and in Safari and Firefox it looks fine.

[jwdunn1]

I've been trying to reproduce this issue here: https://editor.p5js.org/jwdunn1/sketches/CXWVcu8mR Unsuccessfully thus far. Are you running the latest Chrome (v 98.0.4758.102)?

[stephanschulz]

macOS chrome Version 98.0.4758.109 (Official Build) (x86_64)

[jwdunn1]

Nice! And your Mac OS version?

[stephanschulz]

macOS 10.15.7

[jwdunn1]

Can you upgrade your OS? Or is your hardware preventing this? I do see some odd Chrome issues reported last year related to 10.15.7 here. I'm not seeing this font glitching behavior on an iMac Pro running macOS 11.6 (Big Sur) with the latest Chrome version.

[stephanschulz]

sorry can't update my dev computer. needs to stay as is. but I confirmed that on iPad + safari and on a macOS 11.2 computer + chrome the text looks fine. so, it's the 10.15.7 . good to know.

Thanks again for all your help.

[jwdunn1]

One other thing to try. If you are using a lighting model in your draw loop, be sure to turn that off in the HUD, otherwise objects are shaded using that lighting model. This would affect how fonts are shaded too. For example, if the standard lighting model lights() is called in the draw loop, then call noLights() in the HUD code. I've updated the sketch so you can try it there first.

[stephanschulz]

I just tried your example and also tried adding the lights() suggestion but it did not change anything :( Overall it's not a big problem since i can just tell people to use a specific browser.