Использование WebXR в PlayCanvas

Поддержка WebXR

Поддержка WebXR в браузерах пока не является универсальной. Ее можно проверить следующим образом:

if (app.xr.supported) {
    // WebXR поддерживается
}

Запуск XR сессии

API для входа в XR находится на компоненте камеры или XrManager в приложении. Чтобы начать представление VR, вы должны использовать метод startXr на CameraComponent и указать тип XR сессии, ссылочное пространство и дополнительный объект с дополнительными аргументами:

entity.camera.startXr(pc.XRTYPE_VR, pc.XRSPACE_LOCALFLOOR);

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

app.xr.on('start', function () {
    // XR сессия началась
});

Тип сессии или пространство ссылок может быть недоступно на определенной платформе, поэтому сессия не сможет запуститься, вызывая ошибку в обратном вызове и запуская событие error на XrManager:

entity.camera.startXr(pc.XRTYPE_VR, pc.XRSPACE_UNBOUNDED, {
    callback: function(err) {
        if (err) {
            // не удалось запустить сессию
        }
    }
});

Завершение сеанса XR

Выход из XR может быть инициирован различными способами. Вы можете инициировать выход из XR с помощью кода:

app.xr.end();

Также пользователь может выйти из XR через какой-то внешний процесс, например, кнопку "назад" в браузере. XrManager запустит события, связанные с окончанием сессии end:

app.xr.on('end', function () {
    // XR сессия завершилась
});

Типы XR

Каждая платформа может поддерживать разные типы сессий. Вот они:

• VR (Виртуальная реальность) - обеспечивает определенный уровень отслеживания зрителя и предоставляет исключительный доступ к устройству XR. Это означает, что приложение будет отображаться на буфере кадров устройства, а не на элементе HTML-холста.
• AR (Дополненная реальность) - этот тип сессии предоставляет исключительный доступ к устройству XR, и контент должен смешиваться с реальной окружающей средой. В этом режиме цвет камеры должен быть прозрачным.

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

if (app.xr.isAvailable(pc.XRTYPE_VR)) {
    // VR доступен
}

И вы также можете подписаться на события изменения доступности:

app.xr.on('available', function (type, available) {
    console.log('XR сессия', type, 'тип теперь', available ? 'доступна' : 'недоступна');
});

// или конкретный тип сессии
app.xr.on('available:' + pc.XRTYPE_VR, function (available) {
    console.log('XR сессия типа VR теперь', available ? 'доступна' : 'недоступна');
});

Позиция и ориентация камеры в XR

Когда вы используете XR, позиция и ориентация камеры перезаписываются данными из сеанса XR. Если вы хотите реализовать дополнительное движение и вращение камеры, вы должны добавить родительский объект Entity к вашей камере и применить ваши манипуляции к этому объекту.

Луч источника ввода, а также позиция и вращение рукоятки и рук предоставляются в мировом пространстве.

Почему я не могу автоматически включить режим XR?

Вход в WebXR требуется браузерами для запуска пользовательским действием. Это означает, что это должно быть в ответ на нажатие клавиши, щелчок мыши или касание. По этой причине нет способа войти в XR сразу после загрузки страницы.

Экспериментальные функции

API WebXR постоянно развивается, и выпускаются дополнительные API, расширяющие набор функций XR. Хотя движок постоянно обновляется с интеграциями для API XR, некоторые функции могут появиться с задержкой. Разработчикам, желающим экспериментировать с новыми функциями, можно включить их, передав соответствующие флаги optionalFeatures. Имейте в виду: доступ к внутренним не задокументированным API подвержен изменениям движка, которые не гарантируют обратную совместимость. Вот пример включения экспериментального API для WebXR Layers:

app.xr.start(cameraComponent, pc.XRTYPE_VR, pc.XRSPACE_LOCAL, {
    optionalFeatures: [ 'layers' ],
    callback: function(err) {
        if (err) {
            console.log(err);
            return;
        }

        if (app.xr.session.renderState.layers) {
            // получить доступ к WebXR Layers
        }
    }
});

Issue Tracker

Tutorial Thumbnail

Entity

Material Asset

Material Inspector

Shader Editor

####### Node Inspector

######## Texture Inspector

######### Graph Inspector

########## Asset

########### Graph Editor

############ Assets