6
$\begingroup$

I attempted to implement font rendering using signed distance fields.

My program first generates a mono bitmap at font size 64 (using FreeType), then generates an SDF from the bitmap. This is then uploaded into a texture atlas.

The results are not very nice and look nothing like the various papers show:

Generated letter capital X

My guess is that the bitmap does not have a high enough resolution, but I do not necessarily want to generate SDF's larger than 64px (they have to fit in the atlas). Besides, at 256px, the generated sdf still has artifacts, albeit less noticable unless blown up.

So how can I get better results / how am I applying the algorithm wrong?

$\endgroup$
  • 2
    $\begingroup$ At first glance, the edge artifacts are somewhat reminiscent of alpha-test edges on a low-res texture. This is the outline rendered from the SDF, correct? Can you show the SDF itself? If that looks right, then I'd check if the texture is set up correctly (interpolation mode etc) and look for math bugs in the final rendering shader. $\endgroup$ – Nathan Reed Dec 13 '16 at 1:44
  • $\begingroup$ Well, the generated sdf looks like this (in text form): pastebin.com/5GY71Y15 $\endgroup$ – timedt Dec 13 '16 at 14:49
  • $\begingroup$ And the interpolated image for the sdf looks like this: imgur.com/G7pAlLT $\endgroup$ – timedt Dec 13 '16 at 14:59
8
$\begingroup$

Hmm, that SDF doesn't look right. It should be much smoother, like this image for instance:

SDF example

(image from this blog).

One possible issue I noticed in your description:

My program first generates a mono bitmap at font size 64 (using FreeType), then generates an SDF from the bitmap.

The initial text needs to be rendered at a much higher resolution than the resulting SDF, so you can get subpixel precision in the distances stored in the SDF. For example, in the original Valve paper, they render the initial mono bitmap at 4096×4096 in order to generate a 64×64 SDF from it.

$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.