Improve text rendering about uivonim HOT 13 OPEN

FantasqueSansMono Nerd Font Mono:h14

from uivonim.

Interestingly, if you hover over the character, things are rendered correctly:

@Breja Sorry to ping you, but I've been reading through the webgl code and yet cannot seem to figure out what causes the text to render correctly when the cursor is above it. Do you have any idea what could be causing the above to happen? It seems to be related to the background color, but other than that I'm lost as to what makes the text render right/wrong.

from uivonim.

The cursor char is rendered as a HTML/DOM node. It's a z-index thing because I was too lazy to implement the cursor in WebGL.

I think I might start looking in font-texture-atlas.ts to see if the text rendering looks correct there. Text rendering starts by painting text in a plain 2d canvas. Then that canvas is copied/loaded as a texture in WebGL. At that point WebGL is just blitting glyphs from the texture - not sure how much WebGL influences the text rendering at that point. Maybe some settings on how textures are loaded?

from uivonim.

@Breja Thank you for the quick response! After taking a look at the code for the font atlas, it appears that ui.clip() was causing the issues: 6244541. Hopefully that doesn't break something else. Thanks again!

@romgrk If you get the chance, could you try 6244541 and see if it fixes the font issues for you?

from uivonim.

It's no clipped anymore but it still doesn't feel right.

from uivonim.

What do you have guifont set to?

from uivonim.

Interesting, I can't seem to replicate that, looks fine on my system. Maybe it could be config-related somehow? I'm not sure.

from uivonim.

Is the canvas rendering taking into account the device pixel ratio? Is it possible to test rendering to the canvas at higher resolutions?

from uivonim.

Is the canvas rendering taking into account the device pixel ratio?

Yep, here are the main places it's used: https://github.com/smolck/uivonim/search?q=devicePixelRatio

Is it possible to test rendering to the canvas at higher resolutions?

Not sure I understand the question, you mean for me to test it, or just in general?

from uivonim.

Not sure I understand the question, you mean for me to test it, or just in general?

For me to check if it makes a difference. I guess I can set window.devicePixelRatio manually.

from uivonim.

Setting manually window.devicePixelRatio = 2 seems to improve text resolution a lot on on my setup:

h15

h12

Zoomed in comparison (at h15). Previous shows rendering artifacts in-between letters that contribute to a degraded quality.

previous (dpr = 1.25)	new (dpr = 2)

Increasing the ratio beyond 2 seems however to have adverse effects on quality, in this example with dpr=3, other kinds of rendering artifacts appear, the top curves of the "g" look different from each other.

from uivonim.

Interesting, thank you for the detailed response! As far as I know, it could be an issue with (a) the font texture atlas (so see src/render/font-texture-atlas.ts, which is what it sounds like; basically text is rendered onto a canvas and then webgl turns parts of that into textures to render text), or with (b) the settings used to store the texture/draw it, which can be found here as breja mentioned earlier:

I don't really know how I could test this on my system, so here's a diff you could try @romgrk (note that this is a complete shot in the dark, just a change to be more like code I saw in a tutorial on text rendering in webgl; I'm not really sure what it does, and I don't really expect it to fix anything):

diff --git a/src/render/webgl-utils.ts b/src/render/webgl-utils.ts
index b5743a75..b8c0a223 100644
--- a/src/render/webgl-utils.ts
+++ b/src/render/webgl-utils.ts
@@ -94,8 +94,7 @@ const create = (options?: WebGLContextAttributes) => {
   ) => {
     gl.activeTexture(textureUnit)
     gl.bindTexture(gl.TEXTURE_2D, gl.createTexture())
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
     gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
     // @ts-ignore typings are wrong, see https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/pixelStorei#Pixel_storage_parameters

I'm guessing it's more likely that something isn't right about how the font is scaled to the device pixel ratio; if I'm correct it'll probably be something in this code or in the code around it:

But I really don't know what exactly the issue is here.

from uivonim.

I doubt #255 improved anything here (if anything it seems to have gotten worse on low-res monitors), but maybe?

Assuming not, my plan to fix this is to use MSDFs generated with msdf-atlas-gen (via a native node module). Using MSDFs, for one, would allow for proper anti-aliasing in the shader (instead of in the font atlas texture), hopefully improving the text quality (significantly?), and might remove the need to re-generate the atlas as much (since text can be scaled and not look blurry w/MSDFs iiuc).

from uivonim.