Gray backgroud when rendering small fonts

[Altren]

I'm trying to render small glyphs using "default" shader and high resolution msdf texture. I understand, that quality should be worse than native freetype font and a bit blurry, but I don't understand where this gray rectangles comes from? Whole rectangle is gray.

To make it more visible I also rendered huge 2048*2048 texture atlas (32 to 126 characters are there) and applied it for bigger fonts.

Minor downscale and upscale to any size work properly.

[Chlumsky]

Because there is not enough data for the "default" anti-aliasing.

For example, if the distance -2 is represented by a black pixel (0) and the distance +2 is represented by a white pixel (255), at 100% scale, the anti-aliasing interpolates between -0.5 and +0.5, represented by something like 96 to 160, so everything's fine. However, at 1/8 scale, in one pixel, the distance changes by 8, so for anti-aliasing, we need to interpolate the distance from -4 to +4, but this is outside the range represented by the distance field. -4 would correspond to -128 and +4 to 384. In other words, the shader needs pixels to have the value -128 or less in order to treat it as a fully outside value, however it will always find at least 0. Anything above -128 (including 0) is treated as being so close to the edge that it's part of the anti-aliased transition from outside of the glyph to inside.

How to fix it?

• a) increase -range/-pxrange
• b) use a different anti-aliasing method for downscaling, e.g. based on supersampling
• c) detect texel value 0 in the shader and treat it as a special case - this probably won't look any good though
• d) use a floating-point texture

Also make sure you don't use mipmaps for the SDF.