Distance field fonts are blurry

[Zylann]

Tested on Godot 2.1.2
Windows 10 64 bits

I created a theme with a custom font, and it looks fine with Labels. However, every other control gets blurry text instead. I expected the same result as the label, because I see the text appears to be the same size.

ItemListFontBlurry.zip

Related QA thread I investigated from: https://godotengine.org/qa/13127/itemlist-font-is-scaled-and-blurry

[eon-s]

Seems to affect just distance field fonts, by the way.

[Laseph]

I've had the same problem. I've looked through the code and although I'm not a programming expert at all, I found this piece of code that can only be found in the label.cpp. This is probably why it doesn't render correctly. Edit: I meant by that why it doesn't render correctly for the rest of the text based nodes
VisualServer::get_singleton()->canvas_item_set_distance_field_mode(get_canvas_item(), font.is_valid() && font->is_distance_field_hint());

[Zylann]

Well, maybe it's why only the label renders correctly, in fact^^

[kubecz3k]

First of all thank you for your report and sorry for the delay.

We released Godot 3.0 in January 2018 after 18 months of work, fixing many old issues either directly, or by obsoleting/replacing the features they were referring to.

We still have hundreds of issues whose relevance/reproducibility needs to be checked against the current stable version, and that's where you can help us.
Could you check if the issue that you described initially is still relevant/reproducible in Godot 3.0 or any newer version, and comment about its current status here?

For bug reports, please also make sure that the issue contains detailed steps to reproduce the bug and, if possible, a zipped project that can be used to reproduce it right away. This greatly speeds up debugging and bugfixing tasks for our contributors.

Our Bugsquad will review this issue more in-depth in 15 days, and potentially close it if its relevance could not be confirmed.

Thanks in advance.

Note: This message is being copy-pasted to many "stale" issues (90+ days without activity). It might happen that it is not meaningful for this specific issue or appears oblivious of the issue's context, if so please comment to notify the Bugsquad about it.

[eon-s]

Is there a way to create distance field fonts? It do not seem possible on godot 3.

[Zylann]

Just try to import the same font as in the example project?

[eon-s]

No, that font is not recognized as a resource.

[Zylann]

Argh I need to find the original, I believe that one was imported with 2.x

[Zylann]

Importing that font in 3.0.2 works:

[eon-s]

@Zylann how do you managed to import it? (and as .tres)

[Zylann]

@eon-s the original is a TTF, I created a DynamicFont from it. I'm not sure why distance field was a thing in the first place in this issue (the FNT file was a result of Godot 2 import).

[eon-s]

Oh, I was able to replicate only with that font, I will see if I can get one and try again later

[eon-s]

This issue is not solved, still valid for distance field fonts,

Example using the font on the SDF demo.
ItemFontBlurryV3.zip

[reduz]

Distance field fonts have not really been properly re-added yet, so this gets kicked to 3.2

[Zylann]

Bumped again into this after upgrading my game from Godot 2 (where it worked) to Godot 3.0.6 (no longer works), still with the same font.
It should be noted that the difference is not like the first example I posted, and what I thought was working actually isn't. See this comparison:

(Click to see full size)

If having to wait for 3.2, that means... quite a long time, since it's the version we plan to have Vulkan in^^" I'd expect such a fix to be in a 3.1 maintainance release instead. Meanwhile... no pixel fonts...

[KoBeWi]

Still valid in 3.2.3
In 32be929 the font isn't even loaded.

[Calinou]

This is fixed by the new MSDF font rendering implementation in master. This is unlikely to be fixed in 3.x though, unless a motivated contributor finds a solution.

[ghost]

I fixed this in my custom build. Took me about 1 day. Works perfectly for GLES2 and GLES3 just like it did in Godot 2 but was only implemented for specific (non advanced) buttons and in the editor the Theme plugin always shows blurry still. This feature was never properly implemented in 3 and over the years it kinda got moved around bits and pieces everywhere and some lines completely gone. I had put all the pieces back together or completely re-implement some things. I guess I'm 5 years too late nobody really cares about this feature anymore but here it is working in Godot 3.x latest.

[Zireael07]

@filipworksdev Can you make a PR?

[ghost]

Hi @Zireael07 I can try but can't guarantee I'll be approved. Is only implemented for some controls. I skipped all the advanced stuff because I don't think they were meant to work with bitmap fonts like a TextEditor for ex. Works in game though for the specific implement controls. The main issue is I could not make it work for the new Theme Editor Plugin preview. It only works when you do a popup but not in the actual theme. The new Theme Editor needs more work from someone that knows it better . I tried but couldn't figure it out.
.

[Zireael07]

I can't guarantee it will be approved either, but as it is a bugfix chances are it will and/or someone will take a look at the other places that need the fix, like the Theme Editor you mentioned,

[Calinou]

@filipworksdev If you don't have time to finish this work, could you push your work to a branch so others can improve it and open a pull request based on it? Thanks in advance 🙂

[ghost]

@Calinou Sorry! I did push it to a branch but is using my custom build of Godot for educational purpose where I am doing more core changes and more basic work to learn C++.

This is the commit with all the changes. Is compatible with 3.x branch goblinengine/goblin@66c4f2f

It works but has a number of issues which need to be addressed:

It causes some blurry effects on some controls . The signed field was not ported correctly and then for years the controls were modified without signed field in mind so now adding these back I realize the style rects are drawn in a way that conflicts with how signed field work.

I have also adjusted signed field shader to be slightly less sharp to avoid it looking blurry when zoomed all the way out or on lower rez (retro-style) viewports.

Signed field needs to be manually flagged for each control font in order to make it work . In Godot 2 only label used this while all other controls would automatically turn on Signed Field when the font was marked as such and this happened when Canvas item was rendered. Now because of batching that way of rendering cannot happen and cannot individually turn on/off signed field shader for those specific fonts. Each control would have to use something like this VisualServer::get_singleton()->canvas_item_set_distance_field_mode(get_canvas_item(), font.is_valid() && font->is_distance_field_hint()); on the control font to enable it. This marks the specific canvas item font to render with signed distance field shader via the VisualServer. This can in fact be done from GDScript , however, the signed field canvas shader was incorrectly written for GLES 3 and was completely missing in GLES2 canvas shader.

My code will not work inside theme preview either. I wasn't able to figure out how to make it with the newly reworked theme preview. It just looks blurry. I think is because the theme preview panel uses custom rendering and doesn't enable signed distance fields on any of the fonts.

Also signed filed is not enabled for more complex controls like for example TextEditor. It doesn't seem like it was designed with simple fonts in mind.

So I got a bit ahead of myself. After further testing works well but not perfectly 😄

[Calinou]

I ported filipworksdev's changes above to a branch based on 3.x: https://github.com/Calinou/godot/tree/fix-sdf-font-rendering-3.x

Right now, it's working correctly, but only when batching is disabled. I changed the rendering formula in the shader to further improve the sharpness/antialiasing quality balance as well.

Improvements to rendering quality could be made by adjusting SDF smoothing depending on font size (relative to screen size) or performing supersampling. However, the screen_pixel_size uniform is only available when SCREEN_UV is used in the shader, and I need that to adjust SDF smoothing based on resolution.

Testing project: https://0x0.st/oaBt.zip _{(link expires in April 2023)}

1024×600

2560×1440

[eon-s]

It would be great if this could land on 3.5, even as experimental because is a huge improvement.

[filipworksdev]

Thanks @Calinou ! Looks great. Sorry it says Ghost above I'm still here I had some issues with my old account so I ported everything to a new account same usename and same repots. Still here :) Did you manage to fix the theme preview and I think there are also batching issues.

[akien-mga]

Thanks!

[Calinou]

Fixed by #86786.