Реалізація 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 тижні. Вартість розраховується індивідуально після оцінки вашого завдання. Отримайте консультацію — напишіть нам, і ми надішлемо приблизне комерційне пропозицію протягом дня.