Blurry menus / scaling issues using multiple monitors

[jonas-schulze]

I'm working on a 13" 2018 MacBook Pro having a WQHD monitor connected via HDMI (over a USB dock). When I try the menu example, the menu looks very blurry on the external monitor:

When I move the window to the laptop's screen, the menus look much smaller and therefore sharper as well:

#1186 is also visible when opening the upper menu.

[jkrumbiegel]

GLMakie doesn't have resolution scaling yet, so there's no hidpi support per se. That's why everything is small on a hidpi monitor. Also, GLMakie text is not the sharpest to begin with because it doesn't use hinting, so some fuzzy fonts are to be expected currently. At least you can always export with CairoMakie for higher quality.

[ffreyer]

I wonder what's actually causing GLMakie fonts to be blurry. It's not like large text looks blurry. Maybe we need to generate lower resolution glyphs and use them as mipmaps?

[SimonDanisch]

Maybe we need to generate lower resolution glyphs and use them as mipmaps?

Yeah, that's a very good question, they should look somewhat crisp regardless of resolution - of course high-dpi will make fuzziness less obvious though...
But, I've been noticing that for a while that it can look worse than it should, but it's somewhat hard to reproduce... I'm guessing, some pixel scaling values aren't set correctly

[ffreyer]

Ok I tried a few things:

I tried switching to 16x16 glyph resolution by explicitly running https://github.com/JuliaPlots/Makie.jl/blob/2faa3d75733689f2d3e802b1f623d0f90343005a/src/utilities/texture_atlas.jl#L27-L29 with appropriate values.

I tried rounding positions in https://github.com/JuliaPlots/Makie.jl/blob/2faa3d75733689f2d3e802b1f623d0f90343005a/GLMakie/src/drawing_primitives.jl#L297-L299

And I tried rounding in the vertex shader here https://github.com/JuliaPlots/Makie.jl/blob/2faa3d75733689f2d3e802b1f623d0f90343005a/GLMakie/assets/shader/sprites.vert#L119

Seems like pixel alignment is the main problem. Native (ticks use 16px fontsize by default) and high resolution glyphs look the same to me. Same with in-shader rounding vs rounding beforehand. Also interesting that libre office is so colorful, maybe that's due to dark mode? Nope, it's subpixel rendering. https://www.grc.com/ctwhat.htm

[ffreyer]

I tried to make a pr to switch to pixel-aligned text rendering (https://github.com/JuliaPlots/Makie.jl/tree/ff/text) but it's not much of an improvement. Some glyphs look better, some worse, most just fuzzy somewhere else. So I tried a few different alignments (i.e. aligning vclip, it's constituents, or shifting by the antialiasing radius) and eventually I tried generating the texture atlas at a different resolution again. Turns out I didn't do that right. This is what 16 vs 64, floating vs pixel aligned looks like:

So texture resolution does matter. Here's the normal resolution plot with

16x16 glyphs (pixel aligned)

Note that the axis ticks have textsize = 16, matching the glyph size in the texture atlas, but the text plotted into the axis has textsize = 20. Here's the result with

20x20 glyphs (pixel aligned)

Comparing 16x16 and 20x20 I'd say things look best when the glyph resolution matches the textsize and downscaling is better than upscaling. Both can introduce some artifacts though. I still wouldn't say pixel aligned is strictly better... Maybe a better on average?

For reference here are glyph resolutions 16x16, 20x20, 60x60, 64x64 with and without pixel alignment.
text.zip