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

<p><img src="https://farm3.staticflickr.com/2899/14414646376_03162c9141_o.png" alt="SDF example"></p>

<p>(image from <a href="https://www.mapbox.com/blog/text-signed-distance-fields/" rel="noreferrer">this blog</a>).</p>

<p>One possible issue I noticed in your description:</p>

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

<p>The initial text needs to be rendered at a <em>much higher</em> resolution than the resulting SDF, so you can get subpixel precision in the distances stored in the SDF. For example, in the <a href="http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf" rel="noreferrer">original Valve paper</a>, they render the initial mono bitmap at 4096×4096 in order to generate a 64×64 SDF from it.</p>

CC BY-SA 3.0
2016-12-13T18:10:32.850Z
2016-12-13T18:10:32.850Z
Nathan Reed
<p>I attempted to implement font rendering using signed distance fields.</p>

<p>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.</p>

<p>The results are not very nice and look nothing like the various papers show:</p>

<p><a href="https://i.sstatic.net/WGKeI.png" rel="noreferrer"><img src="https://i.sstatic.net/WGKeI.png" alt="Generated letter capital X"></a></p>

<p>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.</p>

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

CC BY-SA 3.0
2016-12-13T01:44:54.327Z
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.
Nathan Reed
CC BY-SA 3.0
2016-12-13T14:49:37.900Z
Well, the generated sdf looks like this (in text form): http://pastebin.com/5GY71Y15
timedt
CC BY-SA 3.0
2016-12-13T14:59:31.720Z
And the interpolated image for the sdf looks like this: http://imgur.com/G7pAlLT
timedt
<opengl><signed-distance-field><font-rendering>
Signed distance field font looks odd
timedt
# Signed distance field font looks odd

(Asked by: username_0 on 2016-12-13)

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](https://i.sstatic.net/WGKeI.png)](https://i.sstatic.net/WGKeI.png)

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?

**Tags:** opengl, signed-distance-field, font-rendering

> **Comments:**
> **username_1**: 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.  
> **username_0**: Well, the generated sdf looks like this (in text form): http://pastebin.com/5GY71Y15  
> **username_0**: And the interpolated image for the sdf looks like this: http://imgur.com/G7pAlLT  

---

## 1 answers

### Answer by username_1 on 2016-12-13. Score: 8 | Accepted answer

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

![SDF example](https://farm3.staticflickr.com/2899/14414646376_03162c9141_o.png)

(image from [this blog](https://www.mapbox.com/blog/text-signed-distance-fields/)).

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](http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf), they render the initial mono bitmap at 4096×4096 in order to generate a 64×64 SDF from it.


---

