Эффект размытия - html5 canvas

Question

Я хочу создать эффект размытия, например: http://www.flasheff.com/patternsshowcase/ (FESBlur).

Я пытался использовать http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html, используя setInterval и изменяя радиус эффекта на каждом «кадре», но если я установил задержку интервала на меньшее значение (увеличил скорость эффекта), это не не работает гладко (я думаю, это потому, что он использует imageData и изменяет значение каждого пикселя).

Есть ли у вас какие-либо идеи о том, как я могу заставить этот эффект работать достаточно быстро? (около 1 секунды от максимального размытия до не размытия)

Спасибо, Gabriel

Answer 1

Я не эксперт в этом, но на ум приходят некоторые очень очевидные вещи:

Метод 1: Буферизация. Буфер, вероятно, является единственным наиболее эффективным способом остановить заикания,Если бы вы могли отложить запуск анимации на 0,25 секунды до ее фактического вывода, вы, вероятно, могли бы выполнить половину вычислений до того, как анимация даже запустится.

Метод 2: Кэширование. Время, затрачиваемое на размытие, обычно увеличивается с увеличением радиуса размытия.Допустим, у вас есть 20 кадров в вашей анимации.Если вы можете кэшировать кадры 5, 10, 15 и 20 (не размытое изображение), то вы можете получить кадры 1-4 от размытия 5 с небольшим радиусом, и вы получите кадр 5 бесплатно, тогда вы можете получить кадры 6-9 от размытия 10 с небольшим радиусом, и вы получите кадр 10 бесплатно и т. Д.

Метод 3: Интерполяция / смешивание грубых размытостей. Смешивание двух изображений должно бытьбыстрее, чем размытие одного изображения.Если вы сделаете свою анимацию 21 кадром (1-21), то вы сможете вычислить кадры 1, 5, 9, 13, 17 и 21. Эти кадры будут свободными, и вы сделаете другие кадры, смешав их: кадр 2 (F2) будет 75% F1 и 25% F5, F3 будет 50% F1 и 50% F5 и т. д.

---

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

Однако поймите это: на самом деле javascript не может выбирать, когда он получит или не получитвнимание процессора, и это не совсем в списке приоритетов процессора.Если процессор решает уйти в отпуск на 1/10 секунды, вероятно, вы ничего не сможете сделать, чтобы остановить заикание.

Answer 2

Используйте requestAnimFrame вместо setInterval.Больше информации о http://paulirish.com/2011/requestanimationframe-for-smart-animating/

Я проверил это с более быстрым уменьшением размытия на моем FF5, и, похоже, он работает нормально.

(function animloop(){
  blurImage();
  requestAnimFrame(animloop);
})();

function blurImage(){
    stackBlurImage( "image1", "output", amount, true );
    amount=amount-4;
}