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.
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.
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)?