javascriptthree.jsantialiasingfxaa

Text sharpness while using FXAA

I have a FXAA shader it works great for the most part except for text. Our text is 2D and fairly thin, which is unfortunate. Are there any techniques to make text sharper while using FXAA. Is there an alternative anti-aliasing implementation already out there that accounts for text?

Solution

  • The answer is use SDF (signed distance fields), which looks great.

    Here is an example: http://hack.chrons.me/opengl-text-rendering/

    The technique was introduced by valve a couple years ago. Mapbox uses it seems as well.