WebGL rect glyph with hatch pattern #11159
Hatch patterns could be implemented as textures, but the results will be lower quality and the code more complicated than using distance functions.
Lower quality because texture interpolation is bilinear, so essentially cartesian. This is fine for axis-aligned patterns, but for curved ones like dot, ring and spiral the cartesian interpolation does not correctly determine the distance from the curve whereas distance functions do. So the texture solution will effectively have different antialiasing width as you move around the curve.
More complicated because you cannot just have a single texture per hatch pattern as we allow the hatch scale and weight to be changed independently. A texture for a particular hatch scale and weight can be reused for other scales but only if the scale-to-weight ratio is the same. To support all possible scale and weight combinations we'd have to create textures on the fly as they are required. To create the patterns here we'd have to draw on the textures which could be done using canvas but of course I would do so using webgl and the very same distance functions already written here!
The distance functions give very accurate results and are very simple; the most complicated ones are only 7 lines of code in the fragment shader.