如何使用js在画布中制作雾化效果或模糊效果？

Question

我正在使用javascript和THREE.js 3d引擎，

我想做雾效果

这是一个示例http://mrdoob.github.com/three.js/examples/webgl_geometry_terrain_fog.html

但它仅支持WebGL ，

因此，有什么方法可以模拟fog effect ，或者使用javascript和canvas来blur effect ？

非常感谢。

Answer 1

Three.js 是 WebGL。 您正在查看的示例是由创建Three.js的同一人创建的。

Three.js已经使用scene.fog支持了雾。

https://github.com/mrdoob/three.js/wiki/API-Reference#wiki-THREE.Fog

---

以下是针对在Canvas中搜索雾/模糊并寻找2D的人

有很多地方已经实现了各种模糊效果 。 pixastic库已经实现了许多这样的效果。

但是雾却有所不同。 没有通用的定义，它实际上取决于您要查找的内容。 一种方法是将画布的globalAlpha设置为0.3 ，然后在希望“雾化”出现的位置绘制perlin噪声 。 请注意，您最可能想要的噪声的颜色渐变是透明的，对于深灰色。