Альфа-прозрачность в видео 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. Использование веб-инструментов:

    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 имеет несколько путей рендеринга для нескольких аппаратных/графических устройств. Каждый путь рендеринга пришлось изменить для поддержки рендеринга альфа-видео.

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

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

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