Box Blur for Bevels, Shadows, and Other Effects

In my last post, I presented the beginnings of the software-based rasterization library I'm building for dynamically rendering the jigsaw puzzle pieces for my upcoming puzzle game. Today I'm showcasing how a simple box blur applied to an alpha mask can achieve a pretty decent-looking bevel effect.

Latest C++ Milestone - Box Blur and Image Compositing of a Bevel Effect

What you're seeing above is the full progression of effects and image compositing performed to get to a final puzzle piece. A simple box blur algorithm unlocks all sorts of basic effects: bevels, chamfers, shadows, and glows.

The top row shows the color images:

• The full puzzle piece shape with a cardboard backing image (generated via ChatGPT).
• A slightly smaller puzzle piece shape with the photo. I used a pixel erosion algorithm to deflate the alpha mask before drawing it with the photo image.
• The photo is drawn over top of the cardboard backing.
• A bevel effect is applied to the cardboard backing, before the photo is drawn over top of it.

And the bottom row shows the alpha masks:

• The full puzzle piece shape as an alpha mask, after anti-aliasing was applied.
• A box blur algorithm applied to the full alpha mask.
• An "outer" edge band is extracted by subtracting the full alpha mask and blurred alpha mask. I'll be using this in the future to create a shadow effect.
• An "inner" edge band is extracted by subtracting in the other direction. This is what's used to achieve the bevel effect, by compositing a solid black color with this inner edge band alpha mask over top of the cardboard backing.

The Work is Ongoing!

I think it already looks pretty good. But I'll be tinkering a little more by applying simple unary functions to the edge band alpha masks (such as a smoothstep).

I also want to try out different backing images, like other cardboard textures, wood texture, plastic textures, and so forth. I'm tinkering with the idea that I could tailor the look of each puzzle, based on themes. Most puzzles will use a traditional cardboard texture backing, but I might swap it with wood to evoke a frontier-era feel, or plastic for photos of playgrounds, and so forth.