Функция WebXR Hands

Отслеживание движений рук позволяет использовать руки в качестве альтернативного метода ввода вместо контроллеров для навигации и взаимодействия с пользовательским интерфейсом в Доме Meta Horizon, а также в некоторых нативных приложениях. Приложение Browser уже поддерживает отслеживание движений рук при просмотре 2D-веб-страниц, а теперь также добавлена официальная поддержка рук, интегрированная в WebXR в браузере. Это создает бесконечные возможности для более естественного взаимодействия без участия контроллера, что обеспечивает новый уровень присутствия и вовлеченности.

Эта статья на GitHub⁠ — хороший ресурс для знакомства с принципами реализации отслеживания движений рук в WebXR. API отображает позы 25 суставов скелета (показаны на рисунке ниже) в каждой руке пользователя, что можно использовать для распознавания жестов или рендеринга моделей рук. Руки будут отображаться как XRInputSource⁠ наряду с контроллерами. Примечательно, что targetRaySpace⁠ для рук заполняется эмулированным лучом, который соответствует поведению указывающего луча рук, представленного в Доме Meta Horizon, а это предполагает, что пользовательский интерфейс находится перед пользователем, поэтому целевые лучи всегда будут указывать в этом общем направлении.

Bone points in WebXR Hands implementation

Функция Hands в WebXR на гарнитурах Meta Quest резервирует жест сведения ладоней на обеих руках для использования в системе. Чтобы сжать ладонь любой руки, посмотрите на ладонь на уровне глаз, затем держите большой и указательный пальцы сведенными вместе, пока значок меню (левая рука) или значок Meta Quest (правая рука) не заполнится, после чего разожмите пальцы. Сжатие ладони левой руки эквивалентно нажатию кнопки меню на левом контроллере, что выводит пользователя из сеанса WebXR. Жест сжатия ладони не следует путать с обычным жестом сведения, который реализован в эмулированном атрибуте Gamepad для руки как нажатие кнопки. Дополнительные жесты, которые часто выполняются руками, такие как указание и сведение пальцев и сведение пальцев и прокрутка, перечислены в этой статье⁠. Они могут послужить отправной точкой для реализации пользовательских жестов, выполняемых руками, в WebXR. Подробнее об использовании рук см. в наших рекомендациях.

Процесс реализации использования рук в WebXR можно разделить на три части:

Загрузка моделей рук: Meta добавила набор стандартных объектов моделей рук в общедоступную библиотеку профилей ввода WebXR⁠ с ID профиля "типичной руки" — одним из ID профиля объекта XRInputSource для рук. Однако можно использовать и пользовательские модели рук, если они соответствуют структуре суставов и месту размещения, которые указаны в разделе Суставы скелета⁠ спецификаций модуля ввода рук WebXR.

Получение данных отслеживания движений рук: данные о позах суставов можно получить через интерфейс XRFrame⁠. В настоящее время для получения поз суставов предлагаются два API: getJointPose можно использовать для получения позы суставов по одной за раз — рекомендуется, когда используемая модель руки имеет вложенную структуру суставов (что означает, что суставы будут иметь разные базовые пространства); fillPoses можно использовать для получения одновременно всех поз суставов с одинаковым базовым пространством — рекомендуется, когда используется модель с простой структурой суставов (например, опубликованная приложением Browser). Если используется 3D-библиотека, данные о позах суставов могут быть доступны через API более высокого уровня. В THREE.js данные о суставах хранятся и обновляются в поле "joints" класса WebXRController⁠; В Babylon.js 25 сеток суставов, которые по умолчанию невидимы, будут созданы и сохранены в поле trackedMeshes класса WebXRHand⁠.

Обновление узлов суставов в моделях рук с использованием данных отслеживания движений рук: после загрузки моделей рук и получения доступа к данным отслеживания движений суставов все остальные операции сводятся к простому копированию положения и ориентации каждого сустава из данных отслеживания движений рук в соответствующие модели. Названия суставов для индексного сопоставления доступны в разделе Суставы скелета⁠ спецификаций модуля ввода рук WebXR.

Примеры использования функции WebXR Hands:

Общий пример использования рук: Иммерсивный VR-сеанс с функцией Hands

Общие примеры использования рук с THREE.js:

Пример ввода с использованием рук⁠ — общая демонстрация настройки рук в THREE.js

Пример использования рук с кубами⁠ — использование рук для создания кубов

Пример профиля рук⁠ — переключение между различными моделями использования рук

Расширенные примеры использования рук с THREE.js:

Пример нажатия кнопки⁠ — использование обнаружения столкновения для запуска событий, когда пользователь нажимает кнопку

Пример указывания и клика⁠ — использование целевого луча в форме капли для указывания пальцем и клика кнопок в сцене

Пример указывания и перетаскивания⁠ — использование целевого луча в форме капли для перетаскивания объектов в сцене