How to render a bevel effect with SDL2 Texture?

Question

I develop 2D games using CodeBlocks (C++) with SDL2.

I can load a texture (ex. a gray square) and render it to the screen. All is fine. If I want to change the color of the square? Yes, I can do it. I can rotate too, without an issue.

But here's what I'd like to know:

I'd like to render the square border with a bevel effect. This is for displaying icons on the screen: I'd like to avoid having to load 2 images, one for the icon picture (with a transparent background) and one for the bevel; I'd like to add the bevel effect on some parts, dynamically in the program.

How can I do it?

Answer 1

One way to do this is to generate a signed distance of each pixel from the edge. You can then use the distance as a height. You can clamp the heights to a maximum which will give you a flat area in the middle. Valve Software published a paper that shows a clever way of generating the signed distance field using small textures, and it might work for you also.

Answer 2

Do you write your own shaders for your game? If so, your fragment shader can just modify the texel from your image, based on which edge it is closest to, and how close that is.

Here's a sample I wrote in shadertoy that does just this.

It just scales up or down the RGBA based on the edge identified as closest.

Doing it in a shader saves you from having to composite your image with a bevelling overlay.