Карта сайта

WebXR: создание VR-приложений на JavaScript. Интеграция с Oculus Quest и другими устройствами

/JavaScript/WebXR: создание VR-приложений на JavaScript. Интеграция с Oculus Quest и другими устройствами
WebXR: создание VR-приложений на JavaScript. Интеграция с Oculus Quest и другими устройствами
Автор: написал в рубрике JavaScript. 0 Комментариев.

Сегодня я хочу поделиться с вами опытом работы с WebXR. Технологией, которая позволяет разрабатывать кросс-платформенные VR-приложения прямо в браузере. В этой статье мы разберем, как интегрировать ваши проекты с Oculus Quest, HTC Vive, HoloLens и другими устройствами, напишем рабочий код и сравним возможности девайсов.

Что такое WebXR?

WebXR это современный API, который заменяет устаревший WebVR. Он дает возможность:

  • Запускать VR/AR-приложения в браузере без установки дополнительного ПО.
  • Работать с любыми устройствами: от смартфонов до шлемов вроде Oculus Quest.
  • Использовать JavaScript и популярные библиотеки (Three.js, Babylon.js).

Главное преимущество WebXR это доступность. Пользователю достаточно открыть ссылку, чтобы погрузиться в виртуальный мир.

Интеграция с Oculus Quest

Oculus Quest (и Quest 2) одни из самых популярных VR-шлемов. Рассмотрим, как подключить его к вашему Web-приложению.

1. Настройка устройства

  • Включите режим разработчика на Oculus Quest через Oculus Developer Dashboard.
  • Убедитесь, что шлем подключен к Wi-Fi и использует браузер Meta Quest Browser (или Firefox Reality).

2. Создаем базовое приложение

Используем Three.js для упрощения работы с 3D.

javascript
import * as THREE from 'three';  
import { WEBXR } from 'three/addons/webxr/WebXR.js';  

// Создаем сцену, камеру, рендерер  
const scene = new THREE.Scene();  
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);  
const renderer = new THREE.WebGLRenderer({ antialias: true });  

renderer.setSize(window.innerWidth, window.innerHeight);  
document.body.appendChild(renderer.domElement);  

// Включаем WebXR  
renderer.xr.enabled = true;  

// Добавляем куб  
const geometry = new THREE.BoxGeometry();  
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });  
const cube = new THREE.Mesh(geometry, material);  
scene.add(cube);  

// Запускаем сессию WebXR  
renderer.xr.addEventListener('sessionstart', (event) => {  
  camera.position.set(0, 1.6, 0); // Высота камеры на уровне глаз пользователя  
});  

document.body.appendChild(  
  WEBXR.createButton(renderer, { requiredFeatures: ['local-floor'] })  
);  

// Анимация  
renderer.setAnimationLoop(() => {  
  cube.rotation.x += 0.01;  
  cube.rotation.y += 0.01;  
  renderer.render(scene, camera);  
});

3. Обработка контроллеров

Чтобы отслеживать движения рук, добавьте:

javascript
let controller1, controller2;  

controller1 = renderer.xr.getController(0);  
controller1.addEventListener('selectstart', () => {  
  console.log('Кнопка нажата на контроллере 1');  
});  
scene.add(controller1);  

controller2 = renderer.xr.getController(1);  
scene.add(controller2);

Подключение других устройств

HTC Vive Focus 3

  • Используйте WebXR API без дополнительных настроек.
  • Для доступа к функциям внутрикорпусного отслеживания активируйте requiredFeatures: ['layers', 'hand-tracking'].

Microsoft HoloLens 2

  • Требуется HTTPS-соединение.
  • Включите поддержку AR:
javascript
navigator.xr.requestSession('immersive-ar').then((session) => {  
  // AR-логика  
});

Мобильные устройства (Android/iOS)

  • Используйте WebXR Viewer (iOS) или Chrome (Android).
  • Для ARCore/ARKit активируйте 'hit-test' и 'light-estimation'.

Сравнение устройств для WebXR

Параметр Oculus Quest 2 HTC Vive Focus 3 HoloLens 2 Мобильные устройства
Разрешение экрана 1832×1920/глаз 2448×2448/глаз 720p Зависит от устройства
Поддержка WebXR Полная Полная Частичная Частичная
Входные методы Контроллеры, руки Контроллеры Руки, взгляд Сенсорный экран
Цена $299 $1300 $3500 200−1000
Рекомендация Лучший выбор Для корпоративного сектора AR-проекты Тестирование концептов

Рекомендации для разработчиков

  1. Оптимизация производительности
    • Используйте glTF вместо OBJ для 3D-моделей.
    • Лимитируйте количество полигонов (для Quest 2 — до 150k на сцену).
  2. Кросс-браузерная совместимость
    Проверяйте поддержку функций:
javascript
if (navigator.xr) {  
  navigator.xr.isSessionSupported('immersive-vr').then((supported) => {  
    if (supported) {  
      // Показываем кнопку запуска VR  
    }  
  });  
}
  1. UX в VR
    • Избегайте резких перемещений камеры — это вызывает тошноту.
    • Добавляйте звуковые подсказки при взаимодействии с объектами.
  2. Тестирование
    • Для эмуляции устройств используйте WebXR Emulator Extension для Chrome.
    • Проверяйте FPS в Oculus Quest через Developer Hub.

WebXR открывает огромные возможности для веб-разработчиков. За несколько часов вы можете создать приложение, которое работает на Oculus Quest, HoloLens и даже смартфоне.

Если у вас есть вопросы, пишите в комментариях, делитесь своими проектами.