75 lines
2.4 KiB
GLSL
75 lines
2.4 KiB
GLSL
|
// 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);
|
||
|
|
}
|