Quadratic Shader

This font rendering technique rendered glyphs using a quadratic shader in OpenGL and Vulkan applications.

This technique is detailed in External link GPU Gems 3 Chapter 25. The gist being, a glyph can be rendered without the need for a font atlas and bitmaps using UV mapped triangles and a quadratic shader.

I leveraged a parser External link TTF Triangulator to handle low-level TTF file details, but it needed a few tweaks. Some syntactical differences existed between the creator's platform my own. These were quickly overcome, and I included this solution as a library in my project.

TTF Triangulator loaded the character glyphs, and provided a mechanism to define triangles and their vertex UV values. Each triangle list corresponding to a glyph. Triangles were rendered using the following fragment shader. (a modified version of that included on the GPU Gems site)

#version 300 es
#extension GL_ARB_derivative_control : enable

precision highp float;

uniform vec4 Color;
uniform vec4 TColor;
uniform int Toggled;

in vec2 UV;
in float Coef;

out vec4 FragColor;

void main() {
    vec4 col = Color;
    if (Toggled != 0) {
        col = TColor;
    }
    float pixel = 0.5*Coef;
    vec2 px = dFdxFine(UV);
    vec2 py = dFdyFine(UV);
    float fx = ((2.0 * UV.x) * px.x - px.y);
    float fy = ((2.0 * UV.x) * py.x - py.y);
    float sd = (UV.x * UV.x - UV.y) / sqrt(fx * fx + fy * fy);
    float alpha = (pixel-sd)*Coef;
    if (Coef == 0.0) alpha = 1.0;
    if (alpha > 1.0) {
        FragColor = col;
    } else if (alpha < 0.0) {
        discard;
    } else {
        FragColor = col*vec4(1.0,1.0,1.0,alpha);
    }
}

A quadratic computation performed using the UV values on the triangle vertices determined if a pixel needed rendering. The UV values for the triangles were fixed values: (0,0), (0.5,0), and (1,1). Given different triangles, the gradient was used to detect if a fragment being rendered was outside, on the edge, or inside the glyph. This resulted in a filled arc bounded by the triangle. A separate step was used to render full triangles. The combination of both arcs and triangles resulted in a complete character.

This technique worked well for rendering glyphs, but there is more to text rendering than just drawing characters; arrangement of characters loomed. I liked this conceptually, and I used this to render fonts and glyphs during some development of my CAD application. Unfortunately, proper treatment of fonts is more involved than I had time for.

I am now leveraging more mature options available from the open source community.

Glyph Triangulation Game Development

Game Development