Как сделать эффект тумана или размытия на холсте с помощью js?

Question

Я использую JavaScript и THREE.js 3D-движок,

и я хочу сделать эффект тумана,

вот пример http://mrdoob.github.com/three.js/examples/webgl_geometry_terrain_fog.html

но он поддерживает только WebGL,

так есть ли способ имитировать fog effect или blur effect с помощью JavaScript и canvas?

Большое спасибо.

Answer 1

Three.js - это WebGL. Пример, на который вы смотрите, создан тем же человеком, который создал three.js.

Three.js поддерживает туман уже с scene.fog.

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

---

ниже для людей, которые искали туман / размытие на холсте в поисках 2D

Есть множество мест, в которых реализованы различные эффекты размытия . В библиотеке pixastic реализовано множество таких эффектов.

Туман - это нечто иное. Универсального определения не существует, и оно действительно зависит от того, что вы ищете. Одним из способов было бы установить globalAlpha холста на что-то вроде 0.3 и затем нарисовать perlin noise в тех местах, где вы хотите, чтобы появился «туман». Обратите внимание, что цветовой градиент шума, который вы, скорее всего, хотите, от прозрачного до темно-серого.