Виртуальные фоны – сегментация и композит

Кратко

Виртуальный фон и размытый фон начинаются с одного и того же шага: небольшая нейросеть анализирует каждый кадр видео и по пикселям определяет, где вы, а где – окружающая комната. Разница в том, что происходит дальше: размытие просто смягчает существующий фон, а виртуальный фон заменяет его, накладывая новую картинку. Эта вторая операция, называемая композитингом (наложением), – это простая арифметика, смешивающая ваши пиксели с пикселями нового фона вдоль границы трафарета. Сложность в том, что человек, освещённый лампой в спальне, на фоне солнечного пляжа выглядит неестественно, пока шов не будет скрыт. В этой статье мы объясним математику композита простыми словами, почему замена фона выглядит менее естественно, чем размытие, какие приёмы помогают скрыть шов и как внедрить эту функцию в свой видеопродукт.

Почему это важно

Если вы когда-либо включали пляж или книжную полку на фоне в Zoom и замечали мерцание у ушей или ореол вокруг волос – эта статья объясняет, что именно идёт не так и почему. Если вы разрабатываете софт – будь то продакт-менеджер, основатель или инженер, добавляющий видео в продукт, – виртуальные фоны входят в число самых востребованных функций камеры. На первый взгляд их легко реализовать на 80%, но последние 20% оказываются неожиданно сложными. Та же технология сегментации лежит в основе размытия фона, виртуальных фонов, beauty-фильтров и живых AR-эффектов, так что навыки, которые вы освоите здесь, применимы ко всему семейству подобных функций. Правильный композит – вот что отличает профессионально выглядящую функцию от вырезки, приклеенной к плакату.

Тот же трафарет, другая краска

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

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

Именно общий первый шаг объясняет, почему эти две функции всегда появляются вместе. Google добавил размытие и замену фона в Google Meet одним релизом в 2020 году – обе на основе одной и той же модели сегментации MediaPipe, работающей прямо в браузере. Если у вас уже есть одна из них, добавить вторую почти ничего не стоит. Подробности о модели – как её обучают, насколько она компактна и насколько быстро работает – вы найдёте в нашем уроке про MediaPipe Selfie Segmentation; эта статья – про краску.

Нажмите, чтобы увеличить

Шаг композита: смешать две картинки вдоль края

Композитинг – это процесс объединения переднего плана (вас) с фоном (новым изображением) в единый кадр. Маска определяет, от какого источника брать каждый пиксель. Там, где маска полностью белая, выходной пиксель на 100% берётся из вас. Где маска полностью чёрная – пиксель на 100% берётся из нового фона. Самое интересное – граница, где маска не чисто белая и не чисто чёрная, а находится где-то посередине.

Это промежуточное значение называется альфа – число от 0 до 1, показывающее, какую часть переднего плана нужно сохранить. Альфа 1 означает «весь человек», альфа 0 – «весь фон», а альфа 0,6 – «60% человека, 40% фона». Формула смешивания – одна из самых старых и надёжных в компьютерной графике, оператор over, опубликованный Томасом Портером и Томом Даффом в 1984 году:

output = foreground × alpha + background × (1 − alpha)

Покажем математику вслух один раз – и она перестанет быть абстрактной. Представьте один пиксель прямо на краю вашего плеча, где трафарет наполовину включён. Модель присваивает ему альфа-значение 0,6. Красный канал вашего плеча в этой точке равен 200; красный канал нового пляжного фона – 50. Композитор вычисляет:

output red = 200 × 0,6 + 50 × (1 − 0,6)
           = 120 + 20
           = 140

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

Есть практическая тонкость, которую стоит знать – она часто приводит к ошибкам. Многие графические системы хранят цвета, уже умноженные на альфу, в формате, называемом premultiplied alpha (предумноженная альфа), поскольку это ускоряет операцию over и устраняет тёмную кайму при масштабировании. Если передний план предумножен, а фон – нет, или наоборот, вокруг объекта появится характерный тёмный или светлый ореол. Согласовать их – правка в одну строку, как только знаешь, где искать, и загадочный визуальный дефект, пока не знаешь.

Нажмите, чтобы увеличить

Почему виртуальный фон выглядит фальшивее размытия

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

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

Первая улика – край. Бинарная маска, полностью белая или чёрная без переходов, создаёт жёсткий контур, как у формочки для печенья. На фоне размытой копии той же комнаты такой чёткий край незаметен, потому что обе стороны выглядят одинаково. Но на фоне резкого контрастного пляжа тот же самый жёсткий край выглядит как наклейка. Решение – растушевать край: пусть альфа плавно спадает от 1 до 0 на нескольких пикселях – как на Рисунке 2 – и, что ещё лучше, использовать alpha matting (альфа-матирование) вместо обычной сегментации. Маска сегментации помечает каждый пиксель как «человек» или «не человек»; альфа-маттинг оценивает дробную прозрачность для каждого пикселя, и именно это позволяет сохранить отдельные пряди волос, которые жёсткая маска срезает. Телефоны Google Pixel перешли от сегментации к альфа-матированию в портретных селфи именно по этой причине.

Вторая улика – несовпадение цвета и освещения. Ничто в простом композите не заставляет тёпло освещённое лицо гармонировать с холодно освещённым фоном. Продвинутые конвейеры измеряют общий цвет фона и подстраивают под него передний план или добавляют слабую цветовую кайму фона вокруг человека.

Эта кайма – третье решение, и у неё есть название: light wrapping (обтекание светом). Google Meet использует его именно для замены фона. Light wrapping позволяет части света с фона «перелиться» на край переднего плана – так свет будто огибает человека, стоящего в кадре. Это смягчает границу сегментации и, когда передний план и новый фон резко различаются по яркости, помогает избежать ореола, который мог бы возникнуть. Это самый эффективный способ сделать так, чтобы вклеенный человек выглядел так, будто его действительно сняли на месте.

Третья улика – spill (засветка цветом) – зеркальное отражение light wrapping и особенно важно при работе с зелёным экраном. Это приводит нас к чит-коду.

Чит-код «зелёный экран»

Всё выше – это трудный путь: просить нейросеть угадать ваш контур на обычной, захламлённой сцене. Есть лёгкий путь, которым киноиндустрия пользуется десятилетиями. Встаньте перед однотонным, равномерно освещённым фоном – классически зелёным – и вопрос «какие пиксели фон» перестаёт быть угадыванием. Любой зелёный пиксель – фон; всё остальное – вы. Это chroma key (цветовая рирпроекция), и она настолько надёжна, что не требует нейросети вовсе – лишь сравнение цвета.

Поэтому Zoom предлагает режим виртуального фона «с зелёным экраном». Когда вы указываете Zoom, что у вас есть зелёный экран, программа переключается с ML-сегментации на chroma key – изображение получается чище, границы резче, а сам процесс настолько лёгкий, что работает даже на слабом железе, не справляющемся с ML-обработкой. Собственные рекомендации Zoom это подтверждают: без зелёного экрана функция требует мощного процессора, а с ним – работает на куда более скромных машинах. Для постоянной студии – ведущего регулярных вебинаров, телемедицинского врача, отдела продаж, который записывает демо – зелёная ткань за сорок долларов зачастую превосходит любую программную хитрость.

Цена зелёного экрана – единственный недостаток, которого нет у ML-сегментации: spill. Зелёный свет отражается от ткани и подкрашивает края волос и плеч, поэтому композиту требуется этап spill suppression (подавление засветки), который выявляет и нейтрализует это загрязнение. Это решённая задача, но о ней приходится думать только при использовании физического экрана.

Таблица 1. Три способа изменить фон за объектом. Колонки «размытие» и «ML-замена» используют общий движок сегментации; «зелёный экран» заменяет его на сравнение цвета – дешевле и резче, но требует физического экрана.

Встроить в свой продукт

Если вы добавляете виртуальные фоны в веб-видеопродукт, у вас уже почти готов конвейер – при условии, что вы реализовали размытие, потому что архитектура совпадает до финального шейдера. Вы подключаетесь к потоку камеры в точке сырых кадров – там, где каждый кадр ещё представлен несжатыми пикселями – через браузерный MediaStreamTrackProcessor, чтобы читать кадры, и MediaStreamTrackGenerator, чтобы возвращать изменённые кадры в звонок. Между ними – ваш transform: сегментировать кадр, получить маску, а затем наложить изображение фона под человека по этой маске.

// Берём кадр камеры, сегментируем, накладываем выбранный фон, возвращаем обратно.
const processor = new MediaStreamTrackProcessor({ track: cameraTrack });
const generator = new MediaStreamTrackGenerator({ kind: "video" });

const transformer = new TransformStream({
  async transform(frame, controller) {
    const mask = await segmenter.segment(frame);       // человек или фон
    const output = composite(frame, bgImage, mask);    // вы поверх нового изображения
    controller.enqueue(output);
    frame.close();                                     // освобождаем память каждый кадр
  },
});

processor.readable.pipeThrough(transformer).pipeTo(generator.writable);
const virtualBgStream = new MediaStream([generator]);  // это и шлём в звонок

Делайте шаг composite на GPU – графическом чипе, созданном специально для такого попиксельного смешивания. Композитинг там дешёв: для каждого выходного пикселя шейдер читает один пиксель переднего плана, один пиксель фона и одно значение alpha, после чего применяет формулу over. Часто это требует меньше вычислений, чем качественное размытие, которому нужно усреднять множество соседних пикселей – поэтому виртуальный фон может обрабатываться чуть быстрее, чем размытие на том же устройстве. Оба варианта всё равно должны уложиться в бюджет 33 миллисекунды, отведённые на один кадр при частоте 30 кадров в секунду; наш урок про бюджет задержки подробно разбирает эти ограничения, а ваш video SDK определяет, доберётесь ли вы вообще до стадии обработки сырых кадров.

Несколько деталей отличают чистый результат от грубого. Загрузите изображение фона на GPU один раз, а не каждый кадр – оно не меняется, и повторная отправка съедает весь бюджет. Определите, как изображение войдёт в кадр: фото 16:9 на камере 4:3 нужно обрезать «по покрытию», иначе ваш пляж растянется в кашу, поэтому большинство приложений масштабируют по покрытию и центрируют. Не забудьте про зеркало: ваш self-view обычно отражён, поэтому любой текст на фоне будет читаться задом наперёд, если это не обработать. А если вы предлагаете видео-фон – например, зацикленный океан – держите его маленьким и заранее декодированным, потому что декодирование второго видеопотока съедает те же 33 мс.

Три ошибки из размытия возвращаются здесь, плюс одна новая. Растушуйте край маски, чтобы контур не выглядел жёсткой линией, оставшейся от формочки. Смешивайте каждую маску с предыдущим кадром, чтобы край не мерцал при смене кадров. Закрывайте каждый VideoFrame, иначе вкладка будет расходовать память и упадёт за считанные минуты. Новая – несовпадение premultiplied alpha с Рисунка 2: держите передний план и фон в одной альфа-конвенции, иначе придётся гоняться за ореолом полдня.

Нажмите, чтобы увеличить

О доверии и раскрытии

Виртуальный фон – это косметика, но он же и первый шаг к тому, чтобы видеопоток показывал то, чего на самом деле нет. Замена комнаты выглядит безобидной, но тот же механизм, доведённый до совершенства, переходит в область изменённого или синтетического видео. Если ваш продукт выходит за рамки простой замены – например, начинает искажать человека или место, – становятся важными правила раскрытия, которые мы разбираем в уроке про C2PA и Статью 50 EU AI Act. А поскольку функция основана на обнаружении человека, граница, где обнаружение переходит в распознавание – то есть определение, кто именно перед камерой, – регулируется нормами из урока про обнаружение лиц и EU AI Act. Сама по себе замена фона находится далеко от этих границ, но она открывает путь к ним.

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

Нажмите, чтобы увеличить

Где здесь Фора Софт

Мы делаем real-time видеопродукты с 2005 года – видеоконференции, WebRTC-приложения, e-learning, телемедицину и прямые трансляции, – и виртуальные фоны входят в число функций камеры, которые клиенты просят чаще всего. Работа редко в самом композите; она – в том, чтобы шов оставался незаметным на тысячах камер, схем освещения и причёсок, не разряжая батарею и не мерцая на пятилетнем ноутбуке. В телемедицине, где виртуальный фон защищает дом пациента, и в брендированных вебинарах, где фон несёт логотип, который не должен искажаться, разница между убедительным композитом и картонной вырезкой – в наборе инженерных решений, принятых заранее: качество матте, light wrap, логика вписывания и стоит ли рекомендовать зелёный экран. Мы помогаем командам выбрать модель, чип и конвейер, чтобы функция, лёгкая в демо, работала и в реальных условиях.

Ключевые выводы

• Виртуальный фон использует ту же маску сегментации, что и размытие; отличается только финальный цвет.
• Композит строится по одной формуле: output = foreground × alpha + background × (1 − alpha).
• Замена фона выглядит менее естественно, чем размытие, потому что человек и новая сцена освещены по-разному.
• Растушёвка, alpha matting, light wrapping и подгонка цвета помогают скрыть переход.
• Зелёный экран заменяет ML-обработку на дешёвый, но резкий chroma key – ценой зелёной засветки.
• Обрабатывайте кадры на GPU в реальном времени; загружайте фон один раз и накладывайте его на каждый кадр.

Что почитать дальше

• Как размыть фон в Zoom, Teams и на iPhone – инженерный разбор
• MediaPipe Selfie Segmentation с WebGPU – размытие фона в продакшене
• Beauty-фильтры, коррекция взгляда и AR-эффекты – конвейер MediaPipe