Efficient blur algorithms

A single slider drives every panel so you can compare quality and cost at the same blur radius. The value is a Gaussian standard deviation in CSS pixels — the same thing CSS filter: blur() takes — so the CSS panel is the ground truth and every WebGL panel is calibrated to match it. The focus is on techniques that stay cheap as the radius grows — the naïve approach's cost scales with radius (or radius²), while the good ones don't.

30 px