IconMSDF Class
To enable the vector-like rendering of icons, Telerik XR CanvasUI provides the IconMSDF class. This class renders its Icon texture property with the multi-channel signed distance field algorithm ensuring sharp edges of the drawing no matter how close the user looks at it in an XR application. This approach works with monochrome icons only.
Icons Creation
The IconMSDF component supports a multi-channel signed distance field generated by the msdfgen tool. The msdfgen repository has information on how to download and use the command-line tool.
The example below shows how to generate 3 png icons from the free version of Font Awesome's Desktop SVG files, using the following commands:
msdfgen.exe mtsdf -svg cog.svg -o cog.png -size 32 32 -pxrange 8 -autoframe -printmetrics
msdfgen.exe mtsdf -svg search.svg -o search.png -size 32 32 -pxrange 8 -autoframe -printmetrics
msdfgen.exe mtsdf -svg bars.svg -o bars.png -size 32 32 -pxrange 8 -autoframe -printmetrics
Once the images are generated, always use lossless compression to avoid artifacts.
For reference, the icons used in the XR CanvasUI demo scenes use RGBA32 bit format. If you want to use this format to compress the textures:
Select the newly generated SDF icons in Unity.
Go to the Inspector and scroll to the bottom.
Under Format, select
RGBA 32 bit.
Adding Icon in the Scene
To use the generated SDF icons with an IconMSDF component:
Create a new empty game object in a Canvas.
Add the
IconMSDFcomponent.Assign the SDF icon texture to the
Iconproperty.
Predefined Icons
In the Textures\Icons\kendo-font-icons-msdf subfolder of Telerik XR CanvasUI, you will find a list of predefined icons. These MSDF textures are used by the Telerik MSDF UI Controls and are extracted from the kendo-font-icons.ttf file by using the msdfgen tool. To find the commands for extracting specific icons from the font file, you may look at the generate-png-from-font.txt file. Renaming its extension to bat file would allow you to execute the commands and recreate the icons.