MSDF Text rendering : Text looks weird when zooming out

Questions
,
1

Hello everyone !

I am currently coding a node editor in three.js, and I am in the process of making a “library” for rendering all my node-editor texts.

So the goal in the end is to render 2D Texts in a ThreeJs Scene.

Problem

My text looks very good up close, when zooming in on it, we see barely any issues. (image 3)

However when zooming out, the text fades, either its becoming unreadable, or the edges/curvatures gets pixelated.

What I got

I fully wrote the MSDF rendering process, it’s taking a JSON and PNG from the program (msdf-atlas-gen.exe) ran beforehand and its rendering the text onto the scene.

Font is a SpaceMono-Regular, size of the atlas is : scaleW 272, scaleH 296, distanceRange is 4

For my use case I have also implemented a queue system where you can basically add any text into a queue in order to be rendered on the next update (in order to have infinite amount of different texts with a single draw call)

What I want

I want my MSDF text to look sharp at any distances/zoom level.

Why not use an existing library ?

Troika three text isn’t suited for my needs (like instancing per glyph..) and I also want to fully be able to customize it. It also doesn’t have a full .ts binding. which is annoying.

I also like rewriting stuff myself because I want it to suit my needs.

How you can help me

  • Check out the images linked at the end of the post. In order to understand at a glance.

  • I have made a repository where you can test out what I mean by “text is weird when zooming out” : repo : Gitlab - Msdf Renderer Test

  • If you have any advice considering this issue.

Images

In this first picture we can see the “L” looks pretty okay, but the W and the N not so much they are very distorted. This is from my original code.

WWW weird low zoom

In this second picture same thing happening. This is from my test repo.

same_on_index_html
same_on_index_html537×107 8.97 KB

In this third picture, when zoomed in on the text, we can see that it’s pretty much spot on, what an MSDF font would look like. It is sharp, without much pixelization.

image
image1786×683 66.4 KB

If you have any advice, or guidance, I will greatly appreciate it.

Thanks everyone.

2

Are the glyphs rendered to a texture to be rendered in three? If so have you tried setting texture.minFilter and texture.magFilter to = THREE.LinearFilter?

3

I have tried.

honestly between LinearFilter(and generate mipmaps false) and Mipmaplinearfilter + generate mipmaps to true

I do not see any differences. At least not for my issue.

I have since then, put back linear filter on both min and mag filters and disabled mipmaps because MSDF quality could be affected

1 Like
4

Interesting, usually linear mag filter resolves these issues, the next step would be to look into anisotropy Why does the material texture appear blurry? How to solve it? - #6 by PavelBoytchev

1 Like
5

I have also tried this and honestly it doesn’t make much difference, I think the issue is more related to my MSDF shader. I feel like its missing stuff for anti aliasing. But I am not sure.

6

Traditional font rendering had to come up with things like hinting to ensure fonts are legible at small sizes. Distance fields are generated from a fixed larger font size and don’t have any hinting information, which is fine when you render large text but doesn’t look as crisp when you scale the text down.

In my (limited) experience with this stuff, supersampling the text is a quick and easy way to improve the output quality. Sample the distance field at double the output resolution, then scale the glyphs down when displaying the text. Maybe you can do it selectively, only at small sizes.

1 Like