Rendering 2D vector graphics on the GPU is a notoriously vexing problem. The most popular publicly available methods are either slow (stencil and cover) or highly memory intensive (cached prerendered buffers, e.g. most SVG renderers). In truth none of this is necessary; rendering vector graphics on the GPU is not hard if you use, as the saying goes, this one neat trick.

Look at this grid. Each cell stores a list of the curve segments that intersect it. Cells also keep track of whether the center is inside (orange dots) or outside (blue dots) the polygon.

This is all the information we need to render a polygon on the GPU. We can render each cell with a quad: pack each cell’s curve segments and inside/outside state into a texture (or even vertex attributes), and in the fragment shader do your choice of inside/outside tests for whichever curve type you are using for all of the segments in that cell, xor’ing the result with the cell’s inside/outside state.

For something so shockingly simple there is no published research for this. All the prior research I could find was significantly more complicated. The only exception is an enterprising YouTuber who invented a method equivalent to this for rendering fonts. This is not an accident, as far as I can tell vector graphics rendering is treated as a trade secret by most companies that develop it successfully and is not even patented.

Spatial Trees

Now imagine we generate the grid cells with a spatial tree instead of a simple grid (it can be a kd-tree, a quadtree, etc):

This will render pretty much anything.

The Details

Choice of Curves

The most important detail is the choice of curve type:

• Straight lines. The most simplest type.
• Quadratic Bezier curves:
  • Pro: Simple enough to do inside/outside tests inside the fragment shader with reasonably simple code.
  • Con: Has some approximation error.
• Cubic Bezier curves:
  • Pro: Can exactly represent lines, quadratic beziers and reasonably approximate circular arcs.
  • Con: Math is notoriously complex; curves must be preprocessed and final fragment shader code is more complicated.
• Circular Arcs:
  • Pro: can represent lines and circles
  • Con: Does not approximate other curve types well (the curvature function has steps).

I prefer quadratic Beziers for their simplicity, with a specialized implementation for linear polygons with straight lines.

Anti-Aliasing

For anti-aliasing we must replace our simple inside/outside test with a signed closest point to segment test. This is fairly trivial for lines and quadratic Beziers but not at all for cubics.

In order to prevent artifacts when zooming out each cell will need to include edges inside some radius surrounding the cell (anti-aliasing is equivalent to a filter kernel with a variable radius depending on the zoom level). While in principle this could be fairly complicated, in practice a single fixed world-space offset seems to suffice. A more robust approach might be to build a “mipmap” of spatial trees with multiple world-space offsets but this doesn’t seem to be necassary.