Creating Multichannel Signed Distance Field (MSDF) starting from an SVG file.
This app is an electron app wrapper around msdfgen cli.
Demo: https://x.com/luruke/status/1570099999278600194
npm install
npm run make_host
If you have error (corrupted file) opening the mac osx app try this code in your terminal**
xattr -cr /path/to/application.app
MSDF textures are particularly effective for single-channel masks (commonly used for masking, icons, etc.). They provide superior quality at much smaller sizes compared to traditional image formats. For instance, a 64px MSDF texture can deliver better visual results than a 1024px black and white PNG, resulting in significantly reduced memory usage while maintaining crisp, high-quality rendering.
glsl usage
float msdf(sampler2D tMap, vec2 uv) {
vec3 tex = texture2D(tMap, uv).rgb;
// If you have small artifacts, try to tweak the 0.5 value.
float signedDist = max(min(tex.r, tex.g), min(max(tex.r, tex.g), tex.b)) - 0.5;
float d = fwidth(signedDist);
float alpha = smoothstep(-d, d, signedDist);
return alpha;
}
float value = msdf(tex, vUv); All options
➜ svg2msdf git:(master) ./src/msdfgen/darwin/msdfgen.osx -help
Multi-channel signed distance field generator by Viktor Chlumsky v1.5
---------------------------------------------------------------------
Usage: msdfgen <mode> <input specification> <options>
MODES
sdf - Generate conventional monochrome signed distance field.
psdf - Generate monochrome signed pseudo-distance field.
msdf - Generate multi-channel signed distance field. This is used by default if no mode is specified.
metrics - Report shape metrics only.
INPUT SPECIFICATION
-defineshape <definition>
Defines input shape using the ad-hoc text definition.
-font <filename.ttf> <character code>
Loads a single glyph from the specified font file. Format of character code is '?', 63 or 0x3F.
-shapedesc <filename.txt>
Loads text shape description from a file.
-stdin
Reads text shape description from the standard input.
-svg <filename.svg>
Loads the last vector path found in the specified SVG file.
OPTIONS
-angle <angle>
Specifies the minimum angle between adjacent edges to be considered a corner. Append D for degrees.
-ascale <x scale> <y scale>
Sets the scale used to convert shape units to pixels asymmetrically.
-autoframe
Automatically scales (unless specified) and translates the shape to fit.
-edgecolors <sequence>
Overrides automatic edge coloring with the specified color sequence.
-errorcorrection <threshold>
Changes the threshold used to detect and correct potential artifacts. 0 disables error correction.
-exportshape <filename.txt>
Saves the shape description into a text file that can be edited and loaded using -shapedesc.
-format <png / bmp / text / textfloat / bin / binfloat / binfloatbe>
Specifies the output format of the distance field. Otherwise it is chosen based on output file extension.
-help
Displays this help.
-keeporder
Disables the detection of shape orientation and keeps it as is.
-legacy
Uses the original (legacy) distance field algorithms.
-o <filename>
Sets the output file name. The default value is "output.png".
-printmetrics
Prints relevant metrics of the shape to the standard output.
-pxrange <range>
Sets the width of the range between the lowest and highest signed distance in pixels.
-range <range>
Sets the width of the range between the lowest and highest signed distance in shape units.
-scale <scale>
Sets the scale used to convert shape units to pixels.
-size <width> <height>
Sets the dimensions of the output image.
-stdout
Prints the output instead of storing it in a file. Only text formats are supported.
-testrender <filename.png> <width> <height>
Renders an image preview using the generated distance field and saves it as a PNG file.
-testrendermulti <filename.png> <width> <height>
Renders an image preview without flattening the color channels.
-tolerance <tolerance> (Default: 0.01)
Tolerance when checking for point equality. Helps avoid artifacts in noisy/inaccurate input shapes.
-translate <x> <y>
Sets the translation of the shape in shape units.
-reverseorder
Disables the detection of shape orientation and reverses the order of its vertices.
-seed <n>
Sets the random seed for edge coloring heuristic.
-yflip
Inverts the Y axis in the output distance field. The default order is bottom to top.