Skip to content

SDF text rendering

halx99 edited this page Sep 1, 2025 · 2 revisions

🎯 Recommended outlineSize Range for SDF Rendering

Use Case Suggested Maximum Range Notes
UI text rendering 1.0 – 5.0 Keeps edges sharp; ideal for buttons, labels, and interface elements
Headings or large fonts 5.0 – 10.0 Allows thicker outlines; watch for blur or aliasing
Special effects (e.g. glow, stroke) 10.0 – 20.0 Good for visual effects; may require shader optimization
Extreme or experimental effects >20.0 Can cause distortion or performance issues; use with caution

⚠️ Key Considerations

  • SDF texture resolution: Larger outlineSize values may exceed the precision of the SDF texture, leading to blurry or distorted edges.
  • Font size: Applying a large outline to small fonts can cause the outline to overwhelm the glyphs.
  • Performance impact: Bigger outlines can increase GPU load, especially when rendering lots of text.

✅ Practical Tips

If you're encountering issues like edge distortion or unclear strokes, try the following:

  • Start with outlineSize = 1.0 and gradually increase.
Clone this wiki locally