Distance field based font render

[Xetick]

Finished my distance field font renderer and I though that others might be interested in this if they only knew just how useful it is.

If you start with a normal bitmap font text rendered it's very simple to convert it to a distance field font render system. I can highly recommended the angle font generator for a simple normal bitmap font rendererd. Then apply the bitsquad distance field tool to generate a distance field texture from it.

But part of the nice thing with a distance field is that you dont have to render simple monochrome fonts. Because the font contains the distance to the font outline you can have some fun with it. Like adding a outline, drop shadow or bluring the font in just a line of shader code or two. Valves original paper has the shader code for all of them.

An example of this is

In the original unscaled image the letters in that image is about 200 pixels height each and making them larger has only a small effect on the quality. The font used covers most ascii chars but fits in a 256x256 texture with only one component. The effect used is a drop shadow but adjusted to affect the inside of the characters.

[va!n]

looks smooth! Maybe this is something for you: http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf

[Xetick]

Yes, thats the exact paper I link to

[Rbz]

Very nice!

This site have a source code example and more info.

[Rbz]

yay! I've managed to implement this cool xna sample version.
Thanks Xetick for showing us this technique, it's very useful.

Use your cursor keys + A/Z to translate, F1/F2/F3 to change distance texture.

Requires a graphic card with PS 3.0.

[Shockwave]

Nice... Really elegant and cool!

I'l love to see a text writer from this technology with HUGE letters zooming into the screen or maybe even used to make an Outrun style road and scenery   I bet that would look as cool as hell.

[va!n]

@rbz:
Really nice demonstration with a nice result @ 60/61 fps!
Btw, how to change the 'Scale' operator?

Would be nice to have the hotkeys as helppage under the info output ^^
Did i understand you right, that your version is based on XNA?

[Rbz]

@va!n: You can use your numpad +/- to change scale.

Did i understand you right, that your version is based on XNA?

I've used my MSVC framework, I just borrowed it's .fx file which is in fact the core source code for this effect

@Shockwave: the possibilities are endless, Masagin anyone

[Xetick]

@rbz
Thanks for the link. Haven't seen that link before. They do their own filtering if I understand correctly. I do wonder why because I haven't seen any problems on relying on the hardware to do it and even valves original paper just relies on the bilinear filtering hardware. But I guess the paper goes into details of why this is needed.

Nice demo. Seems like you did like me and went with valves approach.

Found something useful to write except the clocks I always seems to do with a text writer and did a quick test

'How I met your mother' does have it's highlights