Crisp, Sharp text at any size (SDF)


#1

About a month ago I learned that Panda3D has support for Signed Distance Field text rendering (if you don’t know what it is - tldr it’s a ‘magic’ way to render sharp text at any resolution), but for some reasons unknown there is no info about this feature!

So having finally some time to give it a go I’ve written some shader code and made little class:


This is how it looks using the same 32 pixel per unit font for all texts. The text is just scaled using simple set_scale() there’s no messing with glyph size matching screen text size or any of that stuff, it just works*:

*well some text properties don’t work.


#2

Thanks for the cool demo! Yeah, this is a pretty exciting technique.

The reason I never published info on it is because it isn’t quite perfect as-is, and I was intending to go further with developing it. In particular, you’ll note that the edges don’t look really sharp, which is a limitation with the technique. A great way of addressing these issues is with multi-channel SDF, but I’d not finished integrating that into Panda3D. It’s unlikely I’ll have time for it in the near future, though.

Another limitation of SDF techniques is that scaling text up is really easy, but it’s much harder to make the text look good when zoomed all the way out.


#3

This seems like something that would be a great sample. Thanks for sharing!


#4

I’ve just pushed a commit that changes the way color works for text, now it takes the vertex color of the TextNode internal geom. Embedded text properties that change color can now be used. I used in vec4 p3d_Color; so depending on the Panda3D version in may or may not work as intended - you could replace it with in vec4 color; but then it would default to (transparent?) black if there is no color set. There’s probably some trick to get it working on older versions, but I think updating you p3d sdk is the best solution if you have problems with colors in this sample :wink: