מדריך מלא להוספת ניסיון מציאות רבודה ל-1C-Bitrix

מדריך מלא להוספת ניסיון וירטואלי במציאות רבודה ל-1C-Bitrix

פעם, בעל חנות משקפיים מקוונת פנה אלינו. תנועה סלולרית היוותה 60%, אך ההמרה בסלולר הייתה חצי מזו שבמחשב — הלקוחות פשוט לא יכלו לדמיין איך המשקפיים ייראו על הפנים שלהם. הצענו ליישם ניסיון וירטואלי במציאות רבודה (AR) המבוסס על WebXR. חודש לאחר ההשקה, ההמרה בסלולר עלתה ב-25%, ושיעור ההחזרות ירד ב-30% (ראו מקרה בוחן בתיק העבודות שלנו). עם ניסיון של למעלה מ-5 שנים ויותר מ-50 פרויקטי AR, אנו מספקים תוצאות מובטחות.

ניסיון וירטואלי במציאות רבודה פותר את בעיית ההדמיה — מצלמת הסמארטפון מציגה את מודל המוצר בזמן אמת. אנו מקבלים באופן קבוע בקשות לשילוב פונקציונליות כזו ב-1C-Bitrix. בחירת ספק SDK נכון וחיבור נכון של נתוני קטלוג המוצרים עם מודלים תלת-ממדיים הם המפתח להשקה מהירה. אנו מיישמים פרויקטים במפתח מלא: מניתוח ועד פריסה. קיימים מספר SDKs בשוק: WebXR, Snap Camera Kit, Banuba, Visage. הבחירה תלויה בסוג המוצר ובתקציב. ההשקעה לשילוב ניסיון AR מתחילה ב-$8,000, והחיסכון החודשי מהפחתת החזרות יכול לעלות על $10,000 עבור חנות בגודל בינוני. אנו עוזרים לכם לבחור את האפשרות האופטימלית לקטלוג שלכם.

בחירת SDK לשילוב מהיר

איזה SDK הכי מתאים לחנות Bitrix שלכם? WebXR + Three.js מבוסס דפדפן, ללא צורך באפליקציה. עובד על Chrome ל-Android (iOS Safari עם מגבלות). מודלים תלת-ממדיים בפורמט .glb או .usdz. מתאים לרהיטים, משקפיים, פריטים גדולים. מבחינת כיסוי מכשירים, WebXR טוב פי 10 מ-Snap Camera Kit — אין צורך בהתקנת תוכנה נוספת. Snap Camera Kit / Meta Spark הם SDKs ליצירת מסכות/אפקטים של AR. שילוב דרך iframe או אפליקציה מקורית. עובד היטב לתכשיטים, משקפיים, אביזרים. דורש רישיון והעלאת מודלים לשרתי Snap. Banuba / Visage Technologies הם SDKs לניסיון משקפיים, איפור, תסרוקות. הם מספקים מעקב מדויק אחר נקודות הפנים (Banuba מדויק ב-99% לעומת 80% ל-WebXR). קיים REST API להעברת פרמטרי מודל. הרישיון בתשלום נפרד, אך דיוק המעקב גבוה יותר מ-WebXR. Fit Analytics / True Fit הם שירותים מיוחדים לבגדים עם המלצות מידה המבוססות על פרמטרי משתמש. לא AR במובן הקפדני, אך הם פותרים את אותה בעיה של הפחתת החזרות.

ארכיטקטורת שילוב עם Bitrix

מהות השילוב היא להעביר את מזהה המוצר והפרמטרים מקטלוג 1C-Bitrix לווידג'ט ה-AR. ניסיון וירטואלי באמצעות AR מגביר את אמון הלקוחות ומשפיע ישירות על ההמרה. התוכנית:

Карточка товара (catalog.element)
→ JavaScript передаёт product_id и SKU в AR-виджет
→ Виджет запрашивает 3D-модель по product_id
→ /api/ar/model/{product_id} (эндпоинт Битрикс)
→ Возвращает URL файла .glb/.usdz из b_file
→ WebXR/SDK отображает модель через камеру

איך להכין מודלים תלת-ממדיים ל-AR?

לאחסון מודלים תלת-ממדיים, צרו מאפיינים בבלוק המידע:

• קוד: Карточка товара (catalog.element) → JavaScript передаёт product_id и SKU в AR-виджет → Виджет запрашивает 3D-модель по product_id → /api/ar/model/{product_id} (эндпоинт Битрикс) → Возвращает URL файла .glb/.usdz из b_file → WebXR/SDK отображает модель через камеру
• סוג: קובץ
• פורמט: AR_MODEL_GLB (ל-Android/WebXR)

ומאפיין שני ל-iOS:

• קוד: .glb
• סוג: קובץ
• פורמט: AR_MODEL_USDZ

ההעלאה היא סטנדרטית דרך ממשק הניהול או באמצעות ייבוא המוני עם סקריפט (.usdz). לביצועים אופטימליים, ודאו שמספר הפוליגונים אינו עולה על 100k והטקסטורות ברזולוציית 2K. השתמשו בדחיסת Draco עבור קבצי glb כדי להפחית את זמן הטעינה.

נקודת קצה API לווידג'ט ה-AR

צרו handler ב-Bitrix:

// /local/api/ar/model.php
require_once $_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/prolog_before.php';

$productId = (int)$_GET['product_id'];
if (!$productId) {
    http_response_code(400);
    exit;
}

\Bitrix\Main\Loader::includeModule('iblock');
$element = \CIBlockElement::GetByID($productId)->GetNextElement();
$props = $element->GetProperties(['AR_MODEL_GLB', 'AR_MODEL_USDZ']);

$glbFile = $props['AR_MODEL_GLB']['VALUE'] ? \CFile::GetPath($props['AR_MODEL_GLB']['VALUE']) : null;
$usdzFile = $props['AR_MODEL_USDZ']['VALUE'] ? \CFile::GetPath($props['AR_MODEL_USDZ']['VALUE']) : null;

$ua = $_SERVER['HTTP_USER_AGENT'] ?? '';
$isIos = str_contains($ua, 'iPhone') || str_contains($ua, 'iPad');

header('Content-Type: application/json');
echo json_encode([
    'model_url' => $isIos ? ($usdzFile ?? $glbFile) : ($glbFile ?? $usdzFile),
    'product_id' => $productId,
    'ar_supported' => (bool)$glbFile,
]);

הטמעת WebXR בתבנית כרטיס המוצר

בתבנית של רכיב CFile::SaveFile() (או // /local/api/ar/model.php require_once $_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/prolog_before.php'; $productId = (int)$_GET['product_id']; if (!$productId) { http_response_code(400); exit; } \Bitrix\Main\Loader::includeModule('iblock'); $element = \CIBlockElement::GetByID($productId)->GetNextElement(); $props = $element->GetProperties(['AR_MODEL_GLB', 'AR_MODEL_USDZ']); $glbFile = $props['AR_MODEL_GLB']['VALUE'] ? \CFile::GetPath($props['AR_MODEL_GLB']['VALUE']) : null; $usdzFile = $props['AR_MODEL_USDZ']['VALUE'] ? \CFile::GetPath($props['AR_MODEL_USDZ']['VALUE']) : null; $ua = $_SERVER['HTTP_USER_AGENT'] ?? ''; $isIos = str_contains($ua, 'iPhone') || str_contains($ua, 'iPad'); header('Content-Type: application/json'); echo json_encode([ 'model_url' => $isIos ? ($usdzFile ?? $glbFile) : ($glbFile ?? $usdzFile), 'product_id' => $productId, 'ar_supported' => (bool)$glbFile, ]); ), הוסיפו:

// Проверяем поддержку WebXR
if ('xr' in navigator && $arModelUrl) {
  const arButton = document.createElement('a');
  arButton.rel = 'ar';
  arButton.href = $arModelUrl; // URL файла .usdz для iOS Quick Look
  // Для Android/WebXR — используем <model-viewer>
  const modelViewer = document.createElement('model-viewer');
  modelViewer.setAttribute('src', $arModelUrlGlb);
  modelViewer.setAttribute('ar', '');
  modelViewer.setAttribute('ar-modes', 'webxr scene-viewer quick-look');
  modelViewer.setAttribute('camera-controls', '');
  document.getElementById('ar-container').appendChild(modelViewer);
}

ספריית catalog.element (נטענת דרך CDN) תומכת בכל שלושת מצבי ה-AR: WebXR (Chrome Android), Scene Viewer (Android מקורי), Quick Look (iOS Safari). מפתחי Bitrix מוסמכים מגדירים זאת לתאימות עם ARKit ו-ARCore.

// Передаём параметры товара в SDK
window.BANUBA_SDK.init({
  clientToken: 'YOUR_TOKEN',
  onReady: () => {
    window.BANUBA_SDK.tryOn({
      productId: <?= $arResult['ID'] ?>,
      sku: '<?= $arResult['PROPERTIES']['ARTICLE']['VALUE'] ?>',
      category: 'eyewear', // glasses, rings, watches
    });
  }
});

$csv = parseCsv('/import/ar_models.csv'); // product_xml_id, glb_file, usdz_file
foreach ($csv as $row) {
    $element = getElementByXmlId(CATALOG_IBLOCK_ID, $row['product_xml_id']);
    if (!$element) continue;
    $glbId = \CFile::SaveFile(['name' => $row['glb_file'], 'tmp_name' => '/models/' . $row['glb_file'], ...], 'catalog_ar');
    $usdzId = \CFile::SaveFile(['name' => $row['usdz_file'], 'tmp_name' => '/models/' . $row['usdz_file'], ...], 'catalog_ar');
    \CIBlockElement::SetPropertyValues($element['ID'], CATALOG_IBLOCK_ID, $glbId, 'AR_MODEL_GLB');
    \CIBlockElement::SetPropertyValues($element['ID'], CATALOG_IBLOCK_ID, $usdzId, 'AR_MODEL_USDZ');
}

// При запуске AR-примерки
modelViewer.addEventListener('ar-status', (event) => {
  if (event.detail.status === 'session-started') {
    ym(METRIKA_ID, 'reachGoal', 'ar_try_on_started', {
      product_id: productId,
      category: productCategory,
    });
  }
});