<p>I'm using 2d signed distance fields in my current project for drawing shapes (example: <a href="https://www.shadertoy.com/view/4llXD7" rel="nofollow noreferrer">https://www.shadertoy.com/view/4llXD7</a>) and I want to add drop shadows to them. At first I thought I could exploit the sdfs distance property to achieve good enough looking drop shadows, but I found that in many cases this left undesirable results in the interior of the shapes where there is often a darker 'x' in center.</p>
<p>I found this shadertoy <a href="https://www.shadertoy.com/view/tdSGDc" rel="nofollow noreferrer">https://www.shadertoy.com/view/tdSGDc</a> which is produces exactly what I am looking for in terms of quality and performance, but I can't seem to figure out how I would combine this 1d box blur effect with arbitrary sdf shapes to achieve a nice looking drop shadow. Is there a way I can combine these two techniques to get great looking shadows?</p>

CC BY-SA 4.0
2020-08-16T18:21:41.767Z
Hi. Please consider editing more information into your question so that it can be understood without he links which might expire some day.
wychmaster
CC BY-SA 4.0
2021-05-01T12:02:14.050Z
I had a similar issue: Wasn't able to fully solve this cause there is a max blur state I reach for some reason, but at least the x is gone: https://github.com/Haeri/ElementalDraw/blob/master/data/shader/gl/rounded_rect.frag
This is how it looks:
https://github.com/Haeri/ElementalDraw/tree/master/examples/overview
Haeri
CC BY-SA 4.0
2021-05-02T13:23:43.483Z
Thanks Haeri I'll take a look, I've actually stumbled across your project before, cool stuff!
weichsem
<glsl><2d><unity><signed-distance-field>
Combine box shadow with a signed distance field
weichsem
# Combine box shadow with a signed distance field

(Asked by: username_0 on 2020-08-16)

I'm using 2d signed distance fields in my current project for drawing shapes (example: <https://www.shadertoy.com/view/4llXD7>) and I want to add drop shadows to them. At first I thought I could exploit the sdfs distance property to achieve good enough looking drop shadows, but I found that in many cases this left undesirable results in the interior of the shapes where there is often a darker 'x' in center.

I found this shadertoy <https://www.shadertoy.com/view/tdSGDc> which is produces exactly what I am looking for in terms of quality and performance, but I can't seem to figure out how I would combine this 1d box blur effect with arbitrary sdf shapes to achieve a nice looking drop shadow. Is there a way I can combine these two techniques to get great looking shadows?

**Tags:** glsl, 2d, unity, signed-distance-field

> **Comments:**
> **username_1**: Hi. Please consider editing more information into your question so that it can be understood without he links which might expire some day.  
> **username_2**: I had a similar issue: Wasn't able to fully solve this cause there is a max blur state I reach for some reason, but at least the x is gone: https://github.com/username_2/ElementalDraw/blob/master/data/shader/gl/rounded_rect.frag This is how it looks: https://github.com/username_2/ElementalDraw/tree/master/examples/overview  
> **username_0**: Thanks username_2 I'll take a look, I've actually stumbled across your project before, cool stuff!  

---

## 0 answers

