Бьюти-фильтры, коррекция взгляда и AR-эффекты – конвейер MediaPipe

Автор: Николай СапуновОбновлено: август 202618 мин чтения
Содержание статьи +

Кратко

Бьюти-фильтры, коррекция взгляда и эффекты дополненной реальности выглядят как разные функции, но работают на одном фундаменте: на построенной в реальном времени карте лица из нескольких сотен отслеживаемых точек – чаще всего её строит бесплатный MediaPipe Face Landmarker от Google. В этой статье мы разбираем эту общую карту, а затем показываем, как каждый эффект её использует – бьюти-фильтр сглаживает кожу и сдвигает точки лица, коррекция взгляда перерисовывает глаза так, чтобы они смотрели в камеру, а AR-эффект «приклеивает» 3D-объект к лицу, – и где все три эффекта физически подключаются внутри WebRTC-звонка. Мы разбираем единственное число производительности, от которого зависит, можно ли этим вообще пользоваться (бюджет времени на кадр), выбор «строить или покупать» между MediaPipe и коммерческими SDK вроде Banuba, Snap Camera Kit и DeepAR, и развилку для коррекции взгляда между NVIDIA Maxine и встроенной функцией Apple. В конце – регуляторная черта, которую нельзя переходить: по EU AI Act украшать лицо можно, а считывать его выражения, чтобы определить эмоцию, – уже под регулированием, а на работе и в школе запрещено.

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

Если ваш продукт показывает лицо человека на камере – видеоконференция, телемедицина, виртуальный класс, дейтинг-приложение, live-шопинг – пользователи теперь ждут тех же эффектов, что есть в Snapchat и TikTok: выгодного фильтра, глаз, смотрящих в камеру, виртуальной шляпы или очков, которые можно примерить. Эти функции кажутся «вишенкой на торте», но именно они решают, включит ли человек камеру вообще, – а это разница между живым звонком и сеткой чёрных квадратов. Эта статья для продакт-менеджера, основателя или техлида, которому нужно решить, строить ли эти эффекты, покупать или пропустить, и который должен говорить с инженерами о стоимости, производительности и юридическом риске, не теряясь в деталях. К концу вы поймёте единственную технологию под всеми тремя эффектами, где она работает в реальном звонке, во что обходится в миллисекундах и лицензионных платежах, и какая конкретно норма превращает безобидный бьюти-фильтр в проблему комплаенса в момент, когда он пытается считать настроение. О смежной задаче – замене фона за лицом – читайте в статьях про размытие фона и виртуальные фоны; эта статья – об эффектах на самом лице.

Одна Карта, Три Задачи

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

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

Каждый эффект читает одну и ту же карту по-своему. Бьюти-фильтр по мешу понимает, какие пиксели – это кожа (их сглаживаем), а какие точки образуют челюсть или нос (их сдвигаем). Коррекция взгляда по карте находит маленький прямоугольник вокруг глаз и перерисовывает только этот участок. AR-эффект по 3D-форме карты и её ориентации ставит виртуальный объект так, чтобы он сидел на лице под правильным углом. Одна карта – три задачи.

Рисунок 1. Общий фундамент: одна карта ориентиров лица в реальном времени питает бьюти-фильтры, коррекцию взгляда и AR-эффекты одинаково.

Сама Карта: MediaPipe Face Landmarker

Самый распространённый способ построить эту карту бесплатно – инструмент Google под названием MediaPipe Face Landmarker. MediaPipe – это открытый набор готовых, работающих на устройстве функций машинного обучения для видео; Face Landmarker – та из них, что находит и ведёт лица. Он работает на телефонах, в браузерах и на серверах и является отправной точкой по умолчанию для команд, которые строят эффекты на лице, не платя вендору.

Face Landmarker выдаёт из каждого кадра три вещи, и понимание их говорит вам ровно то, с чем работают ваши эффекты. Первая – меш: оценка из 478 трёхмерных точек на лице. На этом числе стоит остановиться: 468 из них покрывают поверхность лица, а оставшиеся 10 сидят на глазах, по пять на глаз, отслеживая цветное кольцо под названием радужка (iris), от которого зависят эффекты со взглядом. Исходный меш из 468 точек вышел из статьи Google Research 2019 года, которая показала, что одна небольшая нейросеть может вывести настолько плотную форму лица в реальном времени на телефоне; точки радужки добавили позже, доведя сумму до 478.

Второй выход – набор из 52 коэффициентов blendshape. Blendshape – это число от 0 до 1, измеряющее, насколько сейчас происходит одно конкретное выражение: насколько открыт рот, насколько поднята левая бровь, насколько улыбается рот. Пятьдесят два таких вместе описывают текущее выражение лица как список «ручек». Именно этот выход управляет мультяшным аватаром, повторяющим ваше лицо, и, как мы увидим, именно он привлекает внимание регулятора.

Третий выход – матрица преобразования (transformation matrix): компактный блок чисел, описывающий, как лицо расположено в пространстве – повёрнуто влево, наклонено вверх, склонилось к камере или от неё. AR-эффекту она нужна, чтобы поставить виртуальный объект под правильным углом. Вместе эти три выхода – меш из 478 точек, 52 «ручки» выражения и матрица положения – это всё, что читают три эффекта.

Рисунок 2. Внутри MediaPipe Face Landmarker: детектор находит лицо, модель меша выдаёт 478 ориентиров, ещё два выхода дают коэффициенты выражения и положение головы.

Как На Самом Деле Работает Бьюти-Фильтр

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

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

Изменение формы – вторая операция, и это геометрия. Поскольку фильтр держит лицо как меш точек, он может немного сдвинуть выбранные точки и растянуть изображение вслед за ними. Чтобы сузить челюсть, он тянет точки линии челюсти внутрь; чтобы увеличить глаза, толкает точки вокруг каждого глаза наружу. Сдвиги маленькие, и в этой малости – всё мастерство. Допустим, лицо шириной 400 пикселей, и фильтр сужает челюсть на три процента этой ширины. Математика в одну строку:

сдвиг челюсти = 3% × 400 px
сдвиг челюсти = 0.03 × 400
сдвиг челюсти = 12 px внутрь с каждой стороны

Двенадцати пикселей хватает, чтобы прочесть «уже», и достаточно мало, чтобы человек всё ещё был похож на себя. Доведите до тридцати процентов – и получите тот самый «поплывший» неестественный вид, на который жалуются. Хороший бьюти-фильтр живёт в этой узкой полосе, и именно полоса делает «деликатность» инженерной целью, а не просто вопросом вкуса.

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

Коррекция Взгляда: Глаза, Смотрящие В Камеру

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

Это выходит в продукт двумя способами, и разница важна для того, что вы строите. Первый – облачная или серверная функция, и самый ясный пример – NVIDIA Maxine Eye Contact. Она работает так: вырезает маленький прямоугольник вокруг ваших глаз – «глазной патч» (eye patch) – с помощью шага отслеживания лица, который находит ориентиры глаз и угол головы. Затем нейросеть оценивает, куда ваши глаза на самом деле направлены, синтезирует версию, смотрящую в камеру, и вживляет этот патч обратно в кадр. Приятная деталь показывает заложенную в неё аккуратность: когда ваш взгляд уходит слишком далеко, эффект плавно возвращается к вашим настоящим глазам, а не «прыгает», поэтому это никогда не выглядит как глюк. Maxine работает на видеокартах NVIDIA – значит, вы либо ставите её на машину пользователя с NVIDIA, либо запускаете на своих серверах; тот же вопрос «строить или покупать», который мы разбираем в статье про Krisp, Maxine и Dolby.

Второй способ – телефон делает это за вас. На iPhone функция Apple под названием Eye Contact в FaceTime использует фронтальную камеру TrueDepth – тот же датчик глубины, что стоит за Face ID, – чтобы построить 3D-карту вашего лица, найти глаза и подправить их в реальном времени. Она уже годами включена по умолчанию на свежих iPhone. Загвоздка для разработчика продукта в том, что это помогает только внутри FaceTime и только на железе Apple; вызвать её из своего веб-приложения нельзя. Поэтому практическое правило простое: если ваши пользователи в вебе или на разных устройствах и вам нужна коррекция взгляда везде – берёте модель вроде Maxine; если они оказались в FaceTime на свежем iPhone – Apple уже всё сделала, и вы не делаете ничего.

AR-Эффекты: Привязка Объектов К Лицу

Третий эффект – это то, что люди имеют в виду под «фильтрами» в игривом смысле: виртуальные очки, шляпа, собачьи уши, примеренный оттенок помады. Внутри стандартов W3C, управляющих веб-медиа, у всей этой категории есть очаровательное официальное название – кейс «Funny Hats» («смешные шляпы»). Инженерная суть – привязка: удержать виртуальный объект «приклеенным» к лицу, пока оно движется и поворачивается.

Здесь 3D-форма меша и матрица преобразования отрабатывают своё место. Чтобы поставить виртуальные очки, эффект читает точки-ориентиры переносицы и висков, читает угол головы из матрицы преобразования и рисует модель очков в этой позиции и под этим наклоном. Когда вы поворачиваете голову, матрица обновляется, и очки поворачиваются с вами, потому что приколоты к карте, а не нарисованы на фиксированном месте экрана. Blendshape добавляют жизни сверху: если эффект заставляет рот вашего аватара открываться, когда открывается ваш, он читает коэффициент blendshape «рот открыт» и подаёт его рту аватара.

Отрисовка объекта – это графическая задача, и в вебе она работает на технологии WebGPU – браузерном стандарте, в 2026 году вышедшем на широкую поддержку в Chrome, Safari и Firefox, который позволяет веб-странице напрямую использовать видеокарту компьютера. Карта лица говорит где и под каким углом; WebGPU рисует объект достаточно быстро, чтобы успевать за живым видео. Та же механика стоит за функциями «виртуальной примерки» (virtual try-on) в e-commerce косметики и оптики – это AR-эффекты на лице в коммерческой обёртке.

Где Всё Это Работает В WebRTC-Звонке

Решить, какой эффект вы хотите, – лёгкая половина. Встроить его в живой браузерный звонок – та половина, на которой команды спотыкаются, и сводится она к одной современной возможности браузера. WebRTC, технология, позволяющая браузерам напрямую обмениваться аудио и видео, исторически отдавала вашу камеру прямо в сеть, не оставляя вашему коду места, чтобы тронуть картинку. Решение – стандарт под названием Insertable Streams, описанный в документе W3C «MediaStreamTrack Insertable Media Processing using Streams».

У схемы три части, и понять её стоит даже на высоком уровне, потому что она определяет стоимость и качество. Часть под названием MediaStreamTrackProcessor берёт поток с камеры и выдаёт его как поток отдельных кадров, которые ваш код может читать, – каждый из них объект VideoFrame, стандартный контейнер для одной картинки. Ваш код обрабатывает каждый кадр: запускает на нём Face Landmarker, затем сглаживает, перерисовывает или рисует ваш объект. Вторая часть, VideoTrackGenerator, берёт ваши готовые кадры и превращает их обратно в обычный трек камеры, который WebRTC может отправить. Камера входит как кадры, ваш эффект отрабатывает, кадры выходят обратно – и дальний конец видит эффект, а не сырую камеру.

Одна деталь стандарта – тихое правило, решающее, останется ли ваше приложение плавным: эта обработка должна идти в воркере (worker) – фоновом потоке, отдельном от того, что рисует кнопки и меню вашего приложения. Тяжёлая работа над каждым кадром в главном потоке морозит интерфейс; та же работа в воркере оставляет приложение отзывчивым. Собственные примеры стандарта помещают обработку именно в воркер по этой причине. Более широкий набор этих браузерных ИИ-хуков – Insertable Streams, Encoded Transform, WebGPU – тема нашей статьи про ИИ-интеграцию в WebRTC; здесь смысл уже: это слот, в котором живёт ваш эффект на лице.

Рисунок 3. Где эффект на лице подключается в WebRTC: кадры вытягиваются через MediaStreamTrackProcessor, преобразуются в воркере и собираются обратно в отправляемый трек через VideoTrackGenerator.

Единственное Число, Решающее Всё: Бюджет На Кадр

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

время на кадр = 1000 мс ÷ 30 fps
время на кадр = 33.3 мс

То есть у вас около 33 миллисекунд – треть от одной десятой секунды – чтобы прочитать кадр, найти лицо, применить эффект и вернуть кадр. Всё, что вы добавляете, тратится из этого бюджета. Поиск ориентиров – самая дорогая часть, и здесь выбор железа решающий: запустите Face Landmarker на центральном процессоре – и браузер обычно тянет лишь 10–15 кадров в секунду, что выносит бюджет; перенесите на видеокарту – и он спокойно берёт 60 кадров в секунду с запасом. Исследование 2019 года, лежащее за мешем лица, сообщало о сотнях кадров в секунду на мобильных графических чипах для голой модели, так что узкое место – редко сама модель; узкое место – позволили ли вы ей использовать видеокарту.

Вот почему деталь про WebGPU выше – не сноска. Считать математику лица на видеокарте – это то, что удерживает вас внутри бюджета в 33 миллисекунды с запасом на отрисовку и кодирование. Команда, которая запускает landmarker на центральном процессоре «чтобы проще», выпускает дёргающийся звонок; та же команда на видеокарте – плавный. Полную картину того, как тратится каждая миллисекунда живого звонка, смотрите в статье про бюджет задержки до 100 миллисекунд – эффекты на лице это одна статья расходов в этом бюджете, и прожорливая.

Рисунок 4. Бюджет в 33 миллисекунды при 30 fps: поиск лица доминирует в стоимости, и перенос его на видеокарту – это то, что удерживает весь эффект внутри дедлайна.

Строить На MediaPipe Или Купить SDK?

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

Строить на MediaPipe – значит получить карту ориентиров бесплатно и написать логику бьюти, взгляда или AR самому. Вы владеете результатом, не платите за каждого пользователя и держите всё видео на устройстве пользователя – это реальное преимущество приватности для телемедицины и подобных областей. Цена – инженерное время и отсутствие библиотеки контента: MediaPipe даёт карту, а не каталог готовых линз. Купить SDK у вендора вроде Banuba, Snap Camera Kit или DeepAR – значит получить карту плюс библиотеку готовых фильтров, инструмент для создания новых и кросс-платформенную поддержку в обмен на лицензионную плату и зависимость от этого вендора.

Вендоры отличаются важными деталями. Snap Camera Kit приносит в ваше приложение саму технологию линз Snapchat и его огромную экосистему авторов – ценой процесса одобрения и меньшего контроля. Banuba нацелена на быстрый коммерческий запуск с предсказуемой ценой за платформу, которая не растёт с числом пользователей. DeepAR предлагает оплату по использованию, начинающуюся с малого. Коррекция взгляда стоит чуть особняком от этой группы: это не столько «фильтр», сколько одна специализированная модель – поэтому она обычно приходит от NVIDIA Maxine или, бесплатно на железе Apple, от самого телефона.

ВариантЧто получаетеВо что обходитсяКому подходитНа что смотреть
Строить на MediaPipe Face LandmarkerБесплатная карта из 478 точек; эффекты пишете самиИнженерное время; нет библиотеки фильтровПриватность на устройстве, кастомные эффекты, без платы за пользователяЛогику эффектов строите и поддерживаете сами
Snap Camera KitЛинзы Snapchat + редактор Lens StudioЛицензия; процесс одобренияПотребительские приложения, которым нужны проверенные вирусные линзыБарьер одобрения; меньше низкоуровневого контроля
Banuba Face AR SDKКарта + библиотека фильтров, кросс-платформаЛицензия за платформуБыстрый запуск на iOS/Android/WebСтоимость лицензии против бесплатного MediaPipe
DeepARКарта + фильтры лица/тела, веб + мобильныеОплата по использованиюНебольшие команды, начинающие с малогоОпределённость дорожной карты вендора
NVIDIA Maxine Eye ContactМодель коррекции взглядаGPU + лицензияКоррекция взгляда в вебе/на разных устройствахНужны видеокарты NVIDIA (клиент или сервер)
Apple FaceTime Eye ContactВстроенная коррекция взглядаБесплатно, встроеноНативный FaceTime на свежих iPhoneТолько FaceTime; вызвать нельзя

Читайте таблицу по своим ограничениям. Если эффекты кастомны и важна приватность – строить на MediaPipe это честный выбор по умолчанию. Если хотите библиотеку линз в проде на следующей неделе – SDK отрабатывает свою плату. Если нужна только коррекция взгляда – относитесь к ней как к отдельному маленькому решению между Maxine и «телефон уже это делает».

Частая Ошибка: Обработка В Главном Потоке

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

Симптом характерный и его легко неверно истолковать. Эффект «работает» в быстром тесте на мощном ноутбуке, потом разваливается на обычной машине пользователя, и команда винит модель и идёт искать более быструю. Настоящее лекарство структурное: перенести обработку в воркер – фоновый поток, который стандарт Insertable Streams и ожидает использовать. Модели не нужно быть быстрее; работе нужно уйти с потока, который рисует экран. Команды, выучившие это однажды, больше не забывают, а те, кто это пропускает, выпускают функцию, которая хорошо смотрится в демо и проваливается в реальном мире.

Регуляторная Черта, Которую Нельзя Переходить

Есть место, где эффект на лице перестаёт быть косметической функцией и становится регулируемой, и перейти его случайно – реальный риск. AI Act Европейского союза – всеобъемлющий закон ЕС об ИИ, формально Регламент (ЕС) 2024/1689 – проводит резкую черту между изменением того, как лицо выглядит, и считыванием того, что лицо чувствует.

Украшение, коррекция взгляда и виртуальная шляпа на лице не регулируются как рискованный ИИ; они меняют внешний вид и не делают о человеке никаких выводов. Но вспомните 52 коэффициента blendshape – «ручки», измеряющие, насколько лицо улыбается, хмурится или поднимает бровь. В момент, когда система использует эти сигналы, чтобы вывести эмоциональное состояние – «пользователь, кажется, рад», «студент выглядит незаинтересованным», – она становится системой распознавания эмоций в терминах закона, а эта категория несёт жёсткие правила. Использование распознавания эмоций на рабочих местах и в школах прямо запрещено, с узкими исключениями, и этот запрет действует с февраля 2025 года. Даже там, где это разрешено, с августа 2026 года любого, кто подвергается такой системе, нужно об этом уведомить – до того, как она заработает.

Практический вывод – это граница, против которой проектируют, а не повод избегать технологии. Читайте лицо, чтобы его перерисовать, – и вы в безопасной зоне. Читайте лицо, чтобы судить о чувствах человека – оценка вовлечённости в e-learning-продукте, определение настроения на собеседовании – и вы зашли в самую строгую зону AI Act. О смежных правилах детекции и распознавания лиц наша статья про распознавание лиц под EU AI Act разбирает «личностную» сторону того же закона. Ничто из этого не юридический совет – это карта того, куда отправить собственного юриста, прежде чем выпускать эффект, трогающий выражение.

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

Мы строим продукты живого видео, где эти эффекты встречаются в реальном использовании – платформы видеоконференций, телемедицинские консультации, e-learning-классы, дейтинг- и соцприложения, AR/VR-опыты – и относимся к бьюти, взгляду и AR как к одной способности с тремя лицами, а не как к трём функциям. Паттерн, который мы применяем, – тот, что отстаивает эта статья: построить карту ориентиров один раз, держать покадровую работу в воркере на видеокарте, чтобы звонок оставался плавным, и выбирать «строить или покупать» под каждый продукт – бесплатный MediaPipe, когда эффекты кастомны и важна приватность, вендорский SDK, когда запуску нужна библиотека линз уже на следующей неделе. По коррекции взгляда решаем по платформе: доверяем телефону там, где он уже делает работу, и берём серверную модель там, где пользователи в вебе. И черту распознавания эмоций проводим рано, потому что в телемедицине и e-learning соблазн «измерить вовлечённость» – ровно то место, где полезная функция может стать регулируемой.

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

  • Бьюти-фильтры, коррекция взгляда и AR-эффекты работают на одной общей карте ориентиров лица.
  • MediaPipe Face Landmarker даёт эту карту бесплатно: 478 точек, 52 коэффициента выражения, матрица положения.
  • Бьюти-фильтр – это сглаживание кожи с сохранением границ плюс малое, аккуратное изменение точек лица.
  • В WebRTC эффекты подключаются через Insertable Streams и должны идти в воркере на видеокарте.
  • Жёсткий предел – бюджет на кадр: около 33 мс при 30 fps; влезть в него помогает именно видеокарта.
  • По EU AI Act менять лицо можно; считывать его эмоцию – регулируется, а на работе и в школе запрещено.

Что Почитать Дальше

Строите такую систему?

Подберём параметры кодирования под ваш контент и посчитаем стоимость доставки до старта разработки.