Multi-channel signed distance fields are how Resonite conventionally renders text. They are essentially a big lookup table of how far away a sampled point must be to be a part of some 2d object. When combined with normal image interpolation, this can result in vector-like graphics without the need for something like SVG support nor a high-resolution texture.
To render MSDFs in Resonite, one can use the TextUnlitMaterial or UI_TextUnlitMaterial materials like any other material on a MeshRenderer. The MSDF can be placed in the FontAtlas field of the material. TintColor is used to color the actual object the MSDF represents, while BackgroundColor can be used to color the background of the MSDF, so long as AutoBackgroundColor is unchecked. OutlineColor can be used to give an outline color to the object. FaceDilate dilates the boundary of the MSDF, OutlineThickness controls the thickness of the outline, and FaceSoftness controls how soft the object looks.
Generating MSDFs
MSDFs can be created with the reference implementation of the format. This is a command line program.
For most purposes, the following command should generate a good MSDF from an SVG for rendering:
msdfgen -svg input.svg -dimensions 128 128 -autoframe
The SVG must contain only one path that defines the object. The program will warn you if there is more than one path in the SVG. You can use a program like Inkscape to combine multiple paths into one.
If you find yourself needing a higher quality MSDF (for more complicated shapes), change the dimensions to 256, 512, whatever you need. If you find that 64 or even smaller works just as well for your shape, by all means, try to optimize!
Best practices
For best results after importing the MSDF image, it is recommended to:
- Set
PreferredProfiletoLinear - Set
FilterModetoAnisotropic - Set either
UncompressedorDirectLoadto true.