1. VAP

VAP (Video Animation Player) — это разработка от компании «企鹅电竞», предназначенная для воспроизведения впечатляющей анимации.

• По сравнению с Webp и Apng, имеет более высокую степень сжатия (меньше исходного материала) и аппаратное декодирование (более быстрое декодирование).
• В сравнении с Lottie, способен воспроизводить более сложные анимационные эффекты (например, эффекты частиц).

Демонстрация эффектов:

Кроме того, VAP может интегрировать в анимацию пользовательские атрибуты (такие как имя пользователя и аватар).

2. Проект

«企鹅电竞» — это платформа для прямых трансляций, которая требует отображения впечатляющих анимаций подарков в прямом эфире.

Анимации становятся всё более впечатляющими, а требования к размеру исходного материала и производительности декодирования растут. Мы провели исследование различных решений и составили сравнительную таблицу:

• Параметры тестирования:*
  • Смартфон: Xiaomi Mix3
  • Исходный материал: 736 × 576, 80 кадров
  • Apng: качество 75; Webp: качество 75; VAP: битрейт 2000

Исследование решений:

1. Векторная анимация (представленная Lottie): Lottie имеет очень высокую степень сжатия векторной анимации, но не может отображать специальные эффекты (например, эффекты частиц), поэтому этот вариант не подходит;
2. Анимация изображений (представлена GIF, Apng и Webp):
   • GIF: поддерживает только 8-битную цветовую гамму, что приводит к серьёзной потере цвета и низкой производительности декодирования, не удовлетворяя требованиям к эффектам;
   • Apng и Webp: могут удовлетворить требования к эффектам, но файлы большие, а производительность программного декодирования низкая (на старых смартфонах, таких как тогдашний Hongmi 1, процесс декодирования может даже привести к зависанию всей прямой трансляции), эти проблемы трудно принять;
3. Видео (представлено mp4): использует кодирование H264, которое по сравнению с анимацией изображений имеет гораздо более высокую степень сжатия и высокую производительность аппаратного декодирования. Однако оно явно не поддерживает прозрачность;

После исследования мы обнаружили, что либо эффекты не соответствуют требованиям (Lottie и GIF), либо файлы слишком велики и всё ещё используют программное декодирование (Webp и Apng), либо не поддерживают прозрачность (mp4). Ни одно из этих решений не может удовлетворить наши потребности, поэтому появился высокопроизводительный компонент анимации VAP.

3. Реализация

Выбор решения

Решение на основе видео в формате mp4 является оптимальным с точки зрения эффектов, размера и производительности декодирования. Но данные, хранящиеся в H264, представляют собой YUV, без канала прозрачности. Решение VAP основано на mp4 и решает проблему прозрачности в видео, позволяя достичь лучшего соотношения сжатия и лучшей производительности декодирования.

Реализация прозрачности в видео

Данные, декодированные из H264, являются YUV после преобразования в RGB, без альфа-канала. Мы можем выделить дополнительную область в видео для хранения значений альфа, а затем использовать OpenGL для объединения этих данных в изображение ARGB (с альфа-каналом).

Например, после декодирования видеокадра исходные данные изображения объединяются следующим образом:

Каждая рамка проходит через один и тот же процесс, создавая видео с прозрачностью. Окончательный эффект выглядит так:

Исходное видео	Конечный эффект

В исходном видео чёрные и белые области содержат данные альфа. Последняя версия VAP позволяет изменять размер области альфа, уменьшая её размер без ущерба для конечного эффекта отображения, эффективно уменьшая разрешение видео, повышая совместимость с устройствами и оставляя дополнительное пространство для будущих функций VAP, таких как интеграция.

Информация о конфигурации анимации

Во время воспроизведения анимации требуется некоторая информация о конфигурации, такая как объявление области альфа и информация об интеграции анимации. Конфигурация представлена в формате JSON. Чтобы упростить использование компонента, все связанные файлы объединены в файл mp4.

Организация файлов в mp4 похожа на организацию ключей и значений в JSON, называемую BOX. Мы создаём новый BOX (vapc VAP Config), помещаем содержимое JSON в этот BOX, и перед воспроизведением сначала считываем этот BOX. Обратите внимание, что если формат mp4 не распознаёт определённый BOX, он автоматически игнорируется, не влияя на нормальный процесс воспроизведения mp4.

Интеграция анимации в VAP

VAP также поддерживает интеграцию пользовательских атрибутов, таких как имена пользователей и аватары, в анимацию. Мы называем это интеграцией анимации VAP.

Невозможно напрямую вставить атрибуты в видеоконтент, можно только обмануть глаза зрителя, обрезав изображения атрибутов и создав иллюзию их присутствия в видео. Это достигается путём использования изображений-масок и операций Porter-Duff для получения желаемой формы.

Для реализации обработки изображений атрибутов необходимо ввести изображения-маски. Используя изображения-маски и изображения атрибутов, можно выполнить операцию Porter-Duff, чтобы получить нужную форму.

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

Изображения-маски сохраняются в каждой рамке видео, освобождая пространство за счёт уменьшения области альфа. Эффект реализуется следующим образом:

И окончательный эффект выглядит так:

Инструменты

Чтобы облегчить использование компонента, предоставляются дополнительные инструменты для создания материалов.

Лицензия

VAP находится под лицензией MIT. Подробности см. в файле LICENSE.