如何用js在画布上制作雾效果或模糊效果？
我正在使用 javascript 和 THREE.js 3d 引擎，
我想要做雾效果，
这里有一个示例 http://mrdoob.github.com/ Three.js/examples/webgl_geometry_terrain_fog.html
但是它只支持WebGL，
那么有没有办法用javascript和canvas来模拟雾效果，或者模糊效果？
多谢。
I'm using javascript and THREE.js 3d engine,
and I want to do a fog effect,
here's an example http://mrdoob.github.com/three.js/examples/webgl_geometry_terrain_fog.html
but it only support WebGL,
so is there any way to simulate fog effect, or a blur effect with javascript and canvas?
thanks alot.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
Three.js 是 WebGL。您正在查看的示例是由制作 Three.js 的同一个人创建的。
Three.js 已经通过
scene.fog支持雾。https://github.com/mrdoob/third.js /wiki/API-Reference#wiki-THREE.Fog
下面是为在 Canvas 中搜索雾/模糊寻找 2D 的人提供的
有很多地方都有实现了各种模糊效果。 pixastic 库实现了很多这样的效果。
不过，雾是不同的东西。没有通用的定义，这实际上取决于您要寻找的内容。一种方法是将画布的
globalAlpha设置为0.3之类的值，然后绘制 perlin 噪声位于您希望出现“雾”的位置。请注意，您最可能想要的噪声的颜色梯度是透明到深灰色的。Three.js is WebGL. The example you're looking at is created by the same person who made three.js.
Three.js supports fog already with
scene.fog.https://github.com/mrdoob/three.js/wiki/API-Reference#wiki-THREE.Fog
below is for people that searched for fog/blur in Canvas looking for 2D
There are a bunch of places that have implemented various blur effects. The pixastic library has a lot of such effects implemented.
Fog is something different, though. There isn't a universal definition and it really depends on what you're looking for. One way would be to set the
globalAlphaof the canvas to something like0.3and then draw perlin noise on the locations that you want "fog" to appear. Note that the color gradient of the noise that you most likely want is transparent to dark gray.