personally, for rendering 2D GUI widgets, I would go with a big enough glyph atlas as texture for individual characters. the zed blog post linked above is using this technique too.

I believe `ttf`

fonts (with truetype outlines) only uses quadratic bezier splines (I think technically ttf fonts can use postscript outlines too, but I have yet to see one of them). and there's algorithms to approximate cubic bezier curves using quadratic ones.

just in case you're not aware, for **closed** outlines consists of quadratic bezier segments,there's a trivial algorithm to render using traditional rasterizer. (the **closed** requirement is not strict, but without it, the algorithm is not really "trivial")

the idea is very simple, once you understand it. basically, a quadratic bezier segment has three control points, which forms a triangle, and the curve is just a parabola inside the triangle. just as all the parabolas are the same, all quadratic bezier curve segments are the same,!

so if you know how to draw a special curve, you can render every bezier curve. and the special curve is... `y = x ^ 2`

, or equivalently, `v = u ^ 2`

(once you understand the transformation, you'll see really any quadratic curve will do, but this one makes the uv mapping easier)

imagine a triangle in the u-v space, where the three vertices are `(0, 0)`

, `(0,5, 0)`

, `(1, 1)`

, and the curve is `v = u ^ 2`

. if you fill the pixels where `v > u ^ 2`

, it's the portion "above" the curve. if you fill the pixels where `v < U ^ 2`

, it's the portion "below" the curve. so the fragment shader is literally a single conditional branch.

it's hard to describe using words, but you can check out this paper, there are diagrams and pictures to illustrate:

EDIT:

the paper I was referring to was actually [loop, C. 2005], some how my search hit another similar result. sorry for the confusion. the link I intended is

https://www.microsoft.com/en-us/research/wp-content/uploads/2005/01/p1000-loop.pdf

edit again: the presentation in the following link is actually quite relevant. I recommend to watch the video.

/EDIT

https://dl.acm.org/doi/10.1145/1179849.1179997

also there's an implementation using some language I don't know of, but the code is readable, and there's an awesome blog post explaining the algorithm with very helpful animated pictures.

one neat trick is for straight line segments, just map uv of all 3 vertices to somewhere "above" the curve, e.g. (0.0, 1.0), and this is done at font mesh loading time, so you only need one pipeline.