Discussing potentially better alternatives to CSS blur filter or Context2D blur filter

Question

I'd like to learn about potential better alternatives to CSS Blur filter and Context2D.filter.
I'm not looking for a definitive perfect method that could be applied to any case, but just potential directions that could/should be more performant.

Context: we want to blur a canvas where 500 flat 2d shapes move randomly using requestAnimationFrame. The shapes are evolving, so we can't blur them into bitmaps at frame 1 and make these blurred versions of the shapes move. Let's say we need to apply a blur to the whole canvas constantly.

For the sake of argument: let's consider that CSS Blur Filter and Context2D.filter are out of the question and we need something else. I've found a few tracks that use WEBGL, shaders and ThreeJS post-processing effects to do blurs. Examples:

• https://www.shadertoy.com/view/WtKfD3 (Shader: blurred video)
• https://www.shadertoy.com/view/NscGDf (Shader: 4 types of blur)
• https://tympanus.net/Tutorials/webgl-mouseover-effects/step3.html (ThreeJS post-processing)
• https://pmndrs.github.io/postprocessing/public/demo/#blur (ThreeJS post-processing)

Could these tracks potentially be more performant? Are there any other methods you think could be worth exploring? Devices aimed: any laptop/desktop computers that are considered OK in 2024, using a recent Chrome, Firefox or Safari

Thank you for reading

Answer 1

CSS Blur Filter are most likely none optimal for most case, if you want a blazing fast optimised website, above all, if this blur is animated.

There are multiple way of achieving blur, with WebGL. But looking at your problem, with keeping most of the existing code:

• You can use your canvas (where 500 flat shapes are), as a CanvasTexture, on a Plane inside a WebGLRenderingContext (example);
• Then you can use a custom FragmentShader of the plane where you modify your texture to be blur;
• The most solid optimised resource to my knowledge glsl-fast-gaussian-blur.