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

processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —

http://p5js.org/

GNU Lesser General Public License v2.1

21.11k stars 3.22k forks source link

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

Open pirelaurent opened 3 years ago

pirelaurent commented 3 years ago

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); }

welcome[bot] commented 3 years ago

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.

vulongphan commented 3 years ago

I will work on this issue.

vulongphan commented 3 years ago

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

stalgiag commented 3 years ago

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

pirelaurent commented 3 years ago

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

AryanKoundal commented 1 year ago

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() .