alphapixeldev.com

SDF vs. MSDF vs. Slug: GPU Text Rendering

ibobev · 79 points · 35 comments · 4 giờ trước · Open original

Comments

5 preview comments · loading full thread
jdanford3 giờ trước

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

GuB-422 giờ trước

I once implemented SDF text rendering. To me, the thing I liked the most about this technique it how easy it is to add effects on top. With a few lines of shader code, I had outlines and softening of the edges (antialiasing). I didn't try the MSDF variant, as I didn't mind corners not being sharp when scaled up, so I don't know if these effects break on MSDF. Slug doesn't seem to support any of these, it is just "for a given point, am I in or am I out?", but it doesn't tell you by how much, which is great on really high resolution displays and large sizes, but you would lose the ability to do the kind of effects you can do with SDFs, and have to deal with antialiasing separately.

Const-me1 giờ trước

“What makes glyphs hard” Another reason is hinting. Traditional text renderers like FreeType are aware of the pixel grid and they adjust the curves slightly, snapping them to that grid. For all methods in the article quite hard to do on GPUs. “Chinese, Japanese, and Korean have tens of thousands of glyphs, and baking all of them at several sizes is a memory disaster” One possible solution is dynamic atlas built on CPU for visible glyphs only. “The distance-field panels notch, where interpolating between stored samples no longer matches the true curve” Can’t it be fixed in the shader, using screen-space derivatives of the SDF? I think in theory, SDF value for pixel center combined with screen-space gradient vector of that number delivers enough data to compute partial coverage for the pixels on the edge.

mattdesl3 giờ trước

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

flohofwoe3 giờ trước

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.