Интеграция VIVERSE Avatar SDK

Wonderland Engine — отличный выбор для создания высокопроизводительных 3D веб и WebXR игр, так как он оптимизирован для быстрого загрузки и хорошо работает даже на iOS Safari. В этом руководстве рассматривается, как интегрировать услуги SDK VIVERSE.

Баннер интеграции Wonderland Engine × VIVERSE

Wonderland Engine — лучший выбор для создания высокопроизводительных 3D веб-приложений, которые должны работать плавно в VR. Он оптимизирован для производительности WebXR и быстрой загрузки. Он быстро работает в мобильных браузерах, включая iOS Safari, и автономные гарнитуры VR.

Это руководство объясняет, как интегрировать сервисы платформы VIVERSE, используя Universal Platform SDK (UPSDK) от Wonderland Engine и провайдер VIVERSE.

Ссылки

Предварительные условия 

Начните с нового или существующего проекта Wonderland Engine.

Создайте учетную запись VIVERSE на VIVERSE и создайте мир/приложение в VIVERSE Studio, чтобы получить appId для публикации вашего проекта.

Установите наш Universal Platform SDK (UPSDK) через npm вместе с провайдером VIVERSE.

npm i --save @wonderlandengine/upsdk \
    @wonderlandengine/upsdk-provider-viverse

Настройка 

Зарегистрируйте провайдера как можно раньше в точке входа вашего приложения app.js:

import {user} from "@wonderlandengine/upsdk";
import {ViverseProvider} from "@wonderlandengine/upsdk-provider-viverse";

const provider = new ViverseProvider({
    appId: APPLICATION_ID, // замените на ваш реальный appId из VIVERSE Studio
    debug: false, // установите `true`, чтобы включить отладочного пользователя/аватара для тестирования.
});

user.registerProvider(provider);

/* wle:auto-constants:start */
// ...

Получите appId, создавая Мир/Приложение в VIVERSE Studio.

Загрузка Аватара 

После регистрации провайдера можно запросить вход и прочитать возвращаемый объект пользователя. Типичное использование в компоненте выглядит так:

import {user} from "@wonderlandengine/upsdk";
import {Vrm} from '@wonderlandengine/components';


// Внутри компонента:

static onRegister(engine) {
    engine.registerComponent(Vrm);
}

user.requestLogin()
    .then((u) => {
        // Используйте u.name и u.avatarUrl в вашем приложении
        this.object.addComponent(Vrm, {
            src: u.avatarUrl,
        });
        console.log(`Аватар для ${u.name} загружен`);
    })
    .catch((err) => {
        console.error("Вход не удался:", err);
    });

Плагин Публикации VIVERSE 

Плагин публикации является необязательным. Он оборачивает SDK viverse-cli и помогает публиковать ваш проект Wonderland Engine непосредственно из редактора.

Установка Плагина 

Перейдите в Виды > Плагины и включите выполнение плагинов для вашего проекта. Затем перейдите на вкладку “Область проекта” и нажмите “Установить” рядом с @wonderlandengine/viverse-publish-plugin.

Наконец, включите плагин.

Использование (внутри редактора Wonderland) 

  1. Вид → Плагины → Плагин публикации VIVERSE.
  2. Введите ваше имя пользователя VIVERSE и пароль и войдите в систему через UI плагина.
  3. Используйте Создать приложение (что перенаправит на VIVERSE Studio) для создания приложения и получения идентификатора приложения или Просмотреть список приложений для получения существующих appId в консоли редактора.
  4. Введите appId и нажмите Опубликовать в VIVERSE, чтобы сгенерировать кнопку Открыть URL предварительного просмотра.
  5. Нажмите Отправить на проверку, чтобы открыть страницу приложения VIVERSE Studio, где вы можете отправить свое приложение на проверку. Оттуда вы также можете получить ссылку для предварительного просмотра для гостей и поделиться ею.

Устранение неполадок 

  • appId не найден / неверный: убедитесь, что вы создали приложение или мир в VIVERSE Studio и скопировали правильный ID.
  • requestLogin() отклонено: проверьте логи сети и отладочные сообщения провайдера. Если debug: true работает, а debug: false нет, перепроверьте ваш appId и конфигурацию VIVERSE Studio.
  • Высокое потребление памяти из-за текстур аватара: уменьшите изображения и упростите сетку перед загрузкой аватара.
  • Ошибка входа через плагин редактора: убедитесь, что у редактора есть доступ к сети и что ваш логин/пароль правильны. Проверьте консоль редактора на наличие ошибок плагина.

Если у вас все еще возникают трудности, пожалуйста, свяжитесь с нами через наше Сообщество Discord, мы будем рады помочь!

Integrate the CrazyGames SDK Introduction to Texture Atlasses