Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Font supersampling - blurry text fix #97

Open
wants to merge 2 commits into
base: sdl-rework
Choose a base branch
from

Conversation

johntringham
Copy link

@johntringham johntringham commented Mar 5, 2024

I've made some changes locally to stop text from appearing blurry when at >100% zoom. I've referred to this a "text supersampling" in code and it's configurable in the main.go global variables (currently set to a factor of 8, but that can be tweaked)

Comparison screenshots at 1440p fullscreen:
Before/after with default font:

before_defaultfont
after_defaultfont

Before/after with pixel font (excel.ttf):

before_pixelfont
after_pixelfont

It works by making the rendertexture created by textRenderer.RenderText a lot larger, and then scaling it back down to the correct size in the label rendering logic in Draw() in gui.go. Before this change, textRenderer.RenderText was creating renderTextures that were only 32px tall, which made the text look blurry.

This PR also increased the size of the glyphs from 48 to 128 in common.go (128 might be overkill, could probably be reduced a bit without causing much issue)

Hope this helps!

@johntringham johntringham mentioned this pull request Mar 5, 2024
@SolarLune
Copy link
Owner

Hello! Sorry for the late reply - I really appreciate that you worked on this! I could definitely see the difference.

However, I think there's a bit of a problem with this approach - when a text object (like the text on a Note card) renders to the screen, it creates a GPU texture. If the font glyphs are, say, 8x bigger, then the texture must also be 8 times bigger, as well. For example, a normal checkbox card (that just says "New Checkbox") has a width of 9 cells * 32 pixels, or 288 pixels wide. If we upscale 8 times larger, then that texture ends up being 2304 pixels wide.

The larger the texture is, the more of the GPU's VRAM it uses. GPUs also have a maximum texture width, which for my mid-range, recent, dedicated desktop graphics card, a Radeon RX 6650 XT, appears to be 16384x16384. If a lesser, integrated graphics card had a max size of, say, 4096x4096, the maximum sized card it could handle would be 4096x4096 / 8 = 512x512, or about a quarter of a screen wide at 1x scaling for a 1080p screen. That's kinda small - I don't think it would be usable, effectively.

So maybe upscaling to a smaller degree (like 2x or 4x) could work, but I think it might be better to just add a customizeable font size option to allow the user to specify the font's resolution they want to use - the higher the resolution, the crisper the text should appear (up to a maximum of 32 pixels wide and tall for each font glyph). If the font size needs to go beyond that, though, the text wouldn't appear any crisper.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants