Vector graphics on GPU

Summary

Vector graphics on GPU Despite vector graphics being used in every computer with a screen connected to it, rendering of vector shapes and text is still mostly a task for the CPU. This is wrong and needs to be changed. Here I describe a general approach to rasterization and how we can ask for help from GPU when rendering vector paths. Basic rasterization operation. First, let's overview a general principle of rasterization of vector shapes. Here is an image with a clockwise circle in it and I'll demonstrate a very rudimentary algorithm for drawing one row of pixels of that image. For simplicity reasons, anti-aliasing will not be included at this time. For each pixel in this row we only need to know if its center is inside of this shape or outside. Outside pixels are left untouched while inside pixels are filled with color of that shape. We start with a winding number set to zero. Winding number is an integer which indicates whether the pixel center is inside or outside of shape. Next imagine a horizontal ray being cast through centers of all pixels in this pixel row. Ray goes from infinity on the left side to infinity on the right side. Every time an intersection with an upward segment is found, the winding number is increased by 1. When an intersection is found with a downward segment, the winding number is decreased by 1. As we go from one pixel to another, left to right, if the current winding number at the center of each pixel is zero, the pixel is not visible. If it is something else, the pixel is filled according to the fill rule. For example, for the non-zero fill rule, all pixels with a winding number other than zero are filled with color. In this picture the circle is drawn clockwise, but if it was drawn counterclockwise, the intersection on the left would result in the winding number decreasing by 1 instead of increasing it. Now, pixel centers between both intersections have winding numbers of -1, but according to the non-zero winding rule, they are filled ...