Add support for generating signed distance fields #106

merged 4 commits into from Nov 5, 2012


None yet
3 participants

ttencate commented Nov 4, 2012

The technique is described in this paper published by Valve:

  • Add a generator for distance fields
  • Add a main function to make it runnable as a command line program
  • Add a filter to Hiero to create distance field fonts
  • Add a test that demonstrates the usage of such fonts

See also this forum topic, which has screenshots:

ttencate added some commits Nov 3, 2012

@ttencate ttencate Remove broken use of unneeded atlas a785969
@ttencate ttencate Add DistanceFieldEffect to Hiero
This can be used to create signed distance fields, for generating fonts
that remain crisp-looking even at high magnification when rendered with
alpha testing.

See the Valve paper:
@ttencate ttencate Add a test that shows the use of distance field fonts 6dab9af
@ttencate ttencate Extract distance field generation into a standalone class
Also make it runnable as a command line tool

badlogic commented Nov 4, 2012

Awesome! I wanted to play around with distance fields for ages. I think your way of adding the functionality is great. I wonder if we should add the shaders to the default distribution in some way. I could give BitmapFont a shader that it uses when it's rendered, and a flag in BitmapFontData.

I guess as a first step this is sufficient and folks should supply their own shaders, based on your example. I'd welcome a wiki article, don't want to ask for to much.

Nate has to sign off the changes to Hiero, they seem rather unintrusive to me though.


ttencate commented Nov 4, 2012

Thanks Mario! My initial thought was to add the shaders to the core library, but I decided against it to avoid bloat. Also, there are many cool tricks you can do (outlines, shadows, glows) so many people will want to provide their own anyway.

Also, you need to provide the scale at which the font is rendered to the shader, so it's not entirely hands-off just yet. If you know a way in GLSL to determine the "magnification" of a texture, I'm all ears! It must exist in the GPU, because somehow it can choose mipmap levels, but I can't seem to find this functionality exposed in GLSL. If you know better, please enlighten me and I'll roll a uniform shader for inclusion in BitmapFont.

As to that wiki article, that was totally already planned and I just wrote it:


badlogic commented Nov 4, 2012

Fantastic. I agree with your thoughts on not integrating any shaders just yet.

I'm not aware of a way to query the magnification level of a texture sampler in GLSL i'm afraid. It's just a black box, like the other sampler filters iirc.

The Wiki article looks cool, thanks for that! Once this is properly integrated i shall write a small blog post on the matter referencing the article.

Just waiting for the Nate now :)


NathanSweet commented Nov 5, 2012

Looks good to me! And a wiki article too? Woohoo! Since it seems we all agree, merging.

@NathanSweet NathanSweet added a commit that referenced this pull request Nov 5, 2012

@NathanSweet NathanSweet Merge pull request #106 from ttencate/distance_field_fonts
Add support for generating signed distance fields

@NathanSweet NathanSweet merged commit b90752b into libgdx:master Nov 5, 2012


ttencate commented Nov 5, 2012

Awesome, thanks guys!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment