Improved Text Rendering #10537

ickshonpe · 2023-11-13T13:20:47Z

Objective

The quality of Bevy's text rendering can vary wildly depending on the font, font size, pixel alignment and scale factor.

But this situation can be improved dramatically with some small adjustments.

Solution

Text node positions are rounded to the nearest physical pixel before rendering.
Each glyph texture has a 1-pixel wide transparent border added along its edges.

This means font atlases will use more memory because of the extra pixel of padding for each glyph but it's more than worth it I think (although glyph size is increased by 2 pixels on both axes, the net increase is 1 pixel as the font texture atlas's padding has been removed).

Results

Screenshots are from the 'ui' example with a scale factor of 1.5.

Things can get much uglier with the right font and worst scale factor^tm.

before

after

Changelog

Font texture atlases are no longer padded.
Each glyph texture has a 1-pixel wide padding added along its edges.
Text node positions are rounded to the nearest physical pixel before rendering.

* Each glyph texture has a 1 pixel wide padding added along its edges. * Text node positions are rounded to the nearest physical pixel before rendering.

nicopap

This fixes a regression. I tried to run game_menu on 0.11.0 and it seems to have crisp fonts, while on 0.12.0 it looks ugly. This PR makes the font as crisp as in 0.11.0

crates/bevy_ui/src/render/mod.rs

crates/bevy_text/src/font.rs

crates/bevy_ui/src/render/mod.rs

ickshonpe · 2023-11-13T14:14:22Z

This fixes a regression. I tried to run game_menu on 0.11.0 and it seems to have crisp fonts, while on 0.12.0 it looks ugly. This PR makes the font as crisp as in 0.11.0

The difference is because the rounding changes in 0.12 caused the text's position to shift slightly so it was no longer pixel-aligned.
You should be able to get the same ugly text in 0.11.0 by playing around with the scale factor.

nicoburns · 2023-11-13T14:16:39Z

Why is the padding change required? Does the rounding / pixel-grid fitting not fix this issue by itself?

ickshonpe · 2023-11-13T14:37:51Z

Why is the padding change required? Does the rounding / pixel-grid fitting not fix this issue by itself?

Pixel alignment makes things look more consistent and clean, while the padding change fixes how some of the glyphs are cut-off with hard edges. It's particularly clear if you compare the r or m glyphs between the screenshots.

crates/bevy_ui/src/render/mod.rs

rparrett · 2023-11-14T02:01:08Z

Does this interact with the subpixel_glyph_atlas feature? I'd assume that text positions should not be rounded if that feature is enabled but I'm not actually sure how that works.

alice-i-cecile · 2023-11-14T02:11:27Z

Waiting until those two questions are answered before merging.

ickshonpe · 2023-11-14T11:40:39Z

Does this interact with the subpixel_glyph_atlas feature? I'd assume that text positions should not be rounded if that feature is enabled but I'm not actually sure how that works.

This PR (accidentally) fixes the subpixel_glyph_atlas feature too.

The reason that text looks so bad is because bevy_text already implements pixel alignment for individual glyphs (unless subpixel adjustment is enabled). But Bevy's text rendering for both the UI and Text2d doesn't pixel-align the position where it draws the text. All the glyphs will be aligned with that position, so sometimes with a scale factor of 1 and integer coordinates it will be okay, but a lot of time it's a mess.

The subpixel_glyph_atlas feature also assumes that the text will be drawn pixel-aligned, and without that pixel-alignment you get blurred text.

Subpixel adjustment at a misaligned position:

Subpixel adjustment at a pixel-aligned position:

nicopap · 2023-11-14T12:03:36Z

crates/bevy_ui/src/render/mod.rs

+        .map(|window| window.scale_factor())
+        .unwrap_or(1.)
+        * ui_scale.0) as f32;


This would have worked. tbh re-using the same bind name would also be fine.

let window = windows.get_single(); let window_scale = window.map_or(1., |w| w.resolution.scale_factor()); let scale_factor = (window_scale * ui_scale.0) as f32;

rparrett · 2023-11-14T13:59:35Z

The subpixel_glyph_atlas feature also assumes that the text will be drawn pixel-aligned, and without that pixel-alignment you get blurred text.

Okay, the implementation details of that feature are surprising to me but that all seems to make sense after staring at that PR a bit. The way that all works seems quite janky. It seems like this is a good fix for now.

Thanks for looking into that.

nicoburns · 2023-11-14T14:08:17Z

Text is looking really good now!

# Objective The quality of Bevy's text rendering can vary wildly depending on the font, font size, pixel alignment and scale factor. But this situation can be improved dramatically with some small adjustments. ## Solution * Text node positions are rounded to the nearest physical pixel before rendering. * Each glyph texture has a 1-pixel wide transparent border added along its edges. This means font atlases will use more memory because of the extra pixel of padding for each glyph but it's more than worth it I think (although glyph size is increased by 2 pixels on both axes, the net increase is 1 pixel as the font texture atlas's padding has been removed). ## Results Screenshots are from the 'ui' example with a scale factor of 1.5. Things can get much uglier with the right font and worst scale factor<sup>tm</sup>. ### before <img width="300" alt="list-bad-text" src="https://github.com/bevyengine/bevy/assets/27962798/482b384d-8743-4bae-9a65-468ff1b4c301"> ### after <img width="300" alt="good_list_text" src="https://github.com/bevyengine/bevy/assets/27962798/34323b0a-f714-47ba-9728-a59804987bc8"> --- ## Changelog * Font texture atlases are no longer padded. * Each glyph texture has a 1-pixel wide padding added along its edges. * Text node positions are rounded to the nearest physical pixel before rendering.

ickshonpe added 3 commits November 13, 2023 12:32

Align text node positions to the nearest physical pixel before rendering

1dbad5a

Some small changes to improve the quality of rendered text:

0227c41

* Each glyph texture has a 1 pixel wide padding added along its edges. * Text node positions are rounded to the nearest physical pixel before rendering.

removed an unnecessary cast

305877b

nicopap approved these changes Nov 13, 2023

View reviewed changes

crates/bevy_ui/src/render/mod.rs Outdated Show resolved Hide resolved

crates/bevy_text/src/font.rs Show resolved Hide resolved

crates/bevy_ui/src/render/mod.rs Outdated Show resolved Hide resolved

nicopap added this to the 0.12.1 milestone Nov 13, 2023

nicopap added A-UI Graphical user interfaces, styles, layouts, and widgets P-Regression Functionality that used to work but no longer does. Add a test for this! C-Bug An unexpected or incorrect behavior A-Text Rendering and layout for characters labels Nov 13, 2023

Scale factor and transform calculations refactor

4dd1e87

ickshonpe added 2 commits November 13, 2023 14:46

Added comments explaining the get_outlined_glyph_texture changes.

fe1b4f5

cargo fmt --all

84948da

nicoburns approved these changes Nov 13, 2023

View reviewed changes

nicopap added the S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it label Nov 13, 2023

cart reviewed Nov 14, 2023

View reviewed changes

crates/bevy_ui/src/render/mod.rs Outdated Show resolved Hide resolved

alice-i-cecile removed the S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it label Nov 14, 2023

fixed scalefactor calculation

f85ffa5

nicopap reviewed Nov 14, 2023

View reviewed changes

alice-i-cecile approved these changes Nov 14, 2023

View reviewed changes

alice-i-cecile requested a review from nicopap November 14, 2023 12:42

nicopap approved these changes Nov 14, 2023

View reviewed changes

nicoburns added the S-Ready-For-Final-Review This PR has been approved by the community. It's ready for a maintainer to consider merging it label Nov 14, 2023

alice-i-cecile added this pull request to the merge queue Nov 14, 2023

Merged via the queue into bevyengine:main with commit 0b0ef58 Nov 14, 2023
22 checks passed

nicopap mentioned this pull request Nov 24, 2023

Pixelated text font is blurry #10720

Closed

rparrett mentioned this pull request Jan 13, 2024

UI text rotation and scaling fix #11326

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improved Text Rendering #10537

Improved Text Rendering #10537

ickshonpe commented Nov 13, 2023 •

edited

Loading

nicopap left a comment

ickshonpe commented Nov 13, 2023

nicoburns commented Nov 13, 2023

ickshonpe commented Nov 13, 2023 •

edited

Loading

rparrett commented Nov 14, 2023

alice-i-cecile commented Nov 14, 2023

ickshonpe commented Nov 14, 2023 •

edited

Loading

nicopap Nov 14, 2023

rparrett commented Nov 14, 2023

nicoburns commented Nov 14, 2023 •

edited

Loading

Improved Text Rendering #10537

Improved Text Rendering #10537

Conversation

ickshonpe commented Nov 13, 2023 • edited Loading

Objective

Solution

Results

before

after

Changelog

nicopap left a comment

Choose a reason for hiding this comment

ickshonpe commented Nov 13, 2023

nicoburns commented Nov 13, 2023

ickshonpe commented Nov 13, 2023 • edited Loading

rparrett commented Nov 14, 2023

alice-i-cecile commented Nov 14, 2023

ickshonpe commented Nov 14, 2023 • edited Loading

Subpixel adjustment at a misaligned position:

Subpixel adjustment at a pixel-aligned position:

nicopap Nov 14, 2023

Choose a reason for hiding this comment

rparrett commented Nov 14, 2023

nicoburns commented Nov 14, 2023 • edited Loading

ickshonpe commented Nov 13, 2023 •

edited

Loading

ickshonpe commented Nov 13, 2023 •

edited

Loading

ickshonpe commented Nov 14, 2023 •

edited

Loading

nicoburns commented Nov 14, 2023 •

edited

Loading