Distance Field Generation Demo
Suppose we have a vector shape such as
here I am using a simple rhombus for simplicity. The rhombus has four line segments
So in order to generate distance field we calculate the distance of a point to the nearest edage of the shape.
And we do this for each pixel in the image and the radius of the circle is used as the distance field value for each pixel.
Here is the actual distance field generated using msdfgen
Original on left. Generated on right
The only problem with this method is that they produce round corners while rendering. Here is an image showing this issue.
So in order to solve this Chlumsky suggested to use multiple color channel and divide the shape into multiple shapes.
He has a detailed description on how this works in his paper which can also be found on his github page.