Sample window font in Firefox (macOS) is blurry

[JCash]

The W and S are most visibly cut off.

I tried to verify the texture with the Spector.js extension, but it wouldn't run for me. Although I expect it to be the shader code to be slightly off here.

[dwilliamson]

Yes, there's not much I can do about this at the moment beyond making the font and spacing bigger, consuming more space in the UI.

The font renderer needs to be a lot more sophisticated to match the browser.

Although there will likely be flaws in how the atlas is baked. I haven't spent much time on it.

[JCash]

What's confusing to me is that the header font looks a lot more crisp. Is that the same font? The S's look diffferent to me, so I guess not?

[dwilliamson]

The header is rendered by the DOM, not Remotery's shaders.

[dwilliamson]

I think an immediate improvement could be had with a pre-generated font atlas.

Can you run this for me: https://lucide.github.io/Font-Atlas-Generator/

Use these properties:

• Font: Fira Code
• Font Size: 9

Do the letters in the atlas look better than they do in Remotery?

[dwilliamson]

In fact, it appears they have the same problem in that generator: you can't reliably generate letters as the amount of anti-aliasing varies depending on where the letter is rendered into the atlas. These are two of the sample letter positioned differently on the atlas:

What also seems to vary it is the width of the output rectangle: odd generates different to even.

I think for reliability for now, I'll need a custom-built atlas. Then later (much later) quality font rendering can be addressed.

[dwilliamson]

I might try this if I get time https://github.com/memononen/fontstash. I already use it on an internal UI project and it's pretty flawless.

[JCash]

Sorry, I couldn't get the font atlas generator to produce a Fira Code atlas (or Fira Sans of any kind).

Yes, if the atlas is problematic to start with, it sounds good to look into alternatives.

[dwilliamson]

Linking for reference https://www.warp.dev/blog/adventures-text-rendering-kerning-glyph-atlases

[dwilliamson]

Rather than generating the atlas offline, we might find some clues on water-tight atlas generation from xterm.js:

• https://github.com/xtermjs/xterm.js/tree/master/addons/xterm-addon-webgl/src
• https://github.com/xtermjs/xterm.js/pull/1790

Interestingly, it appears to render a quad per glyph, so is still quite a ways from being the most optimal. This may imply requirements of their atlas generation that we can't match.