Какой подход к созданию полноэкранной анимации белого шума в браузере будет более производительным?
Приветствую. Всех с наступающим!
Задача:
Создать реалистичную полноэкранную анимацию а-ля помехи в телевизоре с возможностью подкладывать под нее различный контент.
Компоненты анимации:
- белый шум (хаотические мельтешения)
- горизонтальные полосы (движущиеся вертикально с разной скоростью, высотой и прозрачностью)
- фон с градиентом (от серого к более темному, со временем степень затемнения градиента скачкообразно и циклично меняется).
Возможные подходы к решению:
1) Циклическая покадровая генерация шума, полос и фона с отрисовкой на полноэкранном canvas (возможно, использование 3-х элементов canvas с послойно разделенной анимацией).
2) Анимация заранее созданных картинок (либо однократная генерация отдельных png-изображений с шумом и полосами) в элементах DOM, путем изменения background-position.
3) Использовать для анимации css3 (возможно, в комбинации со вторым вариантом).
4) Использовать для анимации SVG (с имеющимися фильтрами и т.д. удобствами).
Примечания:
Предполагается, что слой (или слои) с анимацией будут иметь полупрозрачность, для того чтобы был виден контент под анимацией, что и создает основную нагрузку на браузер.
При анимации слоя с шумом и изменении фонового градиента (через css3) наблюдается большая потеря производительности (например в FF подтормаживает. В chrome более-менее нормально ) - имеет ли смысл комбинировать css3 и js анимацию - либо лучше что-то одно?
Без изменения градиента - все выглядит более менее шустро.
Как повысить производительность этой многослойной анимации?
Какие моменты надо иметь ввиду, для более грамотного и красивого решения этой задачи?
Спасибо.
xmoonlight: ну чтоб наверняка ))
А вообще, даже если предположить gif - мне кажется, что не будет особой разницы между gif на несколько кадров и аналогичными кадрами, сгенерированным на canvas с буфферизацией вывода (даже если мы говорим только о тайле шума без полос и фона, а иначе размер gif будет очень большим). Но суть не в этом - нужна полупрозрачность, поэтому gif не подходит.
Stas404: "даже если предположить gif - мне кажется"
"Но наверняка такой ход сильно скажется на падении производительности."
Не предполагайте, а слушайте что говорят и проверяйте.
xmoonlight: обязательно проверю "gif + DOM opacity" vs "canvas + buffer + холостые requestAnimationFrame". Просто таким образом показал свой скептический настрой, возможно желая получить от вас некоторую аргументацию, не более того. Но идиотом уж точно никого не обсуждал и не вижу причин так реагировать.
Отчего же не попредполагать и не пообщаться на эту тему? Я предполагаю, что наложение трех полноэкранных анимированных слоев с ресурсоемким DOM opacity менее производительна (а то и вовсе не подойдет по художественным соображениям - непрозрачных пикселей вообще не будет, например). Почему вы считаете обратное? Мне было бы интересно узнать вашу точку зрения, возможно, это будет даже интереснее и полезнее самой дальнейшей реализации. Так что заранее лучей добра вам )
Stas404: я кодирую на craftyjs и там есть возможность выбора DOM или Canvas для выполнения одного и того же кода (сцены). И ставил FPS и смотрел график CPU. Поэтому я сделал такой вывод.
А вообще, надо тестить... (я всегда проверяю все варианты.....)
"Так что заранее лучей добра вам )" - Спасибо! И Вам лучей добра!
Как бы я сделал генерацию подобного видео например, в AfterEFfects, сверху вниз:
3. слой с градиентом
2. слой с полосами
1. слой с шумом
0. исходное изображение
Самое ресурсоёмкое - шум с прозрачностью, там много вычислений при генерировании и много данных для распаковки при показе. Но, можно зациклить от 3 до 5 кадров и никто ничего не заметит.
То есть предложение такое - шум посчитать в GIF (видео с прозрачностью, да на всё окно я не знаю, можно ли показать), а остальное - рисовать средствами js.
Пробовал различные варианты, но полупрозрачность, необходимая для видимости подложенного под эти слои контента очень сильно напрягает браузер. В chrome вроде бы нормально, но в том же FF тормоза выходят за рамки приличия и для прода это, к сожалению, не годится.
В общем, пока найти устраивающее решение не удалось и его поиск был отложен до лучших времен. Спасибо.
Простой
