WebXR Hit Test Manager: Впровадження системи трасування променів для захопливих вражень

Розвиток технологій доповненої реальності (AR) і віртуальної реальності (VR) відкрив нові захопливі можливості для створення захопливих та інтерактивних цифрових вражень. WebXR, JavaScript API для доступу до можливостей VR та AR у веб-браузерах, дозволяє розробникам у всьому світі створювати ці враження на безлічі пристроїв. Ключовим компонентом у створенні переконливих WebXR-вражень є здатність взаємодіяти з віртуальним середовищем. Саме тут вступають у гру WebXR Hit Test Manager і трасування променів.

Що таке трасування променів і чому це важливо?

Трасування променів, у контексті WebXR, - це техніка, яка використовується для визначення того, чи перетинається віртуальний промінь (пряма лінія) з реальною поверхнею, виявленою системою AR, або віртуальним об'єктом у середовищі VR. Уявіть собі, що ви світите лазерною указкою на навколишнє середовище і бачите, куди вона потрапляє. WebXR Hit Test Manager надає інструменти для виконання цих трасувань променів та отримання результатів. Ця інформація є вирішальною для різноманітних взаємодій, включаючи:

• Розміщення об'єктів: Дозволяє користувачам розміщувати віртуальні об'єкти на реальних поверхнях, наприклад, ставити віртуальний стілець у своїй вітальні (AR). Уявіть собі користувача в Токіо, який віртуально прикрашає свою квартиру перед тим, як прийняти рішення про покупку меблів.
• Прицілювання та вибір: Дозволяє користувачам вибирати віртуальні об'єкти або взаємодіяти з елементами інтерфейсу користувача за допомогою віртуального вказівника або руки (AR/VR). Уявіть собі хірурга в Лондоні, який використовує AR для накладання анатомічної інформації на пацієнта, вибираючи конкретні ділянки для огляду.
• Навігація: Переміщення аватара користувача віртуальним світом шляхом вказівки на місцезнаходження та вказівки переміститися туди (VR). Музей у Парижі може використовувати VR, щоб дозволити відвідувачам переміщатися історичними експозиціями.
• Розпізнавання жестів: Поєднання тестування на потрапляння з відстеженням рук для інтерпретації жестів користувача, таких як стискання для збільшення або проведення пальцем для прокручування (AR/VR). Це можна використовувати на спільній дизайнерській зустрічі в Сіднеї, де учасники разом маніпулюють віртуальними моделями.

Розуміння WebXR Hit Test Manager

WebXR Hit Test Manager є важливою частиною WebXR API, яка полегшує трасування променів. Він надає методи для створення та керування джерелами тестування на потрапляння, які визначають початок і напрямок променя. Потім менеджер використовує ці джерела для виконання тестів на потрапляння в реальний світ (в AR) або віртуальний світ (у VR) і повертає інформацію про будь-які перетини. Основні поняття включають:

• XRFrame: XRFrame представляє собою знімок XR-сцени в часі, включаючи позу глядача та будь-які виявлені площини або об'єкти. Тести на потрапляння виконуються на основі XRFrame.
• XRHitTestSource: Представляє джерело променя, який потрібно трасувати. Він визначає початок (звідки починається промінь) і напрямок (куди вказує промінь). Зазвичай ви створюєте один XRHitTestSource на метод введення (наприклад, контролер, рука).
• XRHitTestResult: Містить інформацію про успішне потрапляння, включаючи позу (положення та орієнтацію) точки перетину та відстань від початку променя.
• XRHitTestTrackable: Представляє відстежуваний об'єкт (наприклад, площину) в реальному світі.

Впровадження базової системи тестування на потрапляння

Давайте розглянемо кроки для впровадження базової системи тестування на потрапляння WebXR за допомогою JavaScript. Цей приклад зосереджується на розміщенні об'єктів AR, але принципи можна адаптувати для інших сценаріїв взаємодії.

Крок 1: Запит сесії WebXR і підтримки тестування на потрапляння

Спочатку потрібно запросити сесію WebXR і переконатися, що функція 'hit-test' увімкнена. Ця функція необхідна для використання Hit Test Manager.

            
async function initXR() {
  try {
    xrSession = await navigator.xr.requestSession('immersive-ar', {
      requiredFeatures: ['hit-test'],
    });

    xrSession.addEventListener('end', () => {
      console.log('XR session ended');
    });

    // Initialize your WebGL renderer and scene here
    initRenderer();

    xrSession.updateRenderState({
      baseLayer: new XRWebGLLayer(xrSession, renderer.getContext())
    });

    xrReferenceSpace = await xrSession.requestReferenceSpace('local');
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrReferenceSpace
    });

    xrSession.requestAnimationFrame(renderLoop);

  } catch (e) {
    console.error('WebXR failed to initialize', e);
  }
}

            

              
                Copy
              
            
          

Пояснення:

• `navigator.xr.requestSession('immersive-ar', ...)`: Запитує сесію immersive AR. Перший аргумент визначає тип сесії ('immersive-ar' для AR, 'immersive-vr' для VR).
• `requiredFeatures: ['hit-test']`: Важливо, запитує функцію 'hit-test', увімкнувши Hit Test Manager.
• `xrSession.requestHitTestSource(...)`: Створює XRHitTestSource, визначаючи початок і напрямок променя. У цьому базовому прикладі ми використовуємо простір відліку 'viewer', який відповідає точці зору користувача.

Крок 2: Створення циклу рендерингу

Цикл рендерингу є серцем вашої програми WebXR. Саме тут ви оновлюєте сцену та рендерите кожен кадр. У циклі рендерингу ви виконаєте тест на потрапляння та оновите положення вашого віртуального об'єкта.

            
function renderLoop(time, frame) {
  xrSession.requestAnimationFrame(renderLoop);

  const xrFrame = frame;
  const xrPose = xrFrame.getViewerPose(xrReferenceSpace);

  if (xrPose) {
    const hitTestResults = xrFrame.getHitTestResults(xrHitTestSource);

    if (hitTestResults.length > 0) {
      const hit = hitTestResults[0];
      const hitPose = hit.getPose(xrReferenceSpace);

      // Update the position and orientation of your virtual object
      object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
      object3D.visible = true; // Make the object visible when a hit is found
    } else {
      object3D.visible = false; // Hide the object if no hit is found
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

Пояснення:

• `xrFrame.getHitTestResults(xrHitTestSource)`: Виконує тест на потрапляння за допомогою раніше створеного XRHitTestSource. Він повертає масив об'єктів XRHitTestResult, що представляють усі знайдені перетини.
• `hitTestResults[0]`: Ми беремо перший результат потрапляння. У складніших сценаріях ви можете перебирати всі результати та вибирати найбільш підходящий.
• `hit.getPose(xrReferenceSpace)`: Отримує позу (положення та орієнтацію) потрапляння у вказаному просторі відліку.
• `object3D.position.set(...)` і `object3D.quaternion.set(...)`: Оновлює положення та орієнтацію вашого віртуального об'єкта (object3D) відповідно до пози потрапляння. Це розміщує об'єкт у точці перетину.
• `object3D.visible = true/false`: Контролює видимість віртуального об'єкта, роблячи його видимим лише тоді, коли знайдено потрапляння.

Крок 3: Налаштування 3D-сцени (приклад з Three.js)

У цьому прикладі використовується Three.js, популярна бібліотека JavaScript 3D, для створення простої сцени з кубом. Ви можете адаптувати це для використання інших бібліотек, таких як Babylon.js або A-Frame.

            
let scene, camera, renderer, object3D;
let xrSession, xrReferenceSpace, xrHitTestSource;

function initRenderer() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.xr.enabled = true; // Enable WebXR
  document.body.appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1); // 10cm cube
  const material = new THREE.MeshNormalMaterial();
  object3D = new THREE.Mesh(geometry, material);
  object3D.visible = false; // Initially hide the object
  scene.add(object3D);

  renderer.setAnimationLoop(() => { /* No animation loop here. WebXR controls it.*/ });
  renderer.xr.setSession(xrSession);

  camera.position.z = 2; // Move the camera back
}

// Call initXR() to start the WebXR experience
initXR();

            

              
                Copy
              
            
          

Важливо: Переконайтеся, що включили бібліотеку Three.js у свій HTML-файл:

            


            

              
                Copy
              
            
          

Розширені методи та оптимізація

Наведена вище базова реалізація забезпечує основу для тестування на потрапляння WebXR. Ось кілька розширених методів і оптимізацій, які слід враховувати, коли ви створюєте складніші враження:

1. Фільтрування результатів тестування на потрапляння

У деяких випадках може знадобитися відфільтрувати результати тестування на потрапляння, щоб враховувати лише певні типи поверхонь. Наприклад, ви можете дозволити розміщення об'єктів лише на горизонтальних поверхнях (підлогах або столах). Цього можна досягти, досліджуючи нормальний вектор пози потрапляння та порівнюючи його з вектором вгору.

            
if (hitTestResults.length > 0) {
  const hit = hitTestResults[0];
  const hitPose = hit.getPose(xrReferenceSpace);

  // Check if the surface is approximately horizontal
  const upVector = new THREE.Vector3(0, 1, 0); // World up vector
  const hitNormal = new THREE.Vector3();
  hitNormal.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z);
  hitNormal.applyQuaternion(camera.quaternion); // Rotate the normal to world space

  const dotProduct = upVector.dot(hitNormal);

  if (dotProduct > 0.9) { // Adjust the threshold (0.9) as needed
    // Surface is approximately horizontal
    object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    object3D.visible = true;
  } else {
    object3D.visible = false;
  }
}

            

              
                Copy
              
            
          

2. Використання тимчасових джерел введення

Для більш просунутих методів введення, таких як відстеження рук, зазвичай використовуються тимчасові джерела введення. Тимчасові джерела введення представляють тимчасові події введення, такі як торкання пальцем або жест рукою. WebXR Input API дозволяє отримати доступ до цих подій і створити джерела тестування на потрапляння на основі положення руки користувача.

            
xrSession.addEventListener('selectstart', (event) => {
  const inputSource = event.inputSource;
  const targetRayPose = event.frame.getPose(inputSource.targetRaySpace, xrReferenceSpace);

  if (targetRayPose) {
    // Create a hit test source from the target ray pose
    xrSession.requestHitTestSourceForTransientInput({ targetRaySpace: inputSource.targetRaySpace, profile: inputSource.profiles }).then((hitTestSource) => {
       const hitTestResults = event.frame.getHitTestResults(hitTestSource);
       if (hitTestResults.length > 0) {
         const hit = hitTestResults[0];
         const hitPose = hit.getPose(xrReferenceSpace);

         // Place an object at the hit location
         const newObject = new THREE.Mesh(new THREE.SphereGeometry(0.05, 32, 32), new THREE.MeshNormalMaterial());
         newObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
         scene.add(newObject);
       }
       hitTestSource.cancel(); // Cleanup the hit test source
    });
  }
});

            

              
                Copy
              
            
          

3. Оптимізація продуктивності

WebXR-враження можуть бути обчислювально інтенсивними, особливо на мобільних пристроях. Ось кілька порад щодо оптимізації продуктивності:

• Зменште частоту тестів на потрапляння: Виконання тестів на потрапляння кожного кадру може бути дорогим. Розгляньте можливість зменшення частоти, особливо якщо рух користувача повільний. Ви можете використовувати таймер або виконувати тести на потрапляння лише тоді, коли користувач ініціює дію.
• Використовуйте ієрархію обмежувальних об'ємів (BVH): Якщо у вас складна сцена з великою кількістю об'єктів, використання BVH може значно прискорити виявлення зіткнень. Three.js і Babylon.js пропонують реалізації BVH.
• LOD (рівень деталізації): Використовуйте різні рівні деталізації для ваших 3D-моделей залежно від їх відстані від камери. Це зменшує кількість багатокутників, які потрібно відтворити для віддалених об'єктів.
• Occlusion Culling: Не відтворюйте об'єкти, які приховані за іншими об'єктами. Це може значно покращити продуктивність у складних сценах.

4. Обробка різних просторів відліку

WebXR підтримує різні простори відліку, які визначають систему координат, яка використовується для відстеження положення та орієнтації користувача. Найбільш поширені простори відліку:

• Local: Початок системи координат фіксується відносно початкового положення користувача. Це підходить для вражень, де користувач залишається в невеликій зоні.
• Bounded-floor: Початок знаходиться на рівні підлоги, а площина XZ представляє підлогу. Це підходить для вражень, де користувач може переміщатися кімнатою.
• Unbounded: Початок не фіксується, і користувач може вільно переміщатися. Це підходить для масштабних AR-вражень.

Вибір відповідного простору відліку важливий для забезпечення правильної роботи вашого WebXR-враження в різних середовищах. Ви можете запросити певний простір відліку під час створення сесії XR.

            
xrReferenceSpace = await xrSession.requestReferenceSpace('bounded-floor');

            

              
                Copy
              
            
          

5. Робота з сумісністю пристроїв

WebXR - це відносно нова технологія, і не всі браузери та пристрої підтримують її однаково. Важливо перевірити підтримку WebXR, перш ніж намагатися ініціалізувати сесію WebXR.

            
if (navigator.xr) {
  // WebXR is supported
  initXR();
} else {
  // WebXR is not supported
  console.error('WebXR is not supported in this browser.');
}

            

              
                Copy
              
            
          

Ви також повинні протестувати свій WebXR-враження на різних пристроях, щоб переконатися, що воно працює правильно.

Міжнародні аспекти

Під час розробки WebXR-додатків для глобальної аудиторії важливо враховувати інтернаціоналізацію (i18n) і локалізацію (l10n).

• Текст і елементи інтерфейсу користувача: Використовуйте бібліотеку локалізації для перекладу тексту та елементів інтерфейсу користувача на різні мови. Переконайтеся, що ваш макет інтерфейсу користувача може вмістити різну довжину тексту. Наприклад, німецькі слова, як правило, довші за англійські.
• Одиниці вимірювання: Використовуйте відповідні одиниці вимірювання для різних регіонів. Наприклад, використовуйте метри та кілометри в більшості країн, але використовуйте фути та милі в Сполучених Штатах і Сполученому Королівстві. Дозвольте користувачам вибирати бажані одиниці вимірювання.
• Формати дати й часу: Використовуйте відповідні формати дати й часу для різних регіонів. Наприклад, використовуйте формат YYYY-MM-DD у деяких країнах і формат MM/DD/YYYY в інших.
• Валюти: Відображайте валюти у відповідному форматі для різних регіонів. Використовуйте бібліотеку для обробки конвертації валют.
• Культурна чутливість: Пам'ятайте про культурні відмінності та уникайте використання зображень, символів або мови, які можуть бути образливими для деяких культур. Наприклад, певні жести руками можуть мати різне значення в різних культурах.

Інструменти та ресурси для розробки WebXR

Кілька інструментів і ресурсів можуть допомогти вам із розробкою WebXR:

• Three.js: Популярна бібліотека JavaScript 3D для створення вражень на основі WebGL.
• Babylon.js: Ще один потужний JavaScript 3D-движок з акцентом на підтримку WebXR.
• A-Frame: Веб-фреймворк для створення VR-вражень за допомогою HTML.
• WebXR Emulator: Розширення браузера, яке дозволяє тестувати WebXR-враження без необхідності фізичного пристрою VR або AR.
• WebXR Device API Specification: Офіційна специфікація WebXR від W3C.
• Mozilla Mixed Reality Blog: Чудовий ресурс для вивчення WebXR і пов'язаних технологій.

Висновок

WebXR Hit Test Manager — це потужний інструмент для створення інтерактивних і захопливих AR/VR-вражень. Розуміючи концепції трасування променів і Hit Test API, ви можете створювати переконливі програми, які дозволяють користувачам взаємодіяти з віртуальним світом природним та інтуїтивно зрозумілим способом. Оскільки технологія WebXR продовжує розвиватися, можливості для створення інноваційних і захопливих вражень безмежні. Не забувайте оптимізувати свій код для продуктивності та враховувати інтернаціоналізацію під час розробки для глобальної аудиторії. Прийміть виклики та винагороди створення наступного покоління захопливих веб-вражень.