Improve SDF Font Outlines Rendering for Better Compatibility with Various Font Styles

Release Type

GitHub (master branch)

Version

Master branch

Platform(s)

Windows

Describe the Problem

This issue pertains to the implementation of text outline support, introduced in PR #2582. The feature is functional and usable, but there are some rendering issues when working with certain font styles. Specifically:

• Fonts with rounder shapes tend to render well even with larger outline thicknesses.
• Fonts with sharp or thin features may display visible gaps between outline offsets as the outline thickness grows.

While the current implementation is a good starting point, further refinements are necessary to ensure consistent rendering across all font styles.

Steps to Reproduce

1. Use the master branch containing the changes from PR #2582.
2. Set up a TextBlock with a font of your choice.
3. Assign the font type as SpriteFontType.SDF.
4. Apply an OutlineThickness value greater than Text Size/10 example:**Text size 100 apply thickness to 20** to the TextBlock.
5. Test with both round and sharp/thin fonts.
6. Observe:
   • Round fonts render outlines correctly.
   • Sharp/thin fonts may exhibit visible gaps as the outline thickness increases.

Expected Behavior

Outlines for all fonts (round, sharp, or thin) should render smoothly without gaps or artifacts, regardless of the outline thickness.

Screenshots

https://github.com/user-attachments/assets/a58dd2c8-356d-4cac-b699-00acbc8773e8

Additional Context

This implementation of text outline support is a functional addition to the renderer, introduced in PR #2582. While it works well for most cases, improvements are needed to address edge cases, especially for fonts with sharp or thin features.

Next Steps

• Explore a method to dynamically adjust kernel sizes based on the font style to mitigate gaps.
• Investigate shader-based solutions for smoother rendering.
• Open to further testing and feedback to refine the feature.

This is a significant step forward for text rendering in Stride, and I will continue to work on improving this feature. Feedback and suggestion and contributions are welcome!

Start by reviewing PR #2582 and reproducing the issue with a TextBlock using SpriteFontType.SDF and increasing OutlineThickness, testing both round and sharp/thin fonts. Investigate the existing text outline rendering and compare the observed gaps with the expected smooth, artifact-free outlines across font styles and thicknesses.