Shadow shader for buttons

Windows
1

I am currently updating a game and I want to add a little bit of depth to the UI. I am not very good at graphics so I thought I will just add shadows to the buttons. It currently looks like this and I am happy about how it turned out.
first I draw the UI to a rendertarget: pic0
then I draw the UI stuff thats on top of it to another rendertarget: pic1
then I draw the shadowmap from the first UI layer to my shadow rendertarget
then I add the shadowmap from the second UI layer ontop of the shadow rendertarget: pic2
and then I draw the background and all the layers to the screen.

This is what my shader currently looks like:

float4 color = float4(0,0,0,0);

//don´t draw shadow if there is stuff over it
if(tex2D(s0, coords).a != 0)
    return float4(0,0,0,0);
    
for (int i = 0; i < 15; i++) {
    if(i + 1 > depth)
        break;
             
    //draw the shadow
    //move up+left
    if (tex2D(s0, coords - float2(pixelSizeX, pixelSizeY) * (i + 1)).a != 0 ||
            (tex2D(s0, coords - float2(pixelSizeX, pixelSizeY) * (i + 1) + float2(pixelSizeX, 0)).a != 0 && 
             tex2D(s0, coords - float2(pixelSizeX, pixelSizeY) * (i + 1) + float2(0, pixelSizeY)).a != 0))
            return float4(0, 0, 0, 1.0 / depth * 0.5 * (depth - i));
}

return color;

My question is if this looks like a good idea. The compiler thinks that the for-loop isn´t a good idea but I don´t know how to do it different.

2

For with branching (also three texture taps in condition - which means 45 texture taps in loop + 1 outside) for effect like this is overkill. I mean there are considerably better options (more info is required to list best ones but - Bake shadow into assets / Do classic two pass blur on RT to get shadows). That being said I don´t think performance will be issue in your game thus it doesnt matter, but as a “good practice” this isn´t good way at all.

Also

if(tex2D(s0, coords).a != 0)
    return float4(0,0,0,0);

should look like

float texSample = tex2D(s0, coords).a;
clip( texSample >  0.0f ? -1:1 );
3

If you just want simple shadow, do a two passes on spritebatch.Draw() calls, one with the “shadow” (either a black or very dark rectangle, or the texture tinted with black/dark colour) shifted a bit on x/y, then your actual UI draw.

No shaders involved, not very slow, simple, easy to tweak.
The shadow can even move (using an origin know point, moving it will make the light source moving effect) to achieve for example a day-night cycle, sunset/sunrise or whatever.

4

But doing something with blur would be even more expensive. I would need more renderTargets and I would also need alot of texture taps. The for-loop in my example breaks after 5 and 3 loops (depends how wide the shadow should be drawn). Doesn´t this mean better preformance than going through all 15 loops?

5

Redrawing the UI in a diverent color wouldn´t give me the ability to let the shadow fade away. So this wouldn´t be an option for me.