Generating SDF (Signed Distance Fields) in Unity

I’ve built a package for generating distance fields from texture masks in Unity. It works in several modes:

A) Append “+sdff” to the end of a filename to generate an SDF from its alpha mask. Use “+sdff4” if you pack mask data into all 4 channels (RGBA). Drop the second ‘f’ to stop the importer from overwriting format settings. The SDF is generated from the source texture file, the intention is to have large mask textures and use “Max Size” to reduce the texture size after importing as an SDF.

B) Or use an SDF Generator asset, which will give you some more options. Right-click in your project window, select Create->2D->SDF Generator, then drag a texture into the “Targets” list, then hit “Generate”. The SDF variants will be created in the same folder as the source assets (with “.sdf” appended to their names).

Package can be downloaded from here (free) http://weesals.com/Releases/Unity/Packages/SDFGenerator.unitypackage.

Its using JFA (Jump Flood Algorithm) which is not completely accurate, but covers almost all cases and can generate almost instantly. There’s a decent visualisation for how the algorithm works here.

Q) “My SDF textures look noisy”
A) Make sure you are not using texture compression.

Q) “These textures are too big”
A) Use “Max Size” to reduce the size.

Q) “The textures look too blurry”
A) You’ll need to use an SDF-aware shader (or just enable alpha clipping). A shader is included with some Text Mesh Pro -like functionality under “Shaders/Sprites/SDFDisplay” and a material you can use for sprites is included named “Default SDF Material”.

Q) “The texture edges are aliased”
A) Switch to a shader that supports SDFs. If you already are, try adjusting the “Gradient Size” when generating your SDF, or the “Gradient Scale” in the SDFDisplay material to tweak the sharpness.

Q) “Drop shadows are being cut off”
A) You’ll need to implement your own SpriteRenderer / Image component which inflates the quad used to render your sprite, so there is space for the full shadow.

Q) “My texture has become grayscale”
A) Remove the second ‘f’ from the filename, so that it is just “+sdf”, and then change the Texture Format to “RGBA 32 bit” in the asset import settings (or Automatic if you can put up with some compression artifacts)