YHK - yet another hacker news clone

SDF vs. MSDF vs. Slug: GPU Text Rendering

22 points ibobev 1 hour ago 14 comments

bel8 59 minutes ago | parent

MSDF looks better than Slug for me in the first example.

But slug wins in perspective in my eyes.

I use MSDF to render crisp text in my webgl hobby game. Hope to publish it with source code when I get the time.

thanks for sharing the article. I'll take a deeper look at it later.

Keyframe 50 minutes ago | parent

I do MSDF as well and since I'm not doing a huge-ass text editor (and even then) it works and it's great. One thing to consider is that with any solution that does things directly from vector outlines means you also then have to distribute proper font outlines and you might not have a license to do that. With MSDF and similar atlas-like solutions, you pre-render a font and distribute that rendered image instead of an actual font.

jdanford 55 minutes ago | parent

Man, I am getting incredibly tired of reading LLM-generated writing

cute_boi 47 minutes ago | parent

Author probably didn't even read...

kevin_thibedeau 5 minutes ago | parent

I think it's TLDW.

20k 7 minutes ago | parent

What signals this as being LLM writing for you? I'm crap at noticing specifics here

rezmason 48 minutes ago | parent

Slug looks impressive!

The project I'm most known for is basically an MSDF shader with a bloom pass. It serves my needs 100%, though if I expand to support arbitrary text, I may reach for Slug.

The one issue with MSDF I want to raise is, it seems everybody uses the same msdfgen texture creation program from Viktor Chlumský's master's thesis 11 years ago. I wish there were other implementations. Who ever heard of a graphics technique that was only ever programmed once, and then used everywhere without substantial iteration? We need to de-XKCD-2347 MSDFs for everyone's sake, including and especially Chlumský.

reactordev 47 minutes ago | parent

Excellent write up. The cited references are on point too. Eric Lengyel is a legend.

flohofwoe 41 minutes ago | parent

Here's a simple Slug rendering example on top of sokol_gfx.h:

via WebGPU backend: https://floooh.github.io/sokol-webgpu/slug-sapp.html

via WebGL2 backend: https://floooh.github.io/sokol-html5/slug-sapp.html

There's quite a bit of helper code plus stb_truetype.h and stb_ds.h under the hood to parse TTF files and crunch the TTF curve data into the runtime format expected by the Slug shader (this stuff should better go into an offline asset pipeline tool):

https://github.com/floooh/sokol-samples/blob/master/libs/slu...

...the actual text rendering code is also taking a couple of shortcuts, e.g. no kerning, no right-to-left, and also no text shaping.

There's also a new and complete text rendering stack by Mikko Mononen called Skribidi (AFAIK not based on Slug though):

https://github.com/memononen/Skribidi

...the list of external dependencies is a bit scary for a small self-contained sample though (Harfbuzz, SheenBidi, libunibreak, etc...), but that basically shows that proper international text rendering is really damn hard, even when trying to simplify the code as much as possible.

hncbw02z5a 33 minutes ago | parent

MSDF corners gave me trouble til I bumped the distance range at small sizes.

mattdesl 23 minutes ago | parent

I've also been working on a GPU curve renderer, Windfoil, based on a formulation that Fable 5 originally proposed to me during a directed search [1]. It is similar in some ways to Slug, not always as fast, but uses less shader storage (single band instead of two) and produces higher quality anti-aliasing i.e. closer to a box-filtered ground truth.

It may be of interest to some game/graphics devs here...

[1] https://github.com/texel-org/windfoil-algorithm

yeoyeo42 17 minutes ago | parent

interesting. how does the AA work in your algorithm?

the reason slug has two bands is precisely because of its anti-aliasing. you having only one implies you do the AA differently, or are less efficient with searches off the main direction.

for readers: the slug shader traces two rays, one horizontally, and one vertically, to find out if a pixel is inside a glyph or outside. one would be enough for pure inside outside, but for anti-aliasing purposes it's also helpful to know how far away you are from the closest edge. but if you have a horizontal ray running parallel to a horizontal glyph edge (not uncommon), the ray glyph intersection will return no value at all. so slug traces two rays and blends between them for anti-aliasing that always works in both cases. the bands mentioned here are just acceleration structures, basically a list of cells where each tells you which parts of a glyph are contained within it.

it's still approximate. a true ground truth would just supersample and do many point-in-glyph tests within one real pixel - at edges some of them would be inside, and some of them would be outside, giving you a smooth value to display depending on the shape of the glyph within the edge pixel.

pavlov 7 minutes ago | parent

> "In 2017 Eric Lengyel published an algorithm, called Slug, that stopped dodging. It renders glyphs directly from their outlines in the fragment shader, with no texture atlas and no per-frame tessellation. Lengyel patented it in 2019, and on March 17, 2026 he dedicated that patent to the public domain."

It's nice that he gave the patent to public domain, but this is not how patents are supposed to work. You can't patent something two years after it was already published.

I'm guessing he actually filed for a patent before publishing, and the article should read: "Lengyel was granted a patent for it in 2019"

It's an AI-written article, so maybe it's not reasonable to expect it to be consistent on this level...