Slate: Text aliased at glyph quad edges

Text rendered by Slate/UMG widgets has aliasing artifacts in the following cases:

  • Render transform scale
  • Render transform shear
  • Render transform angle (rotation)
  • Sub-pixel translation (using ESlateDrawEffect::NoPixelSnapping)

The top-left text looks fine because it’s pixel-snapped and not transformed in any way.

The bottom row uses a smaller font scaled back up to the same size. The interior of each glyph becomes blurry, but they have a noticeable “hard edge” on the outside.

The right column is rotated by 3°, which produces jaggy outside edges. Again, the edges in the interior of each glyph are unaffected. Compare the two sides of the vertical stroke of the letter “E”, for example.

The image below shows what’s causing this. The left side shows some sample text, rotated and scaled. To the right is the same, highlighted to show the pixels covered by the quads used to render it:

The interior of each glyph is antialised because the font texture sample filter is bilinear. The quads themselves aren’t antialiased, however. That means they have visible aliasing along their edges. Anywhere a glyph touches the edge of its cell in the font atlas is affected.

In case anyone else hits this issue, I made a PR to fix it:

https://github.com/EpicGames/UnrealEngine/pull/8431

3 Likes

The UE5 version of this fix was merged in January 2024, and should be present in UE5.4.0 and later.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.