VIVERSE Avatar SDKの統合

Wonderland Engineは、3DウェブやWebXRのゲームを高性能に構築するための 優れた選択肢であり、読み込みが速く、iOS Safariでもスムーズに動作します。 このチュートリアルでは、VIVERSE SDKサービスの統合方法を説明します。

Wonderland Engine × VIVERSE Integration Banner

Wonderland Engineは、VRでスムーズに動作する高性能な3Dウェブ体験を構築するための最適な選択肢です。WebXRの性能と高速な読み込み時間に最適化されており、iOS Safariを含むモバイルブラウザやスタンドアロンのVRヘッドセットでも高速に動作します。

このガイドでは、Wonderland EngineのUniversal Platform SDK (UPSDK)とVIVERSEプロバイダーを使用してVIVERSEプラットフォームサービスを統合する方法を説明します。

リンク

前提条件 

新規または既存のWonderland Engineプロジェクトから始めます。

VIVERSEでアカウントを作成し、VIVERSE Studioでワールド/アプリケーションを作成して、プロジェクトを公開するためのappIdを取得します。

npmを通じてUniversal Platform SDK (UPSDK)と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, // VIVERSE Studioから取得した本当のappIdに置き換えてください
    debug: false, // テスト用のデバッグユーザー/アバターのために`true`に設定
});

user.registerProvider(provider);

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

VIVERSE Studioでワールド/アプリケーションを作成して、appIdを取得します。

アバターを読み込む 

プロバイダーが登録されたら、ログインをリクエストして、返されたユーザーオブジェクトを読むことができます。コンポーネント内での典型的な使用方法は以下のようになります：

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公開プラグイン 

公開プラグインはオプションです。viverse-cli SDKをラップし、Wonderland Engineプロジェクトをエディターから直接VIVERSEに公開するのを助けます。

プラグインのインストール 

Views > Plugins に移動し、プロジェクトのプラグイン実行を有効化します。それから「プロジェクト範囲」タブに切り替え、@wonderlandengine/viverse-publish-pluginの横にある「インストール」をクリックします。

最後に、プラグインを有効にします。

使用方法（Wonderlandエディター内） 

  1. 表示 → プラグイン → VIVERSE公開プラグイン。
  2. VIVERSEのユーザー名とパスワードを入力し、プラグインUI経由でログイン。
  3. Create Application（VIVERSE Studioにリダイレクト）を使用してアプリケーションを作成し、アプリケーションIDを取得するか、Log App Listを使用してエディターコンソールで既存のappIdを取得。
  4. appIdを入力し、Publish to viverseをクリックしてOpen Preview URLボタンを生成。
  5. Submit to reviewをクリックして、アプリをレビューのために提出するVIVERSE Studioアプリケーションページを開く。そこからゲストプレビューリンクを取得して共有することも可能。

トラブルシューティング 

  • appIdが見つからない/無効: VIVERSE Studioでアプリケーション/ワールドを作成し、正しいIDをコピーしたことを確認してください。
  • requestLogin()が拒否される: ネットワークログやプロバイダのデバッグメッセージを確認してください。debug: trueが機能するが、debug: falseが機能しない場合、appIdとVIVERSE Studioの設定を再確認してください。
  • アバターテクスチャによる高メモリ使用: 画像をリサイズし、アバターを読み込む前にメッシュを簡素化してください。
  • エディタープラグインのログインエラー: エディターがネットワークにアクセスできること、およびユーザー名/パスワードが正しいことを確認してください。プラグインのエラーについてはエディターコンソールをチェックしてください。

問題が続く場合は、Discordコミュニティにてお尋ねください。お手伝いします！

Integrate the CrazyGames SDK Introduction to Texture Atlasses