Question

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.

Answer 1

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 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.