Question: correct way to use supersampling with MDSF textures

[hybridherbst]

Hi, I was trying to implement Rotated Grid Supersampling from @bgolus for better font readability in VR.

There's a slight improvement, but results look a bit blurry when either supersampling the MSDF texture directly (and then calculating median etc.) or calculating alpha per sample and averaging them (with the technique for 3D outlined here).

Do you happen to have any hints what the correct way to supersample a MSDF texture for better clarity would be? Thanks!

[Chlumsky]

You should definitely average the resulting opacity and not the signed distance samples. Supersampling just the distance field is nonsensical - it is smooth, so you won't gain any new information from it. You should also adjust the output of screenPxRange() as if you were rendering at a higher resolution. That is, to make the screenTexSize variable reflect not the texture size in pixels but in how many subsamples it spans.

[hybridherbst]

I see - thank you, I'll try that out and report back here.
So for 2x2 subsamples I should multiply by 4?

[Chlumsky]

No, by 2.

[Chlumsky]

Also, just so you know, I don't believe you can get a very noticeable improvement in fidelity using supersampling, because the SDF technique already includes its own anti-aliasing algorithm, and supersampling is just a different one. In fact, the only time there should be any difference at all is when the glyphs are so cramped that multiple (non-adjacent) edges occupy the same pixel - basically at very tiny font sizes. And even then, the improvement is pretty miniscule because not much can be done at such a small size. Here is an example I just rendered, top is with no supersampling and bottom has 8x8 supersampling (the number of samples doesn't really matter).

If I really squint my eyes, I can see a slight improvement in the dots above i and j, and maybe the number 3 is a bit nicer, but that's about it. And as I said, for larger sizes the result will be mathematically identical.

If your SDF text doesn't look as good as my above render, there's probably something else going wrong and supersampling won't save you.

[hybridherbst]

Just to clarify, I did not implement the font rendering there (that would be @felixmariotto who'll surely be happy to learn more about how to fix the baseline) - I was just looking into this today to see if I can improve it and had questions. Glad I asked directly here - and thanks for the harsh critique, that is very much appreciated.

[hybridherbst]

I fully agree that the baseline without supersampling doesn't look anywhere as good as yours, should have probably written "I'm sure it's not correct" instead of "not sure if it's correct" ;)

[hybridherbst]

If you don't mind I would still be curious how the "perfect" solution looks on your end with subpixel offsets of the text, e.g. what if you shift your characters up by 0.2px before rendering?

Moving the text (it's in 3D) into an optimal position definitely gives higher quality, with lots of variability if moving ever-so-slightly. In 3D space things can't be easily pixel-snapped, so I'm definitely curious if you have any recommendation there.

[Chlumsky]

I'm not saying it's perfect, it's literally just the basic shader from the Readme, but with everything else configured properly.

Just for you, I modified an old WebGL demo, so that you can see it in 3D and maybe use it as reference: Interactive demo

I'm sorry about the previous comment, now that I read it, it does come off really harsh. Actually, after I tried myself, I have to admit that you are probably right about supersampling helping with flickering when the downscaled text moves only slightly. I would still recommend first rectifying the other issues that make the text look not so crisp, but adding supersampling might actually be much more useful than I initially thought.

[hybridherbst]

Thank you, it's very nice that you made that demo public! That will surely help to fix the remaining issues.

I added RGSS as in Bgolus' article to your demo, plus some camera shake, to check if that part of the code does what it should:
MSDF text rendering demo.zip

When viewed from the side and/or zoomed out a bit, the supersampled version "glitters" less in the tiny font size, but already the second-smallest one doesn't really show a difference. Haven't tested in VR yet though, were that is usually much more apparent.