Тепловое искажение/подводный визуальный эффект в HTML5 Холст

Question

Мы разрабатываем видеокарту с торговой картой (как для настольных, так и для мобильных телефонов, поэтому в идеале это должно быть очень быстро для мобильных телефонов, нам придется деактивировать эту графическую функцию на этих нижних устройствах) с использованием технологий HTML5 и холста.

Мы выяснили, что это добавит много жизни к нашим средам (уровням) с верхним видом, если мы сможем реализовать какое-то тепловое искажение (или какое-то влияние под водой/турбулентность) на некоторые конкретные элементы холста/сцены, например на травяной местности и на растительных реквизитах, чтобы визуально имитировать (в некоторой степени) эффект случайной анимированной ветровой турбулентности на этих конкретных элементах холста/сцены (в идеале с использованием масок, чтобы влиять только на предопределенные область холста).

Элементы управления, чтобы сделать эффект сильным или тонким, в зависимости от силы ветра, а также контроль над направлением ветра, были бы довольно легко достижимы. Нам просто нужно найти прочную основу для начала работы.

Просто чтобы убедиться, что вы правильно поняли эффект, нам нужно, посмотрите на этих видео: http://www.youtube.com/watch?v=brcMUHPNy-Y/http://www.youtube.com/watch?v=nZtmLCaYoHc

Мы Гугл много для этого и не нашли какой-либо предварительно приготовленный раствора для достижения этой цели относительно простой эффект. Мы хотим избежать использования WebGL и трехJS, если это возможно, а также предварительного рендеринга или предварительной анимации любой графики.

Любая идея о том, как добиться этого эффекта с помощью кода?

Answer 1

Вот отправная точка для начала ваших тестов производительности, но я предупреждаю, что эффекты турбулентности на мобильных устройствах, скорее всего, будут потреблять ресурсы за пределами приемлемости.

Элмер Thie сделал хороший эффект пульсации воды, используя HTML холст:

http://code.almeros.com/code-examples/water-effect-canvas/#.VCr6tfldV8E.

Его решение использует пиксельные манипуляции с помощью context.getImageData для достижения эффекта. Фактически, все эффекты турбулентности пикселей должны использовать .getImageData для выполнения требуемых манипуляций с пикселями.

Проблема: .getImageData никогда не оптимизируется графическим процессором, поэтому он работает очень медленно на устройствах с меньшим питанием (например, на мобильных устройствах).

Вы можете использовать демоверсию Almers в качестве базовой линии, чтобы определить, возможно ли манипулирование пикселями для вашего проекта на мобильных устройствах. Я желаю вам всего наилучшего ... но я боюсь худшего :-(