Розроблення AR-приміри товарів для інтернет-магазину
AR-приміра (Augmented Reality try-on) дозволяє користувачеві віртуально «надягти» або «розмістити» товар у своїй реальності через камеру пристрою. Це зменшує відсоток повернень та підвищує конверсію в категоріях, де зовнішній вигляд критичний: окуляри, косметика, меблі, взуття. Технічно, AR у браузері — непроста задача: тут перетинаються комп'ютерний зір, 3D-рендеринг та обмеження WebAPI.
Типи AR-приміри та технологічна база
Face AR (обличчя): окуляри, сонячні окуляри, маски, макіяж, головні убори. Основа — виявлення орієнтирів обличчя (468 точок MediaPipe Face Mesh). Найбільш зріла технологія для браузера.
Body AR: приміра одягу та взуття на все тіло. Вимагає оцінки пози (MediaPipe Pose / BlazePose). Складніше через деформацію тканин та варіативність поз.
Room AR (розміщення в просторі): меблі, декор, техніка в інтер'єрі. Базується на виявленні площин — пошуку горизонтальних поверхонь (підлога, стіл) через SLAM чи датчики глибини.
Hand AR: кільця, годинники, браслети. MediaPipe Hands (21 ключова точка на кожну руку).
Face AR — технічна реалізація
Найчастіший випадок — приміра окулярів. Стек:
Камера → getUserMedia()
→ MediaPipe FaceMesh → 468 точок орієнтирів
→ Three.js / Babylon.js → 3D-модель окулярів (GLTF)
→ Вирівнювання моделі по точкам обличчя (ніс, скроні, вуха)
→ Рендеринг поверх відеопотоку
→ Відображення в <canvas>
MediaPipe FaceMesh працює у браузері через WASM + WebGL. Продуктивність: ~30 FPS на сучасному смартфоні, ~60 FPS на десктопі з GPU.
import { FaceMesh } from '@mediapipe/face_mesh';
import { Camera } from '@mediapipe/camera_utils';
const faceMesh = new FaceMesh({
locateFile: file => `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/${file}`
});
faceMesh.setOptions({
maxNumFaces: 1,
refineLandmarks: true,
minDetectionConfidence: 0.7,
minTrackingConfidence: 0.7,
});
faceMesh.onResults(results => {
if (!results.multiFaceLandmarks.length) return;
const landmarks = results.multiFaceLandmarks[0];
// Ключові точки для окулярів:
const noseBridge = landmarks[6]; // перенісся
const leftTemple = landmarks[234]; // ліва скронь
const rightTemple = landmarks[454]; // права скронь
const leftEar = landmarks[93]; // ліве вухо
const rightEar = landmarks[323]; // праве вухо
updateGlassesModel({ noseBridge, leftTemple, rightTemple, leftEar, rightEar });
});
Вирівнювання 3D-моделі по точкам обличчя:
- Обчислюємо центр, кут нахилу та масштаб з координат скроней та переніссяЗастосовуємо трансформації до 3D-об'єкту:
position,rotation,scale - Рендеримо через Three.js поверх відеопотоку (canvas overlay з
mix-blend-mode: multiplyабо прозорим тлом)
3D-моделі для AR
Вимоги до GLTF-моделей для AR-приміри:
- Polycount: до 10 000 трикутників — інакше рендеринг в реальному часі гальмує
- Текстури: 512×512 або 1024×1024, PBR-матеріали (metalness/roughness)
- Розміри в метрах: фізично коректні, щоб масштабування по точкам обличчя давало реалістичний результат
- LOD: дві версії — детальна для десктопа, спрощена для мобайла
Для кожного продукту (кожної пари окулярів) — окремий GLTF-файл. При каталозі 500 артикулів — 500 моделей. Це основна операційна складність: моделювання контенту, а не розроблення віджету.
Альтернатива повному 3D: 2D layer overlay — вирізане зображення накладається поверх відео з деформацією по точкам обличчя. Менш реалістично, але моделі готуються в Photoshop, а не у 3D-редакторі.
Косметика (віртуальний макіяж)
Для губної помади, румян, тіней — інший підхід: не 3D-модель, а розфарбовування областей обличчя за маскою.
// Отримуємо маску губ з точок orієнтирів
const lipPoints = [61, 185, 40, 39, 37, 0, 267, 269, 270, 409, 291, ...];
const lipPath = lipPoints.map(i => landmarks[i]);
// Малюємо на canvas поверх відео
ctx.beginPath();
lipPath.forEach((point, i) => {
const x = point.x * canvas.width;
const y = point.y * canvas.height;
i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
});
ctx.closePath();
ctx.globalAlpha = 0.6;
ctx.fillStyle = selectedColor; // колір вибраної помади
ctx.fill();
Реалістичність підвищується через режими змішування та облік освітлення (оцінка навколишнього світла з MediaPipe).
Room AR — меблі та інтер'єр
Для розміщення меблів в інтер'єрі потрібен plane detection — пошук горизонтальних площин. У браузері це можливо через WebXR API (Chrome на Android з ARCore) та частково через евристику (аналіз текстури поверхні через CV).
if (navigator.xr) {
const session = await navigator.xr.requestSession('immersive-ar', {
requiredFeatures: ['hit-test', 'local']
});
// ...
}
Підтримка WebXR immersive-ar: Chrome на Android (ARCore), Safari на iOS (ARKit через <model-viewer>). На десктопі — не працює. Це обмеження платформи, а не розроблення.
Альтернатива для iOS: AR Quick Look — нативний переглядач. Достатньо надати USDZ-файл (формат Apple для AR):
<a href="product.usdz" rel="ar">
<img src="ar-badge.png" alt="Переглянути в AR">
</a>
iOS Safari автоматично відкриває USDZ у нативному AR-режимі через ARKit. Це найпростіший спосіб дати користувачам iOS AR-досвід без WebXR.
<model-viewer> — універсальний компонент
Google <model-viewer> — Web Component, який об'єднує 3D-перегляд та AR:
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
<model-viewer
src="chair.glb"
ios-src="chair.usdz"
ar
ar-modes="webxr scene-viewer quick-look"
camera-controls
auto-rotate
alt="Офісне крісло"
style="width: 400px; height: 400px;"
>
<button slot="ar-button">Переглянути у вашому просторі</button>
</model-viewer>
ar-modes="webxr scene-viewer quick-look" — автоматично вибирає найкращий доступний режим: WebXR на Android, Quick Look на iOS, Scene Viewer як альтернатива.
Готові SaaS-рішення
Розроблення AR з нуля — дорого та довго. Для старту розглядайте:
- Banuba — SDK для face AR, є Web SDK
- Perfect Corp (YouCam) — віртуальний макіяж, приміра окулярів, готовий віджет
- Vertebrae / Zakeke — room AR для меблів і декору
-
Shopify AR — вбудована підтримка GLTF/USDZ через
<model-viewer>
SaaS зменшує час запуску з 3–4 місяців до 2–4 тижнів, але вимагає постійної підписки та залежності від постачальника.
Метрики ефективності
- AR engagement rate: % користувачів, які запустили AR з карточки товару
- Конверсія AR-користувачів vs. не-AR — ключовий показник ROI
- Відсоток повернень у AR-категоріях після впровадження
- Час сесії на сторінці товару з AR
Типові дані з кейсів: конверсія AR-користувачів на 20–40% вища, відсоток повернень зменшується на 20–30% в окулярах і косметиці.
Терміни
-
Room AR через
<model-viewer>(GLTF + USDZ, AR Quick Look на iOS, WebXR на Android): 1–2 тижні (розроблення), основний час — підготовка 3D-моделей - Face AR для окулярів (MediaPipe + Three.js, кастомна реалізація): 6–10 тижнів
- Косметика / макіяж (pixel-level blending): 4–8 тижнів
- Інтеграція Banuba/YouCam SDK: 2–4 тижні + вартість ліцензії SDK
Підготовка 3D-контенту (моделювання + конвертація) — окремий пункт бюджету, часто більший, ніж сама розроблення.