I’ve taken a break from working on the confusing world of dynamic tessellation to work on the slightly less confusing world of fill modes. While the screenshots I’ve been posting should make it obvious that I already have filling working, it is still mostly prototype code, and therefore is filled with holes, hacks, and fun glitches like this:

We’ll go into how I fixed that in my next post. I want to spend this post talking about how I got fill modes to work in the first place.

Anyone who has done any work in OpenGL will tell you that creating gradient filled shapes is a trivial task. All the programmer has to do is assign colours to each vertex in a triangle and OpenGL will do all the magic colour interpolation for you. Unfortunately, this isn’t good enough for Bezzy. If we can only colour on a per-vertex basis, what happens when a gradient fill is applied to a path where the colour changes between vertices?

For example, let’s say we have a rectangle filled with a red-green-blue linear gradient fill. The rectangle has four vertices, one at every corner. We can colour those vertices red or blue, but since there are no vertices in the middle of the rectangle, we can’t colour anything green.

The obvious solution is to use pixel shaders to do the filling. Bezzy is targeted at computers with fixed-pipeline graphics cards, so I didn’t even consider that solution. Instead, I used a magic little videocard feature called the stencil buffer.

The stencil buffer is a buffer (duh!) on the GPU similar to the depth buffer. However, instead of storing depth data, it stores whatever data you’d like by drawing geometry to the buffer using a set of rules. Then, when drawing to the colour buffer (the screen) you can run “stencil tests” on the subsequent drawing operations. Stencil tests determine whether or not a pixel will be drawn by examining the value at the same pixel-position on the stencil buffer. Think of all this as an elaborate form of masking.

Using the stencil buffer, I came up with the following algorithm to render a linear or radial filled path:

1. Render the filled path to the stencil buffer using a certain value. Let’s say the value is “1″ in this example.

2. Set OpenGL to render to the colour buffer using a stencil rule that states, “only draw if the stencil buffer value of this pixel equals to 1″.

3. Render some simple geometry representing the fill to the colour buffer. For a linear fill, draw a gradient coloured quad, and for a radial fill draw a gradient coloured circle. This geometry will definitely fall out of the bounds of the shape, but the stencil test will ensure that the only pixels within the path are actually drawn.

I hope that made sense. If not, here’s a diagram that might help.