Text Element Outline Blur Issue

Hey, I am trying to set the outline color of the text element but its edges seems unsharp and a bit blurry.
This is how it looks like when i set the color from code. You can see specially in 4 the outline is a bit blurry and unsharp.

The quality of the outline i want is

Any idea how can i achieve that?

Hello @saif , try changing the font intensity it might help.

Screenshot 2020-10-26 at 10.18.43 PM

0.13 Intensity:
Screenshot 2020-10-26 at 10.18.55 PM

You might also wanna reduce the outline thickness


Have tried both the things but this color merging issue never gets resolved.

Hey @ray, do you think this is just a limitation of the SDF approach? Would a higher resolution atlas mitigate the problem? Your thoughts on this would be great.

1 Like

It is indeed a limitation of the MSDF technique - which is mentioned by the creator of the technique in this issue: https://github.com/Chlumsky/msdfgen/issues/67:

Keep in mind that this is an approximate rendering method, and it is designed to be most precise at glyph edges. The further away from an edge, the higher the probability that the distance is not evaluated precisely, resulting in an artifact such as this one. This may be mitigated by increasing the distance field density.

From my investigations when implementing this PR: https://github.com/playcanvas/engine/pull/1925, each of the 3 SDF channel’s distances outside of the glpyh will ‘clash’ with distances from non-adjacent edges also using the same channel - this means reading distances further away from glyph edges can result in getting incorrect distances from the other (non-adjacent) edges in the channel. Increasing resolution doesn’t actually help - increasing channel count could reduce clashes - but would not entirely eliminate the problem.

The workaround I used for thicker outlines (in the linked PR) was to generate an additional standard SDF in the alpha channel - this does result in less sharp angles in the outlines - but you don’t get artifacts. Perhaps what would work in this case would be to use the extra channel workaround - but not allow thicker outlines because this uses multiple passes (which is expensive)?

1 Like