Bevel outline algorithm in 2D

Question

I'm writing a program that creates animated blobs in 2D, to simulate cells. In order to beautify these objects, I'd like to give them a 3D look by adding a bevel-effect. How can this be achieved?

Program as it looks now (the blobs are animated, move, change shape etc):

And this could be a potential desired outcome:

I underscore that I'm not using anything else than GDI+, so I'll have to write the implementation myself. Virtually every graphics program has some kind of beveling filter, but I've looked high and low online to find examples of such code.

Edit:

I was testing a few theories, and this one could work. However, it's not my most optimal solution (even though Gaussian blurs can be made linear using separable kernels) and I have another in the working. Anyway, this could be a first attempt at a fast beveling algorithm:

The result in the picture I created above is the direct outcome of the steps of the algorithm, but I suspect it might run too slow for 25fps.

Answer 1

What shapes are you using? If your shapes are convex (like circles, squares, rounded rectangles), you can just draw versions of different size and clip them to a triangle whose diagonal goes from upper right to lower left.

I.e., zoomed in, light-to-dark:

and dark-to-light:

Then clip that:

And then combine the two bezels:

and finally draw the original shape on top:

Now this example is rough and too coarse, but if each of the three rounded rectangles only is visible as a one pixel outline, this will look like a gradient from light to dark in the upper left, and in the opposite direction in the lower right.

Note that in this example the colors are too different, so you can see the various parts. Basically you should take the inner shape's color (in this case white) and lighten it 3 times for the transition to upper left, and darken it for the transition to lower right. The final effect you're going for (again, zoomed in) is something like:

In theory you could just use one larger shape, clip it, and fill it with a gradient, for each half, but it's quite difficult to get the gradients to line up properly for non-square shapes. Also, this doesn't work for concave shapes (like the letter "C"). The trick to a good bezel is a good algorithm for generating that larger version of your shape. But not scaled up. Ideally, you'd just "outset" the shape, which will change its proportions. If you're generating the shapes yourself, as pixels, just draw each pixel as 9 pixels and you have the perfect 1-pixel-outset for the next-larger shape in the algorithm in my answer.

Update: Another approach would be to first render your shape into a bitmap, and then loop over the pixels. If you find a pixel that is "on", check its surrounding pixels. If it has empty pixels below it or to its right, darken it. If it has empty pixels to its left or above it, lighten it. That would give a proper 1px bezel that lies inside the shape. You could then repeatedly apply this algorithm by mixing the light/dark colors with a percentage of your shape's color, and by looking for pixels you darkened/lightened in the previous iteration instead of transparent pixels. This is probably something that wouldn't be too fast until you manage to implement it e.g. as a shader on the graphics card.

Answer 2

You could get a bevel effect by underlaying the cells with upscaled graduated transparencies of themselves. This can also be used to get a glow effect.