View source for Tutorial:MSDF rendering

<languages />

[[File:MSDF rendering example.webp|thumb|An example of MSDF rendering in Resonite. Look at how crisp those edges are for only a 128x128 image!]]

<translate>
[https://dspace.cvut.cz/bitstream/handle/10467/62770/F8-DP-2015-Chlumsky-Viktor-thesis.pdf 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 [https://en.wikipedia.org/wiki/SVG SVG] support nor a high-resolution texture.
</translate>

<translate>
To render MSDFs in Resonite, one can use the [[Component:TextUnlitMaterial|TextUnlitMaterial]] or [[Component:UI_TextUnlitMaterial|UI_TextUnlitMaterial]] materials like any other matrial on a [[Component:MeshRenderer|MeshRenderer]]. The MSDF can be placed in the <code>FontAtlas</code> field of the material. <code>TintColor</code> is used to color the actual object the MSDF represents, while <code>BackgroundColor</code> can be used to color the background of the MSDF, so long as <code>AutoBackgroundColor</code> is unchecked. <code>OutlineColor</code> can be used to give an outline color to the object. <code>FaceDilate</code> dilates the boundary of the MSDF, <code>OutlineThickness</code> controls the thickness of the outline, and <code>FaceSoftness</code> controls how soft the object looks.
</translate>

== <translate>Generating MSDFs</translate> ==

<translate>
MSDFs can be created with [https://github.com/Chlumsky/msdfgen the reference implementation of the format]. This is a command line program.
</translate>

<translate>
For most purposes, the following command should generate a good MSDF from an SVG for rendering:
</translate>

 msdfgen -svg input.svg -dimensions 128 128 -autoframe

<translate>
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 [https://inkscape.org/ Inkscape] to combine multiple paths into one.
</translate>

<translate>
If you find yourself needing a higher quality MSDF (for more complicated shapes), change the <code>dimensions</code> 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!
</translate>