(letter above is rendered in GLSL fragment shader)


To learn more about text rendering by rendering text inside of a fragment shader


FreeType, a vector font format, specifies fonts as a series of quadratic bezier curves and line segments. I wrote some JavaScript that extracts a single character from a FreeType file, and tuns the strokes that define it into arrays. Then, I sent those arrays into shader variables, and draw the character in there. At first, I used seperate functions for bezier curves and straight lines, but switched to just using the single curve function to make the characters look more uniform. In theroy, I could import any font file, or even draw multiple characters, except I'm not sure what the upper limit is on inputting variables into shaders.

In the future, I want to fill in the character and figure out how to anti-alias it. There's already plenty that has been written about the first one, including a very good microsoft research paper published in Nvidia's GPU gems. However, AA is a litttle bit harder because there's no clear way to get a display's subpixel arrangement from OpenGL context.

Drawing vectors in shaders alone is pretty hard, but I do want to extend this. It would also be neat if I could figure out how to move arrays of undefined size into shaders. I think I can programatically change them, so perhaps I could alter the program itself with the array length before loading it. This is another weakness of OpenGL, the shader programming is simply not as powerful as Metal or DirectX.

Works Consulted: