如何使用js在画布中制作雾化效果或模糊效果？ [英] how to make a fog effect or blur effect in canvas with js?
问题描述
我正在使用javascript和 THREE.js 3d引擎，
I'm using javascript and THREE.js 3d engine,
，但我想雾化效果，
这是一个示例 http://mrdoob.github.com/three.js/examples/webgl_geometry_terrain_fog.html
，但仅支持 WebGL ，
所以有什么方法可以模拟起雾效果或模糊效果和javascript和画布吗？
so is there any way to simulate fog effect, or a blur effect with javascript and canvas?
非常感谢。
推荐答案
Three.js 是 WebGL。您正在查看的示例是由创建three.js的同一人创建的。
Three.js is WebGL. The example you're looking at is created by the same person who made three.js.
Three.js已经通过 scene.fog支持雾了。 。
Three.js supports fog already with scene.fog.
https://github.com/mrdoob/three.js/wiki/API-Reference#wiki-THREE.Fog
以下是针对在Canvas中寻找2D雾/模糊的人
很多地方都有实现了各种模糊效果。 pixastic 库已经实现了很多这样的效果。
There are a bunch of places that have implemented various blur effects. The pixastic library has a lot of such effects implemented.
雾却有所不同。没有通用的定义，它实际上取决于您要查找的内容。一种方法是将画布的 globalAlpha 设置为 0.3 之类的内容，然后绘制珀林噪声出现在您要显示雾的位置上。请注意，您最可能想要的噪声的颜色渐变是从透明到深灰色。
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 globalAlpha of the canvas to something like 0.3 and 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.
这篇关于如何使用js在画布中制作雾化效果或模糊效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
