From b929a2bbadf467864796ad4ec90882ce86cfebff Mon Sep 17 00:00:00 2001
From: Erik Reider <35975961+ErikReider@users.noreply.github.com>
Date: Sun, 6 Aug 2023 20:48:58 +0200
Subject: feat: add box shadows (#16)

---
 render/fx_renderer/gles2/shaders/box_shadow.frag | 74 ++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 render/fx_renderer/gles2/shaders/box_shadow.frag

(limited to 'render/fx_renderer/gles2/shaders/box_shadow.frag')

diff --git a/render/fx_renderer/gles2/shaders/box_shadow.frag b/render/fx_renderer/gles2/shaders/box_shadow.frag
new file mode 100644
index 0000000..c9b2b91
--- /dev/null
+++ b/render/fx_renderer/gles2/shaders/box_shadow.frag
@@ -0,0 +1,74 @@
+// Writeup: https://madebyevan.com/shaders/fast-rounded-rectangle-shadows/
+
+precision mediump float;
+varying vec4 v_color;
+varying vec2 v_texcoord;
+
+uniform vec2 position;
+uniform vec2 size;
+uniform float blur_sigma;
+uniform float corner_radius;
+
+float gaussian(float x, float sigma) {
+    const float pi = 3.141592653589793;
+    return exp(-(x * x) / (2.0 * sigma * sigma)) / (sqrt(2.0 * pi) * sigma);
+}
+
+// approximates the error function, needed for the gaussian integral
+vec2 erf(vec2 x) {
+    vec2 s = sign(x), a = abs(x);
+    x = 1.0 + (0.278393 + (0.230389 + 0.078108 * (a * a)) * a) * a;
+    x *= x;
+    return s - s / (x * x);
+}
+
+// return the blurred mask along the x dimension
+float roundedBoxShadowX(float x, float y, float sigma, float corner, vec2 halfSize) {
+    float delta = min(halfSize.y - corner - abs(y), 0.0);
+    float curved = halfSize.x - corner + sqrt(max(0.0, corner * corner - delta * delta));
+    vec2 integral = 0.5 + 0.5 * erf((x + vec2(-curved, curved)) * (sqrt(0.5) / sigma));
+    return integral.y - integral.x;
+}
+
+// return the mask for the shadow of a box from lower to upper
+float roundedBoxShadow(vec2 lower, vec2 upper, vec2 point, float sigma, float corner_radius) {
+    // Center everything to make the math easier
+    vec2 center = (lower + upper) * 0.5;
+    vec2 halfSize = (upper - lower) * 0.5;
+    point -= center;
+
+    // The signal is only non-zero in a limited range, so don't waste samples
+    float low = point.y - halfSize.y;
+    float high = point.y + halfSize.y;
+    float start = clamp(-3.0 * sigma, low, high);
+    float end = clamp(3.0 * sigma, low, high);
+
+    // Accumulate samples (we can get away with surprisingly few samples)
+    float step = (end - start) / 4.0;
+    float y = start + step * 0.5;
+    float value = 0.0;
+    for (int i = 0; i < 4; i++) {
+        value += roundedBoxShadowX(point.x, point.y - y, sigma, corner_radius, halfSize) * gaussian(y, sigma) * step;
+        y += step;
+    }
+
+    return value;
+}
+
+// per-pixel "random" number between 0 and 1
+float random() {
+    return fract(sin(dot(vec2(12.9898, 78.233), gl_FragCoord.xy)) * 43758.5453);
+}
+
+void main() {
+    float frag_alpha = v_color.a * roundedBoxShadow(
+            position + blur_sigma,
+            position + size - blur_sigma,
+            gl_FragCoord.xy, blur_sigma * 0.5,
+            corner_radius);
+
+    // dither the alpha to break up color bands
+    frag_alpha += (random() - 0.5) / 128.0;
+
+    gl_FragColor = vec4(v_color.rgb, frag_alpha);
+}
-- 
cgit v1.2.3