Как поднять производительность FF при работе с css blur?

Question

[Ragtime Kitty]

Привет. Есть вот такая конструкция - https://codepen.io/anon/pen/zemvWO

Вкратце - два video одно растянуто как задний фон, другое в контейнере и с filter: blur(10px).

Есть колхозный счетчик кадров. При простом проигрывании размытого видео avg FPS - 59, min 55. У контейнера есть ресайз, во время которого avg FPS - 40, min 35, что уже неприемлемо. Из-за этого у видео дикий рассинхрон да и визуально неприятно. Настройка "По возможности использовать аппаратное ускорение" в firefox ничего не меняет. На убунте в firefox фпс вообще меньше 10 во время ресайза. В хроме FPS стабильно 59 при любых манипуляциях с контейнером или видео.

В движках я не особо, поэтому вопрос - почему firefox так тормозит в данной конструкции даже с блюром в один пиксель? Можно ли как-то поднять производительность пусть даже в конкретном браузере?

Comments

[Rustam Bainazarov]

Навряд ли получится. Blur одно из самых дорогих действий. Особенно, если пытаться его анимировать. Тот же Chrome тоже часто не очень производителен в этом отношении, хоть он и лучше работает с этим фильтром.

Можете, конечно, попытаться упростить вёрстку вокруг (разметка, трансформации, box-shadow), чтобы браузеру было легче размывать, но сами понимаете — это не панацея.

Update. А в такой конструкции — подавно.

Answer 1

[Александр Таратин]

Как не старайтесь у вас не выйдет полностью синхронизировать 2 видео даже без блура.

Попробуйте использовать webgl.
Только не делайте блур через пост процессинг. Это будет слишком дорого.
Делайте блур прямо шейдере при отрисовке выводимого прямоугольника за один проход. Так получим проигрыш по числу выборок из текстуры, но это будет все равно дешевле, чем делать 2-х проходный постпроцессинг.

Comments

[Ragtime Kitty]

А примера как нарисовать видео через webgl у вас не завалялось?

Answer 2

[profesor08]

Вот берешь весь свой код с идеей с двумя видео и выкидываешь на помойку. Для реализации всего задуманного тебе надо лишь 1 видео, скрытое и 2 канваса. Видео само воспроизводится, на канвасах рисуй его, один из них размывай как хочешь, хоть свойством blur, хоть средствами канваса. Результатом будет два канваса, на которых синхронно рисуются кадры из видео, и один будет заблюрен.

А если картинку видео передавать в шейдер, и рисовать все там, то производительность будет космическая.

Comments

[Ragtime Kitty]

Выкинуть? Но он мне так нравился :(

А вообще спасибо, канвас куда лучше. В канвасы не умею, но рисую вот так:

video.addEventListener('play', function() {
    var $this = this; 
    (function loop() {
      if (!$this.paused && !$this.ended) {
        ctx.drawImage($this, 0, 0);
        ctx.filter = 'blur(10px)';
        setTimeout(loop, 1000 / 30); 
      }
    })();
  }, 0);

Обязательно делать скрытое видео и два канваса или можно оставить видео как задний фон, а размазывать уже канвас? Но опять же, я не знаю как сохранить пропорции и масштаб у видео и канваса, учитывая, что он еще и в контейнере должен быть. Подскажите, как его позиционировать и масштабировать? Как добиться такого же поведения как в примере с двумя видео?

[profesor08]

Хочешь легко и дешево, оставь свой первый вариант. Хочешь чтоб получилось как надо, делай как я описал, но придется приложить усилия. Что-то придумывать и коверкать не надо.

Вот это в requestAnimationFrame обрабатывай и никаких setTimeout/setInterval.

ctx.drawImage($this, 0, 0);
ctx.filter = 'blur(10px)';

Все твои вопросики пиши в гугл, там есть все ответы.

[Ragtime Kitty]

Ну да, зачем вообще тостер, если есть гугл)

[profesor08]

Ragtime_Kitty, ответ на свой вопрос ты получил, проблему с синхронизацией он решает. Если ты ждешь что я за тебя напишу код, то нет не жди.

[Ragtime Kitty]

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

[Ragtime Kitty]

profesor08, а вообще - не решает твой ответ проблему. Если рисовать два канваса с одного видео по requestAnimationFrame, рассинхрон все равно есть, пусть и меньше, и в FF производительность даже хуже.

[profesor08]

Ragtime_Kitty, потому что рисовать надо в одном requestAnimationFrame на обоих canvas, и видео убрать с глаз долой, чтоб не смотреть на него. Так как на канвасе отрисовывается кадр уже после того как он появился на видео.

[Ragtime Kitty]

profesor08, так и делаю. У видео display: none

video.addEventListener('play', () => {
      function step() {
          ctxBg.drawImage(video, 0, 0);
          ctxFg.drawImage(video, 0, 0);
          requestAnimationFrame(step);
  	}
    requestAnimationFrame(step);
  })
});

[profesor08]

Ragtime_Kitty, ну либо совсем древнее железо, либо ты что-то не так делаешь, либо ты неправильно спозиционировал элементы или неправильно позиционируешь рисуемую картинку. Потому что у меня тут нет никакой рассинхронизации и тд, все рисуется четко. https://jsfiddle.net/profesor08/ec6gszr8/

[Ragtime Kitty]

profesor08, нит, все делаю так и железо тут ни при чем. У тебя видео просто медленное. Поставь что-нибудь с быстрой сменой кадров и увидишь. + Если запускать видео через autoplay или по ready, то появляются те же артефакты/рассинхрон, которые убираются после паузы или через пару проходов видео ¯\_(ツ)_/¯

https://codepen.io/Ragtime-Kitty/pen/MLxmMK

Производительность даже хуже, чем с двумя видео. Если размазывать через канвас, то ФФ вообще умирает.

[profesor08]

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

[Ragtime Kitty]

Затем, что на второй канвас накладывается фильтр и рамка выступает в роли маски. В общем, не помогает твой способ, производительность ПК тут ни при чем, артфекаты я пофиксила.
A9 на мобилке спокойно рисует эти два канваса с блюром в 60фпс, а i5 в фаерфоксе без блюра не в состоянии, ага-ага.

[profesor08]

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

[Ragtime Kitty]

1000500 на мобилке, 1044480 на компуктере. Разница в производительность процессоров куда больше. Не в этом соль.

webgl и маска слишком сложно, я не умею, примеры не нашла. Пусть будут канвасы c фолбэком на картинки в фф.

[profesor08]

Еще можно получить data url или blob url из кадра, и задать его как src для картинок, а одной из них сделать blur.

[Ragtime Kitty]

profesor08, слишком геморно будет позиционировать все это дело да и пади знай, будет ли оно так быстрее работать, чем с канвасами.