פיתוח AR Try-On לחנויות איקומרס

תארו לעצמכם חנות משקפיים מקוונת שמפסידה עד 30% מהקונים הפוטנציאליים כי הלקוחות לא יכולים למדוד מסגרות. AR try-on פותר את זה: המשתמש מפעיל את המצלמה, המערכת מזהה את הפנים באמצעות MediaPipe FaceMesh ומציגה מודל מסגרת תלת-ממדי בזמן אמת. התוצאה: המרה עולה ב-40%, החזרות יורדות ב-30%. הניסיון שלנו ב-AR לאופנה וקמעונאות מראה שווירטואל try-on מחזיר את ההשקעה תוך 6–12 חודשים לקטלוגים של 500+ פריטים. ציינו את המקרה שלכם — נמצא את הסטACK האופטימלי לתקציב שלכם.

מבחינה טכנית, AR בדפדפן דורש ראייה ממוחשבת, עיבוד תלת-ממדי ו-APIים של web. אנו משתמשים בטכנולוגיות מוכחות: WebXR למרחב immersive, MediaPipe למעקב פנים וגוף, Three.js לעיבוד תלת-ממדי, ו-model-viewer ל-Room AR מהיר. צרו קשר להערכת פרויקט.

איך try-on למשקפיים עובד אלגוריתמית

סטACK למשקפיים:

Камера → getUserMedia() → MediaPipe FaceMesh → 468 landmark points → Three.js / Babylon.js → 3D-модель очков (GLTF) → Выравнивание модели по точкам лица (нос, виски, уши) → Рендер поверх видеопотока → Отображение в <canvas> 

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 });
});

יישור המודל התלת-ממדי לנקודות הפנים:

1. חישוב מרכז, זווית הטיה וקנה מידה מקואורדינטות הרקות וגשר האף.
2. החלת טרנספורמציות על האובייקט התלת-ממדי: Камера → getUserMedia() → MediaPipe FaceMesh → 468 landmark points → Three.js / Babylon.js → 3D-модель очков (GLTF) → Выравнивание модели по точкам лица (нос, виски, уши) → Рендер поверх видеопотока → Отображение в <canvas> , 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 }); }); , position.
3. עיבוד דרך Three.js מעל הזנת הווידאו (שכבת canvas עם rotation או רקע שקוף).

בפרויקט לקמעונאי משקפיים עם 2000 פריטים, צמצמנו את זמן ההשהיה הממוצע של try-on מ-8 שניות ל-1.2 שניות על ידי אופטימיזציה של צינור MediaPipe ויישום מטמון מודלים.

למה מודלים תלת-ממדיים ל-AR הם צוואר הבקבוק?

דרישות למודלי GLTF ב-AR try-on:

עבור כל מוצר — קובץ GLTF נפרד. עם 500 פריטים — 500 מודלים. זהו המורכבות התפעולית העיקרית: מידול תוכן, לא פיתוח ווידג'ט. חלופה — שכבת 2D overlay: תמונה חתוכה מעוותת לנקודות הפנים. פחות ריאליסטי אבל המודלים מוכנים בפוטושופ.

סוגי AR try-on וסטACK טכנולוגי

Face AR (פנים): משקפיים, משקפי שמש, מסכות, איפור, כובעים. בסיס — זיהוי נקודות פנים (468 נקודות MediaPipe Face Mesh). זו הטכנולוגיה הבשלה והיציבה ביותר לדפדפן.

Body AR: בגדים, נעליים על כל הגוף. דורש הערכת תנוחה (MediaPipe Pose / BlazePose). מורכב יותר בגלל עיוות בד ושונות בתנוחות.

Room AR (מיקום במרחב): רהיטים, עיצוב, מכשירי חשמל בפנים. מבוסס על זיהוי מישורים — מציאת משטחים אופקיים (רצפה, שולחן) דרך SLAM או חיישן עומק. להתחלה מהירה אנו משתמשים ב-scale של Google.

Hand AR: טבעות, שעונים, צמידים. משתמש ב-MediaPipe Hands (21 נקודות מפתח לכל יד).

קוסמטיקה (איפור וירטואלי)

לשפתון, סומק, צללית — לא מודל תלת-ממדי, אלא צביעת אזורי פנים לפי מסכה.

// Получаем маску губ из landmark points
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();

הריאליזם משופר באמצעות מצבי blending והערכת אור סביבתי מ-MediaPipe.

Room AR — מיקום רהיטים

למיקום רהיטים בפנים, יש צורך בזיהוי מישורים. בדפדפן זה אפשרי דרך WebXR API (Chrome באנדרואיד עם ARCore) ובחלקית דרך הוריסטיקות.

if (navigator.xr) {
  const session = await navigator.xr.requestSession('immersive-ar', {
    requiredFeatures: ['hit-test', 'local']
  });
  // ...
}

ב-iOS אנו משתמשים ב-AR Quick Look דרך קבצי USDZ. רכיב אוניברסלי — mix-blend-mode: multiply של Google:

<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>

<model-viewer> — בוחר אוטומטית את המצב הזמין הטוב ביותר.

פיתוח מותאם אישית מול SaaS: מה משתלם יותר?

SDKים מוכנים (Banuba, Perfect Corp, Zakeke) מקצרים את זמן היציאה לשוק ל-2–4 שבועות אבל דורשים מנוי חודשי (לדוגמה, $500 לחודש). פתרון מותאם אישית על MediaPipe ו-WebXR ללא דמי רישוי ונותן שליטה מלאה, מה שמשתלם יותר לקטלוגים מ-200 מוצרים. חיסכון ברישוי יכול להגיע ל-$10,000 בשנה על פני שנתיים. השוואה: פתרון מותאם אישית זול פי 2–3 מ-SDKים מורשים בהרחבה ל-500 מוצרים.

מה כלול בעבודה

1. ניתוח דרישות ובחירת טכנולוגיה (Face/Body/Room AR)
2. אב טיפוס על המוצרים בפועל של הלקוח
3. אינטגרציה עם CMS/קטלוג קיים
4. הכנת מודלים תלת-ממדיים או הכשרת המעצבים שלכם
5. בדיקות על מכשירים (iOS, Android, מחשב שולחני)
6. תיעוד והכשרת צוות
7. חודש תמיכה לאחר השקה

טעויות נפוצות ביישום AR

• התעלמות מ-LOD — מודל עם 50k פוליגונים מפגר במובייל
• קנה מידה שגוי במטרים — משקפיים מרחפים באוויר
• אין fallback לדפדפנים ללא WebXR — המשתמש רואה מסך ריק
• טקסטורות גדולות מדי (2048×2048) — זמן טעינה ארוך

מדדי ביצועים

נתונים אופייניים ממקרים: ההמרה של משתמשי AR גבוהה ב-20–40%, שיעור ההחזרות יורד ב-20–30% למשקפיים וקוסמטיקה. זה עוזר להפחית החזרות ומגביר את האימוץ של קמעונאות מציאות רבודה.

לוחות זמנים

• Room AR דרך // Получаем маску губ из landmark points 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(); : 1–2 שבועות (פיתוח), עיקר הזמן הוא הכנת מודלים תלת-ממדיים
• Face AR למשקפיים (MediaPipe + Three.js): 6–10 שבועות
• קוסמטיקה/איפור (blending ברמת פיקסל): 4–8 שבועות
• אינטגרציה של Banuba/YouCam SDK: 2–4 שבועות + עלות רישוי

הכנת תוכן תלת-ממדי היא סעיף תקציב נפרד, לעיתים גדול יותר מהפיתוח עצמו. צרו קשר להערכת פרויקט.

אנו מציעים פיתוח AR מותאם אישית כשירות ליבה. עם 5+ שנות ניסיון, 50+ פרויקטים ואמון של 30+ מותגי מסחר אלקטרוני, אנו מבטיחים שהאינטגרציה של AR במסחר האלקטרוני שלכם תפחית החזרות ותגביר המרות. צרו קשר לייעוץ.