讨论 CSS 模糊滤镜或 Context2D 模糊滤镜的潜在更好替代方案

Question

我想了解

CSS Blur filter

和

Context2D.filter

的潜在更好替代品。
我并不是在寻找可以应用于任何情况的明确的完美方法，而只是寻找可以/应该更高效的潜在方向。

上下文：我们想要模糊画布，其中 500 个平面 2d 形状使用 requestAnimationFrame 随机移动。形状在不断演变，因此我们无法将它们模糊到第 1 帧的位图中并使这些形状的模糊版本移动。假设我们需要不断对整个画布应用模糊。

为了论证：让我们考虑一下 CSS Blur Filter 和 Context2D.filter 是不可能的，我们需要其他东西。我发现了一些使用 WEBGL、着色器和 ThreeJS 后处理效果来进行模糊处理的曲目。例子：

• https://www.shadertoy.com/view/WtKfD3（着色器：视频模糊）
• https://www.shadertoy.com/view/NscGDf（着色器：4种模糊）
• https://tympanus.net/Tutorials/webgl-mouseover-effects/step3.html（三个JS后处理）
• https://pmndrs.github.io/postprocessing/public/demo/#blur（ThreeJS后处理）

这些曲目的性能可能会更高吗？您认为还有其他值得探索的方法吗？ 目标设备：2024 年被认为可以使用最新 Chrome、Firefox 或 Safari 的任何笔记本电脑/台式电脑

感谢您的阅读

Answer 1

CSS Blur Filter

对于大多数情况来说很可能不是最佳的，如果你想要一个快速优化的网站，最重要的是，如果这个模糊是动画的。

有多种实现模糊的方法，其中包括 WebGL。 但是看看你的问题，保留大部分现有代码：

• 您可以将

  canvas

  （其中有 500 个平面形状）用作

  CanvasTexture

  ，放在

  Plane

  内的

  WebGLRenderingContext

  （示例）；
• 然后您可以使用

  FragmentShader

  的自定义

  plane

  ，将

  texture

  修改为模糊；
• 据我所知最可靠的优化资源glsl-fast-gaussian-blur。