Signed Distance Field Fonts


#1

Hello everyone! Does anyone uses Signed Distance Field Fonts technique?

Signed Distance Field Fonts technique allows high quality text rendering and do not lose quality while text up&down scaling.


#2

Nobody uses signed distance fonts with SDL2?


#3

I haven’t tried SDL_ttf for a long time, but I used SDF fonts some years ago using fontstash with a little modification to make it use SDF.

But I believe stb_truetype now supports SDF rendering directly so it should be pretty easy either to just use stb_truetype directly or if you want something not so low level make fontstash use that (it’s using stb_truetype already).


#4

ollika thank you very much for your detailed response!


#5

olika, is there any example using SDF fonts with SDL2?


#6

Sorry, I don’t have a proper example to point you to. Text rendering is a bit of a hassle to be honest.

Also note that rendering text using SDF needs a custom shader so you would have to use OpenGL or DirectX instead of just plain SDL2.

If you can’t find an example that does SDF, you could try to find one that uses SDL2 and stb_truetype. Then modify the example code to render SDF instead of rendering normal glyphs. But like I said stb_truetype is quite low level, so depending on what kind of rendering you need, it’s probably easier to just use something like fontstash. Seems that it has a pull request for SDF support, but it’s not yet applied.


#7

Yeah, I understand that I should use OpenGL ES directly to render SDF because it need custom fragment shader with smoothstep and etc. As far as I understand it is not good use SDL Renderer and GLES api together. That is why if I will render SDF I should use GLES directly to render other textures (with other “base” shaders) too. Please correct me if I wrong.

I want to port app which uses a multilple short (at most cases 1-2 length) strings drawing. The strings will be scaled according by device screen resolution and by user manually using gestures.

I have done this app on Marmalade SDK (C++) and I used third-party SDFFlib library which gives a high-level api. Because Marmalade is dead I want to port it on SDL. I have source code of this lib but I unfortunally I have not enough skills to port SDF on SDL, because it uses closed-code marmalade abstractions.

If you interesting, I can share this library. It was used by marmalade community and the author was given as some small rewards for it.

I think it will be great if SDL community will have a shared SDFFont render library too.

Now I start to learn OpenGL ES 2.0 specification step by step and learning examples. Any examples for SDL will be useful.


#8

I find SDF example for SDL2 here https://github.com/oxygine/oxygine-framework/tree/master/examples in Demo example.
After some debugging I found vertex and fraxment SDF font shaders and try use in my sample project.

My sample project here https://github.com/akk0rd87/SDL_SDFFONT
First I try to render whole SDF Font texture atlas. But insead of atlas I get black rectangle.

openglesdriver.h - the class for openGLES functions loading.
sdf.h - it is my example code.

Could you help me and say where I wrong?


#9

I had some spare time and wanted to try out the SDF support in stb_ttf. So I created a small SDF text demo app: https://github.com/suikki/sdf_text_sample

It uses a fork of fontstash that uses the SDF support in stb_ttf (and works on OpenGL ES2).

Online demo using emscripten: https://suikki.github.io/sdf_text_sample/demo/


#10

Thank you, ollika. I’m in vacation now. I will checkout after January 10.