Signed Distance Field Font Rendering

Signed Distance Field Font Rendering

in Using Cinder • 5 years ago

Hi all,

here's the result of a little experiment with a technique called "Signed Distance Fields" I made this evening. It was invented and published by Valve Software and used in their game Team Fortress 2. I read about it last week and wanted to give it a go.

Check the video:

http://youtu.be/CGZRHJvJYIg

The technique is very simple, but gives great results when rendering text using a font texture, which is quite common in games. The basic idea is to create a texture containing all characters of a font. You can then write lines of text by copying the right area of the texture to screen, or by creating a mesh that uses the correct texture coordinates. A class called TextureFont was recently added to Cinder that does text rendering this way.

The problem with rendering text like this, is that the characters can't be scaled up without losing detail. You start seeing pixels as soon as you zoom in just a little bit. This is because each character takes up a limited amount of pixels in the texture, so rendering at 150% scale or bigger gives increasingly bad results.

A font texture encoded with Signed Distance Fields.

Valve has found a way to keep the edges of your characters sharp, by cleverly encoding so-called "Signed Distance Fields" into the font texture and then using a threshold shader to compute the edges on-the-fly. It's one of those techniques where you go "Why didn't I think of that?".

I will post the code as soon as I think it is ready to share with you, right now it's a bit messy and lacks a lot of features.

Edit: code can now be found in my GitHub repository. You can also download this ZIP file, containing all necessary files and an executable for Windows.

To create your own font textures with SDF, use the excellent tool made by 'Lonesock' on Gamedev.net.

The shader, which is very simple, looks like this:

// VERTEX SHADER

#version 110

void main()

{

gl_FrontColor = gl_Color;
gl_TexCoord[0] = gl_MultiTexCoord0;
gl_Position = ftransform();

}

// FRAGMENT SHADER

#version 110

uniform sampler2D tex0;

void main()

{

// retrieve distance from texture
float mask = texture2D( tex0, gl_TexCoord[0].xy).a;

// use current drawing color
vec4 clr;
clr.rgb = gl_Color.rgb;

// perform simple thresholding
if( mask < 0.5 )

clr.a = 0.0;

else

clr.a = 1.0;

// do some anti-aliasing
clr.a *= smoothstep(0.25, 0.75, mask);

// final color
gl_FragColor = clr;

}

It would be awesome if some of this functionality could go into the TextureFont class. But I am afraid it would require quite a bit of work to add the SDF algorithms.

-Paul

Replies(16)

Simon Gei..

Re: Signed Distance Field Font Rendering

5 years ago

Wow! This looks awesome!

Distance field seems to be an endless source of surprise!

Thanks for sharing!

rich.e

Re: Signed Distance Field Font Rendering

5 years ago

Wow, that video shows impressive improvements in allowing one to zoom on text, the difference is huge.

Any way to implement an SDF based TextureFont as a block?

andrewfb

Re: Signed Distance Field Font Rendering

5 years ago

Wow - Paul Houx strikes again. Really nice work. I've looked some at the SDF stuff in the past, and I don't think it would be too hard to implement. At least the straightforward way to use it would require shader support and consequently wouldn't work in iOS, but that may be ok. The text stuff in Cinder will be revisited at some point, but if someone wants to collaborate on implementing this I'd be interested to help it along. I'd love for the text support to be excellent in Cinder, but it's simply not yet.

-Andrew

paul.houx

Reageren: Signed Distance Field Font Rendering

5 years ago

Thank you all for the kind words.

I am planning to create a full-fledged text system from this, supporting word wrap, alignment and several different types and colors per line of text. Editable or select-able text is not on the list for now, but if it proves to be easy to implement after all the hard work I might add it as well.

I'll keep you updated and notify you when this will be available as a Cinder Block.

-Paul

Simon Gei..

Re: Signed Distance Field Font Rendering

5 years ago

Just realized the last 3 messages start by "wow"!

I wrote a minimal text/code editor couple of weeks ago on top of cinder's "already great text features", so if I can contribute in anything... let me know!

Cheers!

rich.e

Re: Signed Distance Field Font Rendering

5 years ago

Hehe, that tells you something.

@andrewfb I recall you mentioning an upgrade in the iOS layer for OpenGL ES 2 this year, is that right? If so, I think that is positively helping along. :) As others have mentioned, shaders are just too nice to do without.

I already know that I'll be using this type of font rendering for a project I am planning that requires a alot of zooming around on a plane...

rich.e

Re: Signed Distance Field Font Rendering

5 years ago

I was wondering, how feasible would it be to generate the SDF on the fly? I haven't been able to find much C code for it, maybe this... but it would be nice not to have to precompute them.

safetydank

Re: Signed Distance Field Font Rendering

5 years ago

I had a rough prototype of signed distance fields in Cinder a while ago, one of my takeaways was that brute-force calculating the distance field is very slow, probably too slow to do at runtime. There are more efficient methods available but they are tricky to get right - this implementation (http://contourtextures.wikidot.com/) looked good but IIRC had licensing issues.

paul.houx

Reageren: Signed Distance Field Font Rendering

5 years ago

Ola,

while there isn't anything against generating SDF textures on the fly, I personally prefer pre-rendering them using an easy tool (like the SDFont.exe I used for my sample). It gives you a chance to maximize quality settings by trial-and-error, but most importantly the texture will definitely be the same across all platforms.

If you are looking for a distance field generator, maybe the SDFont.exe source code might be a good starting point. See the post at the top of this thread.

My plan to create a full-fledged text system has sadly been put on hold, I simply don't have the time and energy at the moment. But I have been using the SDF text system presented in this thread in my current project, with great success. Creating the mesh from a text is blisteringly fast... the whole Moby Dick book is done is much less than a second! After that, rendering it is even faster (200 fps is no problemo). At smaller point sizes, you do need great quality multisampling (16x), I recently found out.

Here's a screenshot:

It's very much a work in progress. The image of the fish is just a placeholder, taken from http://allfinearts.com/very-beautiful-drawings/ . Note the readability of the smaller text, the proper kerning and the extra space between the lines (leading). The icons in the menu and on the map are also rendered using distance fields, resulting in proper anti-aliasing at all sizes. The application isn't very spectacular, but the technology behind it is something I am very proud of. When it is done, I will show some of it in the gallery.

-Paul

rich.e

Re: Signed Distance Field Font Rendering

5 years ago

Good points. I was thinking more along the lines of having access to system fonts at runtime, but I suppose that doesn't have as much real-world application.

@Paul I think your app looks beautiful, and it's interesting you are using the same technology for scalable icons.

juraj.suk..

Re: Signed Distance Field Font Rendering

5 years ago

Greetings,

you might find this interesitng:

http://code.google.com/p/glyphy/

"GLyphy is a signed-distance-field (SDF) text renderer using OpenGL ES2 shading language. ... GLyphy instead [of a texture] represents the SDF using actual vectors submitted to the GPU.

It's by Behdad Esfahbod, of Cairo, Pango and HarfBuzz (among others) fame.

paul.houx

Reageren: Re: Signed Distance Field Font Rendering

5 years ago

Do you know of sample images illustrating Glyphy's quality? Apart from a rather empty Google code page, I can't find anything else about it.

juraj.suk..

Re: Signed Distance Field Font Rendering

5 years ago

Here you are:

paul.houx

Reageren: Signed Distance Field Font Rendering

3 years ago

Heads up:

Glyphy was presented last week, here is a video presentation:

https://vimeo.com/83732058

While it sure renders glyphs in higher quality than SDF font textures, the shader cost is much higher and the difference in quality is only visible when zooming in very closely. Apart from applications where the quality of the type is very important, I'd probably prefer the much faster SDF font texture solution.

-Paul

juraj.suk..