Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix visual glitches in WebGL font rendering #5860

Merged
merged 1 commit into from Nov 12, 2022

Conversation

davepagurek
Copy link
Contributor

Resolves #5852

Changes

  • Slightly expands the bounding box of glyphs when picking which grid rows/columns they overlap with to fix the slight glitches you see when they're very close to grid edges
  • Slightly expands the bounding box of rendered glyphs on canvas to allow for better antialiasing on edges

Screenshots of the change

Here's a gif that flips between before/after images so the difference stands out:
font-changes

Here's a visualization of the bounding box sizing changes going on under the hood to fix edge antialiasing:
bbox-changes

You can test out the changes on a few different fonts and sizes here: https://editor.p5js.org/davepagurek/sketches/l1ulBxXnK

PR Checklist

  • npm run lint passes

@Qianqianye Qianqianye merged commit b17baac into processing:main Nov 12, 2022
@davepagurek davepagurek deleted the fix/webgl-font-rendering branch November 12, 2022 17:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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