Видеоконференции занимают всё большее место в работе и личной жизни людей. Чем лучше организован процесс с точки обработки видео и приватности, тем меньше отвлекается внимание человека от самой конференции. В рамках этой задачи мы недавно разработали фильтры размытия и замены фона в Google Meet. Они задействуют машинное обучение (ML) для лучшего выделения участников независимо от их окружения. В то время как другие решения требуют установки дополнительного программного обеспечения, функции Meet основаны на передовых технологиях Web ML, построенных с помощью MediaPipe, и работают непосредственно в вашем браузере — никаких дополнительных шагов не требуется. Одной из ключевых целей при разработке этих функций было обеспечение производительности в реальном времени в браузере почти на всех современных устройствах, чего мы достигли, объединив эффективные модели ML на устройстве, рендеринг на основе WebGL и вывод ML на веб-стеке с помощью XNNPACK и TFLite.
Размытие и замена фона на основе MediaPipe
Новые функции Meet разработаны с помощью MediaPipe, опенсорсной платформы Google для потоковых трансляций. На этом фреймворке основаны другие ML-решения, такие как отслеживание руки, радужной оболочки глаза и положения тела в реальном времени.
Главным требованием любой мобильной технологии является достижение высокой производительности. Для этого веб-конвейер MediaPipe применяет низкоуровневый бинарный формат WebAssembly, разработанный специально для веб-браузеров и повышающий скорость выполнения сложных вычислительных задач. Во время выполнения браузер преобразует инструкции WebAssembly в машинный код, который выполняется намного быстрее, чем традиционный код JavaScript. Кроме того, в Chrome 84 недавно реализовали поддержку WebAssembly SIMD, где каждая инструкция обрабатывает несколько точек данных, что увеличивает производительность более чем в два раза.
Наше решение сначала обрабатывает каждый видеокадр, отделяя пользователя от фона (подробнее о модели сегментации см. ниже), используя вывод ML для вычисления маски низкого разрешения. При необходимости мы дополнительно уточняем маску, чтобы выровнять её с границами изображения. Затем маска используется для рендеринга видеовыхода через WebGL2, а фон размывается или заменяется.
Конвейер WebML: все вычислительные операции реализованы на C++/OpenGL и выполняются в браузере через WebAssembly
В текущей версии расчёт выполняется на CPU клиента с низким энергопотреблением и самым широким охватом устройств. Для достижения высокой производительности в реальном времени мы разработали эффективные модели ML с использованием библиотеки XNNPACK для ускорения расчёта. Это первый механизм видеовывода, специально разработанный для новой спецификации WebAssembly SIMD. За счёт ускорения XNNPACK и SIMD модель сегментации работает в режиме реального времени в интернете.
Благодаря гибкой конфигурации MediaPipe решение для размытия/замены фона адаптирует свою обработку в зависимости от возможностей устройства. На устройствах высокого класса запускается полный конвейер для обеспечения высочайшего визуального качества, в то время как на устройствах низкого класса он переключается на облегчённые вычислительные модели ML, без уточнения маски.
Модели ML на устройстве должны быть сверхлёгкими для быстрого расчёта, низкого энергопотребления и небольшого размера. Для моделей в браузере входное разрешение сильно влияет на количество операций с плавающей запятой (FLOPS), необходимых для обработки каждого кадра, и поэтому оно также должно быть небольшим. Прежде чем подавать изображение в модель, мы его уменьшаем. Восстановление максимально точной маски из картинки с низким разрешением усложняет проектирование модели.
Общая сеть сегментации имеет симметричную структуру кодирования/декодирования. Слои декодера (светло-зелёный) симметричны слоям кодера (светло-синий). В частности, канальное внимание (channel-wise attention) с пулингом по средней величине (global average) применяется как в блоках кодера, так и в блоках декодера, что снижает нагрузку на CPU.
Архитектура модели с кодером MobileNetV3 (светло-синий) и симметричным декодером (светло-зелёный)
Для кодера мы модифицировали нейросеть MobileNetV3-small, дизайн которой спроектирован автоматически методом поиска сетевой архитектуры для достижения наилучшей производительности на слабом железе. Чтобы вдвое уменьшить размер модели, мы экспортировали её в TFLite с квантованием float16, что привело к небольшой потере точности, но без заметного влияния на качество. В полученной модели 193 тыс. параметров и размер всего 400 КБ.
После сегментации мы используем шейдеры OpenGL для обработки видео и рендеринга эффектов. Задача состоит в эффективной визуализации без артефактов. На этапе уточнения совместный билатеральный фильтр сглаживает маску низкого разрешения.
Подавление артефактов при рендеринге. Слева: совместный двусторонний фильтр сглаживает маску сегментации. Посредине: отдельные фильтры удаляют артефакты с ореолами. Справа: замена фона методом световой обёртки
Шейдер размытия имитирует эффект боке, регулируя силу размытия в каждом пикселе пропорционально значениям маски сегментации, подобно пятну рассеяния в оптике. Пиксели взвешиваются по радиусам пятен, так что пиксели переднего плана не будут перетекать в фон. Мы внедрили разделяемые фильтры для взвешенного размытия вместо популярной гауссовой пирамиды, поскольку они удаляют артефакты ореола вокруг человека. Для производительности размытие выполняется с низким разрешением — и смешивается с входным кадром в исходном разрешении.
Примеры размытия фона
При замене фона используется техника, известная как световая обёртка (light wrapping) для наложения сегментированных лиц на индивидуальный фон. Световая обёртка помогает смягчить края сегментации, позволяя фоновому свету проливаться на элементы переднего плана, увеличива реалистичность композиции. Это также помогает минимизировать артефакты ореола, когда возникает большой контраст между передним планом и фоном.
Примеры замены фона
Чтобы оптимизировать работу на различных устройствах, мы предоставляем варианты моделей с несколькими размерами входного изображения (например, 256x144 и 160x96 в текущей версии), автоматически выбирая лучший вариант в соответствии с доступными аппаратными ресурсами.
Мы оценили скорость вывода модели и сквозной конвейер на двух популярных устройствах: MacBook Pro 2018 с 6-ядерным процессором Intel Core i7 2,2 ГГц и Acer Chromebook 11 с процессором Intel Celeron N3060. Для ввода 720p MacBook Pro может запускать более качественную модель со скоростью 120 кадров в секунду и сквозной конвейер со скоростью 70 кадров в секунду, в то время как на Chromebook модель работает со скоростью 62 кадра в секунду с моделью более низкого качества, а сквозной конвейер выдаёт 33 FPS.
Скорость вывода модели и сквозной конвейер на ноутбуках высокого (MacBook Pro) и низкого класса (Chromebook)
Для количественной оценки точности модели используются популярные метрики: коэффициент Жакара (intersection-over-union, IOU) и граничная F-мера (boundary F-score). Обе модели демонстрируют высокое качество работы, особенно на такой легковесной сети:
Мы также выложили в открытый доступ карту модели для сегментации, где подробно указаны спецификации для оценки. В оценочные данные входят изображения из 17 географических субрегионов земного шара с аннотациями для тона кожи и пола. Анализ показал, что модель демонстрирует устойчиво высокий результат на различных регионах, оттенках кожи и полах, с небольшими отклонениями в показателях IOU.
Таким образом, мы представили новое браузерное решение ML для размытия и замены фона в Google Meet. Благодаря этому решению модели ML и шейдеры OpenGL показывают эффективную работу в интернете. Разработанные функции обеспечивают производительность в реальном времени при низком энергопотреблении даже на маломощных устройствах.
Размытие и замена фона на основе MediaPipe
Обзор нашего решения Web ML
Новые функции Meet разработаны с помощью MediaPipe, опенсорсной платформы Google для потоковых трансляций. На этом фреймворке основаны другие ML-решения, такие как отслеживание руки, радужной оболочки глаза и положения тела в реальном времени.
Главным требованием любой мобильной технологии является достижение высокой производительности. Для этого веб-конвейер MediaPipe применяет низкоуровневый бинарный формат WebAssembly, разработанный специально для веб-браузеров и повышающий скорость выполнения сложных вычислительных задач. Во время выполнения браузер преобразует инструкции WebAssembly в машинный код, который выполняется намного быстрее, чем традиционный код JavaScript. Кроме того, в Chrome 84 недавно реализовали поддержку WebAssembly SIMD, где каждая инструкция обрабатывает несколько точек данных, что увеличивает производительность более чем в два раза.
Наше решение сначала обрабатывает каждый видеокадр, отделяя пользователя от фона (подробнее о модели сегментации см. ниже), используя вывод ML для вычисления маски низкого разрешения. При необходимости мы дополнительно уточняем маску, чтобы выровнять её с границами изображения. Затем маска используется для рендеринга видеовыхода через WebGL2, а фон размывается или заменяется.
Конвейер WebML: все вычислительные операции реализованы на C++/OpenGL и выполняются в браузере через WebAssembly
В текущей версии расчёт выполняется на CPU клиента с низким энергопотреблением и самым широким охватом устройств. Для достижения высокой производительности в реальном времени мы разработали эффективные модели ML с использованием библиотеки XNNPACK для ускорения расчёта. Это первый механизм видеовывода, специально разработанный для новой спецификации WebAssembly SIMD. За счёт ускорения XNNPACK и SIMD модель сегментации работает в режиме реального времени в интернете.
Благодаря гибкой конфигурации MediaPipe решение для размытия/замены фона адаптирует свою обработку в зависимости от возможностей устройства. На устройствах высокого класса запускается полный конвейер для обеспечения высочайшего визуального качества, в то время как на устройствах низкого класса он переключается на облегчённые вычислительные модели ML, без уточнения маски.
Модель сегментации
Модели ML на устройстве должны быть сверхлёгкими для быстрого расчёта, низкого энергопотребления и небольшого размера. Для моделей в браузере входное разрешение сильно влияет на количество операций с плавающей запятой (FLOPS), необходимых для обработки каждого кадра, и поэтому оно также должно быть небольшим. Прежде чем подавать изображение в модель, мы его уменьшаем. Восстановление максимально точной маски из картинки с низким разрешением усложняет проектирование модели.
Общая сеть сегментации имеет симметричную структуру кодирования/декодирования. Слои декодера (светло-зелёный) симметричны слоям кодера (светло-синий). В частности, канальное внимание (channel-wise attention) с пулингом по средней величине (global average) применяется как в блоках кодера, так и в блоках декодера, что снижает нагрузку на CPU.
Архитектура модели с кодером MobileNetV3 (светло-синий) и симметричным декодером (светло-зелёный)
Для кодера мы модифицировали нейросеть MobileNetV3-small, дизайн которой спроектирован автоматически методом поиска сетевой архитектуры для достижения наилучшей производительности на слабом железе. Чтобы вдвое уменьшить размер модели, мы экспортировали её в TFLite с квантованием float16, что привело к небольшой потере точности, но без заметного влияния на качество. В полученной модели 193 тыс. параметров и размер всего 400 КБ.
Эффекты рендеринга
После сегментации мы используем шейдеры OpenGL для обработки видео и рендеринга эффектов. Задача состоит в эффективной визуализации без артефактов. На этапе уточнения совместный билатеральный фильтр сглаживает маску низкого разрешения.
Подавление артефактов при рендеринге. Слева: совместный двусторонний фильтр сглаживает маску сегментации. Посредине: отдельные фильтры удаляют артефакты с ореолами. Справа: замена фона методом световой обёртки
Шейдер размытия имитирует эффект боке, регулируя силу размытия в каждом пикселе пропорционально значениям маски сегментации, подобно пятну рассеяния в оптике. Пиксели взвешиваются по радиусам пятен, так что пиксели переднего плана не будут перетекать в фон. Мы внедрили разделяемые фильтры для взвешенного размытия вместо популярной гауссовой пирамиды, поскольку они удаляют артефакты ореола вокруг человека. Для производительности размытие выполняется с низким разрешением — и смешивается с входным кадром в исходном разрешении.
Примеры размытия фона
При замене фона используется техника, известная как световая обёртка (light wrapping) для наложения сегментированных лиц на индивидуальный фон. Световая обёртка помогает смягчить края сегментации, позволяя фоновому свету проливаться на элементы переднего плана, увеличива реалистичность композиции. Это также помогает минимизировать артефакты ореола, когда возникает большой контраст между передним планом и фоном.
Примеры замены фона
Производительность
Чтобы оптимизировать работу на различных устройствах, мы предоставляем варианты моделей с несколькими размерами входного изображения (например, 256x144 и 160x96 в текущей версии), автоматически выбирая лучший вариант в соответствии с доступными аппаратными ресурсами.
Мы оценили скорость вывода модели и сквозной конвейер на двух популярных устройствах: MacBook Pro 2018 с 6-ядерным процессором Intel Core i7 2,2 ГГц и Acer Chromebook 11 с процессором Intel Celeron N3060. Для ввода 720p MacBook Pro может запускать более качественную модель со скоростью 120 кадров в секунду и сквозной конвейер со скоростью 70 кадров в секунду, в то время как на Chromebook модель работает со скоростью 62 кадра в секунду с моделью более низкого качества, а сквозной конвейер выдаёт 33 FPS.
| Модель |
FLOPS |
Устройство |
Вывод модели |
Конвейер |
| 256x144 |
64 млн |
MacBook Pro 18 |
8,3 мс (120 FPS) |
14,3 мс (70 FPS) |
| 160x96 |
27 млн |
Acer Chromebook 11 |
16,1 мс (62 FPS) |
30 мс (33 FPS) |
Для количественной оценки точности модели используются популярные метрики: коэффициент Жакара (intersection-over-union, IOU) и граничная F-мера (boundary F-score). Обе модели демонстрируют высокое качество работы, особенно на такой легковесной сети:
| Модель |
IOU |
Граничная F-мера |
| 256x144 |
93,58% |
0,9024 |
| 160x96 |
90,79% |
0,8542 |
Мы также выложили в открытый доступ карту модели для сегментации, где подробно указаны спецификации для оценки. В оценочные данные входят изображения из 17 географических субрегионов земного шара с аннотациями для тона кожи и пола. Анализ показал, что модель демонстрирует устойчиво высокий результат на различных регионах, оттенках кожи и полах, с небольшими отклонениями в показателях IOU.
Вывод
Таким образом, мы представили новое браузерное решение ML для размытия и замены фона в Google Meet. Благодаря этому решению модели ML и шейдеры OpenGL показывают эффективную работу в интернете. Разработанные функции обеспечивают производительность в реальном времени при низком энергопотреблении даже на маломощных устройствах.
