Bevel effect in HLSL

Question

I'm trying to make a photoshop-like Bevel effect in HLSL.
The hard part is finding the distance of a point from the closest edge (where alpha=0)
Anyone have any ideas how to do this ?

Best,
SW

Do you want to do this effect on a triangular mesh or on a fragment of some 2D picture? — miloszmaki, May 16 '12 at 19:01
I have 2D textures with Alpha, and I'm rendering them fully on a quad. — Shachar Weis, May 16 '12 at 19:15
Then the only way to do this in HLSL is to sample alpha values around each pixel to a fixed distance (probably bevel radius). That may be too inefficient, though (unless the radius is small). — miloszmaki, May 16 '12 at 19:18
Are alpha values coherent? I mean: do they form some shapes with edges or are they random? — miloszmaki, May 16 '12 at 19:27
The alpha shape is smooth, but it can be anything. Circular, rectangular or octopus shaped. — Shachar Weis, May 16 '12 at 19:32

score 3 · Answer 1 · answered May 17 '12 at 14:20

3

It took a while but I worked out a solution. The proper way to do this is by using multi-pass filters. The first pass a shader blurs the image horizontally, the second pass vertically, and the third pass renders the bevel by using the gradients in the alpha channel that was generated by the first two passes.

answered May 17 '12 at 14:20

Shachar Weis

936
2
20
44

If you feel that this is indeed the correct answer, you can accept it even thought it is your answer. :) – Sean Duggan Nov 28 '16 at 19:52

score 0 · Answer 2 · answered May 16 '12 at 19:38

You can try a sampling-based approach. In pixel shader (for each pixel) you need to sample the pixels in a circle with radius equal to the bevel radius. If the current pixel is lit (alpha=1) then you can take the minimum distance to unlit samples (alpha=0) and calculate a fading factor: factor = min_dist / bevel_radius. Then you can calculate some gradient color based on this factor.

Bevel effect in HLSL

2 Answers2