search

SolarLune / masterplan

MasterPlan is a project management software / visual idea board software. It attempts to be easy to use, lightweight, and fun.
https://solarlune.itch.io/masterplan
509 stars 46 forks source link

Font supersampling - blurry text fix #97

Open johntringham opened 4 months ago

johntringham commented 4 months ago

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!

SolarLune commented 2 months ago

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.