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