This is a demonstration of rendering text directly on the GPU using the vector outlines defined by the font.

This demo is based on the method described by Will Dobbie in GPU text rendering with vector textures with some modifications/simplifications based on publications from Eric Lengyel (GPU Font Rendering: Current State of the Art, Poster for the Slug Font Rendering Library, Slug Algorithm Paper). Other related work includes Improved Alpha-Tested Magnification for Vector Textures and Special Effects (signed distance fields) by Chris Green and Easy Scalable Text Rendering on the GPU by Evan Wallace.

This technique is useful for rendering large text or rendering text with arbitrary transforms (e.g. in a 3D scene) and produces pixel-perfect and anti-aliased results. It has a slightly higher GPU runtime cost, but does not require rasterizing glyphs on the CPU. In contrast to signed distance fields, it preserves sharp corners at all scales.

Method

A glyph outline is described by one or more closed contours. A contour consists of line segments and bezier curve segments defined by a list of points. Following the TrueType convention, outside contours are oriented in clockwise direction and inside contours are oriented in counterclockwise direction. In other words, when following the direction of the contour, the filled area is always to the right.

The contours of a glyph are converted into a list of individual quadratic bezier curves (defined by their control points), which are uploaded to the GPU.

A quad is generated for each glyph and the pixel shader determines whether each pixel is inside or outside the glyph. To do this, the winding number of the pixel is calculated by intersecting a ray with the bezier curves. At every intersection the ray either enters or exits the filled area as determined by the direction of the bezier curve relative to the ray. At every exit the winding number is increased by one and at every entry the winding number is decreased by one. After considering all intersections, the winding number will be non-zero if the pixel is inside the outline.

The direction of the rays does not matter for this winding number computation, but the math can be greatly simplified by using rays parallel to the x-axis. By subtracting the sample position from the control points of the bezier curves, the coordinate system is shifted so that the origin of the ray is at