p5.js in Webgl Mode, textAscent() stays sticked to the first call result and is never updated.

Most appropriate sub-area of p5.js?

[ ] Accessibility (Web Accessibility)
[ ] Build tools and processes
[ ] Color
[ ] Core/Environment/Rendering
[ ] Data
[ ] DOM
[ ] Events
[ ] Friendly error system
[ ] Image
[ ] IO (Input/Output)
[ ] Localization
[ ] Math
[ ] Unit Testing
[x] Typography
[ ] Utilities
[x] WebGL
[ ] Other (specify if possible)

Details about the bug:

in Webgl Mode, textAscent() stays sticked to the first call result and is never updated.
in P2D textAScent() works correctly with same code :
Screen Shot 12-20-20 at 10 24 AM 001 Screen Shot 12-20-20 at 10 25 AM

Same thing of course for textDescent() .

p5.js version: p5.js v1.1.9 July 22, 2020
Web browser and version: chrome 87.0.4280.88 (Build officiel) (64 bits) same on Firefox: 84.0
Operating System: windows 10 64bits
Steps to reproduce this: ( note: font is loaded in preload . Tests done with verdana.ttf & consolab.ttf )

function setup() {
  createCanvas(900, 900, WEBGL);
}

function draw() {
 translate(-width/2,-height/2);
  background(0);
  fill('white');
  textFont(consola);
  textSize(12);
  text('WEBGL : textAscent', 200,20);
  text('12: '+textAscent(), 20,20);
  textSize(14);
  text('14: '+textAscent(), 20,40);
  textSize(16);
  text('16: '+textAscent(), 20,60);
  textSize(32);
  text('32: '+textAscent(), 20,100);
 }

Dec 20 '20 09:12 pirelaurent

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

Dec 20 '20 09:12 welcome[bot]

I will work on this issue.

Mar 13 '21 19:03 vulongphan

@pirelaurent For some reason, when I switched to P2D mode, no text is displayed on the screen anymore. @stalgiag any thought on this?

Mar 14 '21 12:03 vulongphan

Perhaps the translate(-width / 2, -height /2) line? The coordinate system is different in WebGL with (0,0) as the center of the canvas.

Mar 14 '21 14:03 stalgiag

i don't know what you call 'switch'. You cannot change mode while running. You must run once with a webgl canvas, then stop, change to p2d, run again. if you use a p2d graphics to create text while in webgl (what i do frequently for response time), think about to advance image a little bit on z to be on top of background things for camera. Hth

Mar 14 '21 14:03 pirelaurent

Highlights:

When the text() function gets called with P2D renderer,in every call the _textAscent property is NULL. But when the text() function gets called with WebGL renderer, the _textAscent property is NULL for the 1st call and then it stays as it is for any further calls.

And the textAscend() function only updates the values when _textAscent is NULL.

Details:

So the problem originates from the _renderer properties where _textAscent is initiated differently for P2D and WebGL . Further, the _texAscent is updated via _updateTextMetrics()

https://github.com/processing/p5.js/blob/1dff6da0c884e30cc70b136c5fccff9412edf07e/src/core/p5.Renderer.js#L469

only when _texAscent property is NULL.

https://github.com/processing/p5.js/blob/1dff6da0c884e30cc70b136c5fccff9412edf07e/src/core/p5.Renderer.js#L189

Hence, it's not getting updated for new calls to textAscend() .

Feb 17 '23 14:02 AryanKoundal

@vulongphan may i take this off your hands ? i would love to work on it

Aug 19 '24 12:08 Forchapeatl

@Forchapeatl I think it's ok if you want to start looking into this, thanks!

Aug 20 '24 17:08 davepagurek