CSS Blur filter与Context2D.filter的高性能替代方案问询

背景 #

我们需要对画布持续应用模糊效果：画布上有500个平面2D形状通过requestAnimationFrame随机移动，且形状会不断变化——无法在初始帧将其模糊为位图后直接移动模糊版本。当前假设CSS Blur filter和Context2D.filter不可用，希望找到更具性能优势的替代方案，而非适用于所有场景的完美方法。

已关注的探索方向 #

我已经发现基于WebGL、自定义着色器和Three.js后处理实现模糊的方向，包括：

• 基于着色器的动态模糊实现（适配动态内容）
• 支持多种模糊类型的着色器方案
• Three.js原生后处理模糊流程
• 第三方postprocessing库的模糊实现

核心疑问 #

1. 上述WebGL/着色器/Three.js方向是否确实比禁用的方案性能更优？
2. 还有哪些值得探索的高性能模糊实现方法？

目标设备：2024年主流桌面电脑，使用新版Chrome、Firefox或Safari浏览器

内容的提问来源于stack exchange，提问作者AnnaGino