GPU Text Rendering Techniques: Image Text, Triangulated Text, Vector Text, and Signed Distance Fields

Text effects are one of the most frequently used features by short‑video creators. To provide richer and more powerful text effects, Kuaishou developed the "Cangjie" text‑effect engine and integrated it into the Kuaiying video‑editing app, enabling static and dynamic text animations.

Rendering text on the GPU requires converting characters into primitives that the GPU can process, which involves a variety of algorithms and techniques.

1. Image Text

Image text renders characters onto an image first, records the coordinates, and then draws the corresponding pixels when needed. This method is simple and low‑cost, works with custom artistic fonts and emojis, but scaling the image causes blur.

2. Triangulated Text

Triangulated text converts glyph outlines from font files (TTF, OTF, etc.) into triangles. The process typically involves:

Reading the font file and extracting contours (lines, arcs, Bézier curves) using libraries such as FreeType .

Triangulating the closed polygons with algorithms like ear‑cut ( earcut ).

Rendering the triangles on the GPU, which requires sufficient triangle density and anti‑aliasing techniques such as SSAA or MSAA.

3. Vector Text

Since glyph outlines are already vector data, they can be rendered directly on the GPU. NVIDIA provides the OpenGL extension NV_path_rendering for vector drawing, and other general GPU vector rendering methods exist. Open‑source libraries that support GPU vector text include Skia , Cairo , and NanoVG .

4. Signed Distance Fields (SDF)

SDF stores, for each pixel, the signed distance to the nearest glyph edge, allowing unlimited scaling without quality loss. The technique was introduced by Valve in 2007. An SDF image encodes distance values rather than colors, with values <0 indicating outside the glyph and >0 inside.

Common SDF generation methods include:

4.1 EDT (Euclidean Distance Transform)

EDT scans the image to compute exact Euclidean distances in O(n) time. Implementations can be found at Meijster's paper and the open‑source library tiny‑sdf .

4.2 EDTAA (Anti‑aliased EDT)

EDTAA extends EDT by supporting sub‑pixel transparency, improving quality for small textures. The algorithm and source code are available at paper and code , and it is used in libraries such as Skia and freetype‑gl .

4.3 Vector‑based SDF

When glyph outlines are available, SDF can be generated directly from vector data, avoiding the artifacts of image‑based methods. Open‑source projects include msdfgen and glyphy .

Conclusion

The article presented the main GPU text‑rendering approaches—image text, triangulated text, vector rendering, and signed distance fields—each with its own trade‑offs. These techniques form the core of the Cangjie engine, and future work will extend to layout, animation, and advanced effects to empower short‑video creators.