# Text rendering and effects using GPU-computed distances

DevFeed: [Text rendering and effects using GPU-computed distances](<https://devfeed.tech/articles/text-rendering-and-effects-using-gpu-computed-distances-26121.md>)

Original publisher: [Read original article](<http://blog.pkh.me/p/47-text-rendering-and-effects-using-gpu-computed-distances.html>)

Published: 2025-11-01T17:20:06Z

Content type: tutorial

Language: en

Sources: [The Last Static Blog RSS](<https://devfeed.tech/sources/the-last-static-blog-rss.md>)

Topics: [GPU](<https://devfeed.tech/topics/gpu.md>), [signed distance functions](<https://devfeed.tech/topics/signed-distance-functions.md>), [Font](<https://devfeed.tech/topics/font.md>), [Algorithm](<https://devfeed.tech/topics/algorithm.md>), [Mobile](<https://devfeed.tech/topics/mobile.md>)

Tags: [algorithm](<https://devfeed.tech/tags/algorithm.md>), [code](<https://devfeed.tech/tags/code.md>), [compute](<https://devfeed.tech/tags/compute.md>), [effects](<https://devfeed.tech/tags/effects.md>), [fonts](<https://devfeed.tech/tags/fonts.md>), [gpu](<https://devfeed.tech/tags/gpu.md>), [graphics](<https://devfeed.tech/tags/graphics.md>), [math](<https://devfeed.tech/tags/math.md>), [mobile](<https://devfeed.tech/tags/mobile.md>), [prog](<https://devfeed.tech/tags/prog.md>), [render](<https://devfeed.tech/tags/render.md>), [text](<https://devfeed.tech/tags/text.md>)

## AI overview

This tutorial explains how to compute signed distance fields for text glyphs on the GPU. It covers extracting glyph outlines, representing lines and Bézier curves as cubics, implementing the algorithm in a shader, and the trade-offs and effects enabled by the approach.

## Source excerpt

Text rendering is cursed. Anyone who has worked on text will tell you the same; whether it's about layout, bi-directional, shaping, Unicode, or the rendering itself, it's never a completely solved problem. In my personal case, I've been working on trying to render text in the context of a compositing engine for creative content. I needed crazy text effects, and I needed them to be reasonably fast, which implied working with the GPU as much as possible. The distance field was an obvious requirement because it unlocks anti-aliasing and the ability to make many great effects for basically free. In this article, we will see how to compute signed distance field on the GPU because it's much faster than doing it on the CPU, especially when targeting mobile devices. We will make the algorithm decently fast, then after lamenting about the limitations, we will see what kind of effects this opens up. Progressive build of the 'あ' glyph from the Mochiy Pop One font Extraction of glyph outlines Non-bitmap fonts contain glyphs defined by outlines made of closed sequences of lines and (quadratic or cubic) Bézier curves. Extracting them isn't exactly complicated: FreeType or ttf-parser typically expose a way to do that. For the purpose of this article, we're going to hard code the list of the Bézier curves inside the shader, but of course in a more serious setup those would be uploaded through storage buffers or similar. Using this tiny program, a glyph can be dumped as series of outlines into a fixed size array: struct Bezier { vec2 p0; // start point vec2 p1; // control point 1 vec2 p2; // control point 2 vec2 p3; // end point }; #define N 42 #define NC 2 const int glyph_A_count[2] = int[](33, 9); const Bezier glyph_A[42] = Bezier[]( Bezier(vec2( 0.365370, -0.570817), vec2( 0.374708, -0.631518), vec2( 0.332685, -0.687549), vec2( 0.339689, -0.748249)), Bezier(vec2( 0.339689, -0.748249), vec2( 0.339689, -0.748249), vec2( 0.344358, -0.764591), vec2( 0.351362, -0.771595)), Bezier(vec2