Reinventing Feathering for the Vectorian Era

Summary

This post from Rive's Head of Runtime Chris Dalton shows how we built a fully vector-based feathering system from scratch. It’s a deep dive into the Rive Renderer, why it’s more performant, and how it solves a problem that legacy specs never could.March, 2024. GDC. I was talking to a colleague when Sarah Warn, our VP of Growth, came over and asked, “Hey, could you please do glows and shadows?” She wasn’t asking on a whim. Designers had been requesting this for a while. She knew that if we shipped it, it would be huge. Our CEO, Guido Rosso, had been pushing for this since my first day. Rive CTO Luigi Rosso, his twin brother, used to joke that the second the Rive Renderer shipped, our first priority had to be glows and shadows, or Guido would start flipping tables. (╯°□°)╯︵ ┻━┻It was always in the back of my mind. But I also knew I didn’t want to take the typical approach. Why Gaussian wasn’t an optionThe default way to handle glows and shadows in design software is a Gaussian blur, but that method has a massive flaw. You have to use an image convolution filter, which is computationally expensive. Here’s what happens under the hood with traditional blurs:The vector shape is rasterized into a bitmap.A convolution filter is applied across the pixels to simulate a soft edge.The result is a glow or shadow that looks beautiful but is computationally expensive, non-scalable, and no longer a true vector.And here’s the bigger kicker: Gaussian blur wasn’t even designed for soft edges. Carl Gauss, the 19th-century mathematician behind the Gaussian function, wasn’t thinking about soft shadows or glowing effects. He was interested in probability distributions and smoothing noisy data. When Gaussian blur made its way into image processing a few centuries later, people discovered it could be used for finding edges. By smoothing out fine details in an image, a Gaussian blur helps algorithms detect where one object ends and another begins. In fact, many edge detection techniques, lik...