WebXR Входные источники в PlayCanvas

Входной источник

XrInputSource представляет собой механизм ввода, который позволяет пользователю взаимодействовать с виртуальным миром. К ним относятся, но не ограничиваются: портативные контроллеры, оптически отслеживаемые руки, методы ввода на основе взгляда и сенсорные экраны. Однако входной источник не связан непосредственно с традиционными геймпадами, мышами или клавиатурами.

Доступ к входным источникам

Список входных источников доступен в менеджере XrInput, который создается XrManager:

var inputSources = app.xr.input.inputSources;
for (var i = 0; i < inputSources.length; i++) {
    // перебираем каждый доступный источник ввода
}

Входные источники могут добавляться и удаляться динамически. Это можно сделать, подключив физические устройства или переключив входные устройства на базовой платформе, и некоторые входные источники имеют срок службы только во время их основного действия (например, сенсорный экран в сессии типа AR на мобильном устройстве). Вы можете подписаться на события add и remove:

app.xr.input.on('add', function (inputSource) {
    // источник ввода добавлен

    inputSource.once('remove', function () {
        // знать, когда источник ввода был удален
    });
});

Основное действие (выбор)

Каждый источник ввода может иметь основное действие select. В случае источников ввода на основе взгляда это касание экрана/кнопки. На портативных устройствах это основная кнопка/спусковой крючок. Для отслеживаемых рук оно эмулируется движком PlayCanvas, когда кончики большого и указательного пальцев касаются друг друга. Также есть события selectstart и selectend, на которые вы можете подписаться следующим образом:

inputSource.on('select', function () {
    // основное действие
});

Или через диспетчер ввода:

app.xr.input.on('select', function (inputSource) {
    // основное действие
});

Луч

У каждого источника ввода есть луч, который имеет начало, откуда он указывает, и направление, в котором он указывает. Луч преобразуется в мировое пространство. Некоторые примеры источников ввода могут быть, но не ограничиваются:

Ввод на основе взгляда, например, мобильное устройство, которое вставляется в устройство в стиле Google Cardboard™. У него будет источник ввода с targetRayMode, установленным на pc.XRTARGETRAY_GAZE, и будет исходить из позиции зрителя и указывать прямо туда, куда смотрит пользователь.
Ввод на основе экрана. Такой ввод может быть доступен на мобильных устройствах в типах сеансов дополненной реальности, где пользователь может взаимодействовать с виртуальным миром с помощью сенсорного экрана.
Ручные устройства, такие как Oculus Touch™, будут иметь луч, исходящий из кончика ручного устройства, а направление основано на вращении устройства.
Отслеживаемые руки имеют эмулированный движком PlayCanvas луч, который исходит из точки между кончиками большого и указательного пальцев и указывает вперед.

Вот пример, иллюстрирующий, как проверить, пересек ли луч ограничивающую рамку сетки:

// обновить луч с данными источника ввода
ray.set(inputSource.getOrigin(), inputSource.getDirection());
// проверить, пересекается ли ограничивающая рамка сетки с лучом
if (meshInstance.aabb.intersectsRay(ray)) {
    // источник ввода указывает на сетку
}

Grip

Некоторые источники ввода связаны с физическим портативным устройством, таким как Oculus Touch™, и могут иметь положение и вращение. Их положение и вращение предоставляются в мировом пространстве.

if (inputSource.grip) {
    // может отображать модель устройства
    // позиционировать и вращать связанный объект с моделью
    entity.setPosition(inputSource.getPosition());
    entity.setRotation(inputSource.getRotation());
}

GamePad

Если платформа поддерживает WebXR Gamepads Module, то у источника ввода может быть связанный с ним объект GamePad, который можно использовать для получения состояний кнопок, триггеров, осей и другого оборудования для ввода:

var gamepad = inputSource.gamepad;
if (gamepad) {
    if (gamepad.buttons[0] && gamepad.buttons[0].pressed) {
        // пользователь нажал кнопку на геймпаде
    }
}

Руки

Если платформа поддерживает WebXR Hand Input, то источник ввода может иметь связанные с ним данные о руке, которые представлены в виде XrHand и предоставляют удобную информацию в виде XrFinger и XrJoint для использования разработчиком приложения, такую как запястье, пальцы, каждый сустав, кончики и события для обнаружения потери/восстановления отслеживания рук.

Создание базовой модели руки:

var joints = [ ];
var hand = inputSource.hand;

if (hand) {
    for(var i = 0; i < hand.joints.length; i++) {
        var entity = new pc.Entity();
        entity.joint = hand.joints[i];
        entity.addComponent('model', { type: 'box' });
        parent.addChild(entity);
        joints.push(entity);
    }
}

И синхронизация при каждом обновлении:

для (var i = 0; i < joints.length; i++) {
    var entity = joints[i];
    var joint = entity.joint;
    var radius = joint.radius * 2;
    entity.setLocalScale(radius, radius, radius);
    entity.setPosition(joint.getPosition());
    entity.setRotation(joint.getRotation());
}

Профили

Каждый источник ввода может иметь список строк, описывающих тип источника ввода, который описан в реестре профилей. Основываясь на этом, вы можете определить, какую модель отображать для портативного устройства или какие возможности оно может иметь. Кроме того, реестр профилей содержит информацию о сопоставлении кнопок и осей геймпада.

if (inputSource.profiles.indexOf('oculus-touch-v2') !== -1) {
    // это портативное устройство Oculus Touch™
}

Учебные материалы

PlayCanvas предоставляет ряд учебных материалов и примеров по использованию функциональности WebXR. Пользователи могут создать их копии и изучить, как код и компоненты структурированы, чтобы использовать XR.