Rows or columns of glyph pixels missing at some font sizes in WebGL

[davepagurek]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build Process
• Unit Testing
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

1.5.0

Web browser and version

Firefox 106.0.2

Operating System

MacOS 12.5.1

Steps to reproduce this

Here's an example snippet that renders Inter 600 at font size 30.5. There's a row of pixels missing from the C in "quick" and a column of pixels missing from the M in "jumped":

let font function preload() { font = loadFont( 'https://fonts.gstatic.com/s/inter/v3/' + 'UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2b' + 'oKoduKmMEVuGKYMZhrib2Bg-4.ttf' ) } function setup() { createCanvas(300, 300, WEBGL) pixelDensity(2) noLoop() } function draw() { push() background(255) fill(0) textFont(font) textSize(31.5) textAlign(CENTER, CENTER) translate(-100, -100) text( 'The quick brown fox jumped over the lazy dog', 0, 0, 200, 200 ) pop() }

Close-ups:

p5 editor version of the above: https://editor.p5js.org/davepagurek/sketches/pna4CDNV9

This also has to do with positioning: if I replace "jumped" with "jumps", the pixel alignment works out better and the missing column in the M disappears.

This might be related to how we calculate the rows/columns that intersect a curve when setting them up for WebGL rendering here: https://github.com/processing/p5.js/blob/v1.5.0/src/webgl/text.js#L223-L232