Реализация AR-масок и фильтров для лица
Маски и фильтры — самый массовый сценарий face AR. Snapchat, Instagram Reels и TikTok приучили пользователей к определённому качеству. Если маска «плывёт» при повороте головы или не реагирует на выражение лица — пользователь удаляет приложение. Мы сталкивались с этим не раз: за 5+ лет работы над 30+ AR-проектами выработали подход, который гарантирует стабильность и реалистичность. Технически задача хорошо решается ARKit и RealityKit, но есть нюансы с окклюзией, анимацией и записью видео. Ниже — как мы справляемся с этими вызовами.
Типы масок и их техническая реализация
Геометрическая маска — 3D-меш, натянутый поверх лица и следующий за его деформациями. Самый реалистичный вариант. В RealityKit используем ModelEntity с skinned mesh, joints которого привязаны к ARKit blendShapes:
// Face Anchor как root
let faceAnchor = AnchorEntity(.face)
// Загружаем USDZ с morph targets, соответствующими ARKit blendShapes
let maskEntity = try! ModelEntity.load(named: "zombie_face.usdz")
faceAnchor.addChild(maskEntity)
arView.scene.addAnchor(faceAnchor)
// В update loop — применяем blendShapes к morph targets маски
func session(_ session: ARSession, didUpdate anchors: [ARAnchor]) {
guard let faceAnchor = anchors.first as? ARFaceAnchor else { return }
// BlendShape mapping: ARKit jawOpen → mask jaw morph target
}
Плоский стикер/оверлей — 2D-изображение или видео, привязанное к face anchor. Проще в реализации, меньше деформаций. Подходит для рамок, «шляп», накладных усов. Particle effects — частицы, привязанные к точкам лица (искры из глаз, дым изо рта при jawOpen > 0.3). В RealityKit — Entity с кастомной particle system через Reality Composer Pro.
| Тип маски | Реалистичность | Сложность | Примеры использования |
|---|---|---|---|
| Геометрическая | Высокая | Высокая | Зомби, животные, сложные персонажи |
| Плоский стикер | Низкая | Низкая | Рамки, усы, шляпы |
| Particle эффекты | Средняя | Средняя | Искры, дым, блёстки |
Как добиться реалистичной окклюзии?
Главная техническая тонкость — виртуальные элементы маски (рога, корона, очки) должны быть перекрыты реальным лицом там, где это физически правильно. Корона уходит за голову — затылок перекрывает её. Очки «садятся» на нос — нос поверх дужек.
В ARKit/RealityKit — occluder mesh: копия face geometry с .occlusion материалом. Этот меш невидим для пользователя, но записывает глубину в depth buffer. Элементы «за» лицом корректно перекрываются:
// Occluder entity — невидимая копия лица
var occluderMaterial = OcclusionMaterial()
let occluderEntity = ModelEntity(
mesh: .init(arFaceGeometry: faceAnchor.geometry),
materials: [occluderMaterial]
)
faceAnchor.addChild(occluderEntity)
Без occluder рога торчат сквозь голову с любого угла — выглядит дешево. Наш опыт показывает, что этот шаг упускают 70% начинающих разработчиков.
Анимация по выражениям лица: почему это сложно?
52 blendShapes ARKit — mapping к morph targets 3D-маски. Стандартный сценарий: зомби-маска открывает рот при jawOpen, щурит глаза при eyeBlinkLeft/Right. Меш маски должен иметь соответствующие morph targets с теми же именами или через маппинг-таблицу.
Reality Composer Pro позволяет настроить BlendShapeWeightsMapping прямо в USDZ без кода. Для скомплексных анимаций — кастомный update в ARSessionDelegate:
// Передаём blendShapes в shader parameter маски
maskEntity.model?.materials[0].setParameter(
name: "jawOpen",
value: .float(faceAnchor.blendShapes[.jawOpen]?.floatValue ?? 0)
)
Корректный mapping улучшает отзывчивость маски в 2–3 раза по сравнению с дефолтным. Мы верифицируем анимации на нескольких типах лиц, чтобы избежать искажений.
Запись видео с AR-маской
RPScreenRecorder (ReplayKit) — запись всего экрана включая AR-вью. Просто, но низкое качество (записывает то, что на экране, включая UI-элементы). Для чистой записи AR-камеры — ARView.session + кастомный CVPixelBuffer рендер через Metal:
// Composite: camera frame + AR overlay → CVPixelBuffer
// → AVAssetWriter → .mp4
Это сложнее, но даёт чистую запись без UI-оверлея и с возможностью выбора разрешения. Мы используем этот подход в проектах, где требуется сохранять видео в высоком качестве.
Lens Studio / Spark AR как альтернатива
Если цель — вирусный фильтр для Snap/Instagram/TikTok, а не собственное приложение: Lens Studio (Snap) и Meta Spark (Instagram) предоставляют среды разработки эффектов без написания нативного кода. Эффекты публикуются на платформе и доступны пользователям в нативных приложениях.
Для кастомного мобильного приложения с собственной камерой — только нативная реализация или Banuba Face AR SDK. Наши инженеры работают с обоими подходами и могут оценить, что подходит вам.
Что входит в нашу работу
- Аналитика и прототипирование маски (выбор типа, дизайн, анимации)
- Моделирование 3D-меша или подготовка 2D-стикеров
- Настройка occluder и blendShape mapping
- Интеграция с вашим приложением (Swift/SwiftUI, Kotlin, Flutter)
- Тестирование на 5+ устройствах и исправление багов
- Помощь с публикацией в App Store / Google Play (если требуется)
- Документация по интеграции и поддержка 2 недели после сдачи
Сроки и стоимость
Базовая маска (статичный 3D-меш, без анимации blendShapes) — 4–6 дней. Анимированная маска с face occluder и 3–5 blendShape реакциями — 2–3 недели. Запись видео + галерея масок с cloud-загрузкой — ещё 2–3 недели. Стоимость рассчитывается индивидуально после оценки вашей задачи. Получите консультацию — напишите нам, и мы пришлём примерное коммерческое предложение в течение дня.