Альфа-прозрачность в видео Chrome

Сэм Даттон
Франсуа Бофор
François Beaufort
GitHub

Альфа-прозрачность в видео Chrome

Chrome 31 теперь поддерживает альфа-прозрачность видео в WebM.

Другими словами, Chrome учитывает альфа-канал при воспроизведении видео с « зеленым экраном », закодированных в WebM ( VP8 и VP9 ) с альфа-каналом. Это означает, что вы можете воспроизводить видео с прозрачным фоном: поверх веб-страниц, изображений или даже других видео.

Демо-версия есть на simpl.info/videoalpha . Немного сюрреалистично и грубовато (в буквальном смысле), но вы поняли идею!

Как сделать альфа-видео

Описываемый нами метод использует инструменты с открытым исходным кодом Blender и ffmpeg:

  1. Снимите объект на фоне однотонного цвета, например, ярко-зеленой занавески.
  2. Обработайте видео для создания массива неподвижных изображений PNG с данными прозрачности.
  3. Кодировать в видеоформат (в данном случае WebM).

Существуют также фирменные инструменты для выполнения той же работы, такие как Adobe After Effects , которые могут показаться вам более простыми.

1. Сделайте видео с зеленым экраном

Прежде всего, вам необходимо снять объект таким образом, чтобы все на заднем плане можно было «удалить» (сделать прозрачным) при последующей обработке.

Самый простой способ сделать это — снимать на одноцветном фоне, например, экране или занавеске. Зеленый или синий — наиболее часто используемые цвета, в основном из-за их отличия от оттенков кожи.

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

Ролик с визуальными эффектами к фильму «Великий Гэтсби» показывает, как многого можно добиться с помощью зеленого экрана.

Несколько советов по съемке:

  • Убедитесь, что у вашего объекта нет одежды или предметов того же цвета, что и фон, иначе они будут выглядеть как «дыры» в финальном видео. Даже небольшие логотипы или украшения могут стать проблемой.
  • Используйте постоянное, равномерное освещение и избегайте теней: цель — иметь минимально возможный диапазон цветов на фоне, который впоследствии нужно будет сделать прозрачным.
  • Использование нескольких источников рассеянного света помогает избежать теней и изменений цвета фона.
  • Избегайте использования блестящего фона: матовые поверхности лучше рассеивают свет.

2. Создание необработанного альфа-видео из видео с зеленым экраном

Следующие шаги описывают один из способов создания необработанного альфа-видео из видео с зеленым экраном:

  1. После того, как вы сняли видео с зеленым экраном, вы можете использовать инструмент с открытым исходным кодом, например Blender , чтобы преобразовать видео в массив файлов PNG с альфа-данными. Используйте цветовой ключ Blender, чтобы удалить зеленый экран и сделать его прозрачным. (Обратите внимание, что PNG не является обязательным: подойдет любой формат, сохраняющий данные альфа-канала.)

  2. Конвертируйте массив файлов PNG в необработанное видео YUVA с помощью инструмента с открытым исходным кодом, например ffmpeg:

    ffmpeg -i image%04d.png -pix_fmt yuva420p video.raw

    Альтернативный вариант — кодировать файлы непосредственно в WebM, используя команду ffmpeg, например:

    ffmpeg -i image%04d.png output.webm

Если вы хотите добавить звук, вы можете использовать ffmpeg для его мультиплексирования с помощью следующей команды:

ffmpeg -i image%04d.png -i audio.wav output.webm

3. Кодировать альфа-видео в WebM

Необработанные альфа-видео можно кодировать в WebM двумя способами.

  1. С ffmpeg: мы добавили поддержку ffmpeg для кодирования альфа-видео WebM.

    Используйте ffmpeg с входным видео, включающим альфа-данные, установите выходной формат WebM, и кодирование будет автоматически выполнено в правильном формате согласно спецификации. (Примечание: в настоящее время вам необходимо убедиться, что вы получили последнюю версию ffmpeg из дерева git, чтобы это работало.)

    Пример команды:

    ffmpeg -i myAlphaVideo.webm output.webm

  2. Использование webm-инструментов:

    git clone https://chromium.googlesource.com/webm/libvpx

    webm-tools — набор простых инструментов с открытым исходным кодом, связанных с WebM, поддерживаемых авторами проекта WebM, включая инструмент для создания видеороликов WebM с альфа-прозрачностью.

    Запустите двоичный файл с --help , чтобы увидеть список поддерживаемых alpha_encoder опций.

4. Воспроизведение в Chrome

Чтобы воспроизвести закодированный файл WebM в Chrome, просто установите файл в качестве источника видеоэлемента.

Как они это сделали?

Мы поговорили с инженером Google Вигнеш Венкатасубраманиан о его работе над проектом. Он обобщил основные проблемы, с которыми пришлось столкнуться:

  • Битовый поток VP8 не поддерживал альфа-канал. Поэтому нам пришлось включить альфа-канал, не нарушая битовый поток VP8 и не нарушая существующие проигрыватели.
  • Рендерер Chrome не способен обрабатывать видео с альфа-каналом.
  • Chrome имеет несколько путей рендеринга для нескольких устройств оборудования/GPU. Каждый путь рендеринга должен был быть изменен для поддержки рендеринга альфа-видео.

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

Удачного создания фильмов! Дайте нам знать, если вы создадите что-то потрясающее с альфа-прозрачностью.

Полезные ресурсы