Bug: V8 MSDF text rendering quality

[jakerdy]

Current Behavior

MSDF (and probably SDF) bitmap text in V8 has worst quality compared to V7.

About year ago, I made a PR that make MSDF text look better (#9261), and so far it was great, and I was happy with result. But tooday, I finnaly decided to move to V8, and found couple problems.

First one was about strange tint behaviour, and second - poor quality of MSDF text shader.

Problems with current implementation:

• When scaled down, aliasing is very strong
• When scaled up, aliasing still persist
• Alpha calculated without gamma correction for 'dark theme' scenarios. In terms of text, alpha should be calculated as (or like) coverage, in order to work correctly, for black-on-white and white-on-black.
• Tints applied incorrectly (related Bug: V8 graphics tint applied in a weird way #10462), compared to Text and HTMLText
• Empty lines in multiline text ignored and dropped out from layout

Good things about V8 BitmapText:

• Layouts are shifted. Which actually good, because now BitmapFont use baseline property from .fnt file. V7 Didn't.
• Interoperabilty between different text types. It's way easier now to switch between different text types.

Expected Behavior

Here you could see some comparisions:

Open it at 100% and swap between, you could see how much it changes.

Quality of AA

Case	V7	V8	Comment
100% size			I didn't change anythin im my code related to look and feel, just upgraded from v7 to v8
Small text			Aliasing makes small text unreadable
AA on big			There also aliasing compared to previous implementation, I think it somehow related to alpha/coverage evaluation...
Layout			It shifted due to v7 bug, that doesn't use base line from font. Not a bug. Feature!

Skipped empty lines

Also there is demonstration of skipping empty lines in multiline text:
Lines shouldn't be skipped.

HTMLText	BitmapText (MSDF)

Tint inconsistency

Even if #10462 not bug but feature, there is inconsistency between BitmapText and other text's. Others just multiplied by tint, when BitmapText do something else, as graphics and sprites.

Text & HTMLText	BitmapText

Steps to Reproduce

It's pretty cumbersome to reproduce it in playground. I attach my fonts in zip, so that you could use it to test on your side...

• msdf-fonts.zip

Environment

• pixi.js version: e.g. 8.1.0
• Browser & Version: e.g. Chrome 124
• OS & Version: e.g. Windows 10

Possible Solution

You could use my changes from (#9261).

It will require to change signature of function that evaluates SDF/MSDF alpha defined here:
src/scene/text/sdfShader/shader-bits/mSDFBit.ts. It should get color of letters, in order to correctly estimate coverage.

I did tried to do it my self, but didn't figure out how to do it correctly.

Additional Information

Anyway. Pixi v8 is great, new api's feels good and polished. Hope this buggs will be resolved and I could finnaly switch to V8...

[jakerdy]

Tested tooday in v8.1.1.

Most tint issues with graphics and sprites gone, but BitmapText is still afffected.

Also spoted one more problem, that most likeley related to AA issues described earlier. But still:

• If text was scaled (or transformed in any different way), it should render consistently.

In my case, I have some labels that maintains their pixel size, no matter how far or close user zoomed into scene. If zoom is 4x, then text label will have 1/4x scale. If zoom 1/8x, label will be 8x, and so on.

Here You could see how it looks in v7.4.0 and v8.1.1:

Looks like object scale/local coordintaes used while evaluating SDF distance. Also it might be some kind of mipmap issue. Mipmaps should be disabled for (M)SDF atlasses.

[GoodBoyDigital]

heya @jakerdy thanks for sharing all the details - will try to take a look!

[GoodBoyDigital]

heya! i think i have this fixed - but hard to verify! if you could test this branch out. that would be ace!

[jakerdy]

Hi. Tested tooday, and yeah, it's better now. But most of issues still there.

Fixed:

• Tints are valid

Still there:

• Skipped empty lines in multiline text layout (Example: hello\n\nworld - there should be empty line between hello and world, total 3 lines in text layout. In v8 empty line will be ignored and instead of 3 lines "hello", "", "world" there will be "hello", "world")
• Antialiassing looks not as good as . I don't know why exactly, but there are several signs that indicate this:
  • Scaled text (x8) in shrinked parent (x1/8), changes it's aperance (bold soft <-> thin harsh)
  • Edges of sloped italic letter, has visible staircases
  • Small latters (scaled down) looks too aliased

I shoot couple videos that demonstrates how text looks in v7.1.0 and v8(pr-branch), showing most of this issues hope that will help to track down those problems more easily:

• v8: https://github.com/pixijs/pixijs/assets/66637406/9a43d83a-bd76-4b45-bf94-2c70ab23a615
• v7: https://github.com/pixijs/pixijs/assets/66637406/547c50aa-ae3d-4dd7-adec-b43bedd81b29

[jakerdy]

Regarding antialiassing, I've checked my screens from this issue:

Problem	v7	v8
AA on big

Specific points of interest (tints are good now, but AA is the same as here):

As you can see, V8 has way narrower AA. There something wrong with coverage evaluation. Maybe you should rise alpha to power of 2.2, so that alpha went into linear color space, or something like that.

I already changed msdf text rendering in v7, it also was maked as "migrate to v8" but, I think it would be separate problem on it's own: #9261
Anyway, at first AA should be fixed, then you could try to make alpha behave like coverage, as described in my PR. Then V8 text will match with V7 implementation :)

[GoodBoyDigital]

thanks for sharing more info - is there a way we could make a playground / repo to demonstrate pls? This will make it a load easier for me to address correctly.

[GoodBoyDigital]

will add in the #9261 - that should be straight forward at least! :D

[GoodBoyDigital]

FWI me and the team have been admiring the thoroughness of you Issues! such a great level of detail - I wish they were all like this! 😅

[jakerdy]

Ok, will try later tooday to make a usable example

[jakerdy]

Making good examples, takes qute a bit of time... But, there it is:

https://github.com/jakerdy/pixi-msdf-examples

I've recreated all described problems, in side-by-side app, so that you could check it in V7 and V8 at the same time. Also there some controls that should help uderstand it "in motion".

[GoodBoyDigital]

this is GREAT! leave it with me, il get it fixed up..

[GoodBoyDigital]

yoo! pushed up a couple of tweaks - everything sorted apart from the empty lines being skipped. Might do that as another PR as its not really and MSDF thing - but a BitmapText thing iyswim?

Anyhoo - you example made it very easy to address the issues. Appreciate the effort! Thanks

[bigtimebuddy]

@jakerdy just wanted to say that this is an exceptional issue. The detail you put into this should be the gold standard for issues. Really amazing, we appreciate the effort!

[jakerdy]

Pixi saved me endless amount of time, and made it possible to create very performant graph view for my app. So it is in my interests to make sure that the Pixi is doing well.

Thank you for kind words, Pixi is a great project!