画像読み込みの例

Udonを使用すると、インターネットから画像を読み込み、UI要素やワールド内のオブジェクトのテクスチャとして表示することができます。以下のサンプルワールドでは、このシステムの仕組みと、GitHubを使用して画像やキャプションをホストする方法を解説しています。

サンプルワールド

サンプルプロジェクトをダウンロードするか、GitHubリポジトリにアクセスしてクローンしてください。

このシーンには、対応するキャプションと共に表示する画像を自動的に切り替えるフォトフレームが設置されています。画像とキャプションはどちらもGitHub Pagesで無料でホストされており、上記のGitHubリポジトリに含まれています。

シーンファイル: Assets/_Project/Gallery

プレハブをワールドで使用する

プレハブを使用するには、プロジェクトに追加し、画像キャプションのURLを設定する必要があります。

このリポジトリは、無料ホスティングのために GitHub Pages へ公開します。画像やキャプションはどこにホストしても構いませんが、GitHub Pagesは無料で設定が簡単であり、ワールドと同じリポジトリ内に画像やキャプションを保持できるため、利用を推奨します。別の場所にホストする場合は、ステップ4に進んでください。

1. サンプルリポジトリをフォークして、自身のGitHubアカウントに作成します。

2. "Web"ディレクトリ内の画像とキャプションを編集します。index.htmlページはブラウザ上で画像とキャプションをテストするためのサンプルに過ぎないため、無視または削除して構いません。プレハブを利用しやすくするために画像名を 1.jpg などにしておくか、名前を変更してプレハブのURLを更新してください。

3. リポジトリをコンピュータにクローンします。

4. プロジェクトにSDK 3.2.3以降、およびClientSimとUdonSharpが含まれていることを確認してください。これらはCreator Companionから簡単に追加できます。

5. Prefab Unitypackageをプロジェクトにインポートします。

6. SlideshowFrameプレハブをシーンにドラッグします。

7. シーンのInspectorでSlideshowFrameを選択します。

8. SlideshowFrameコンポーネントで、Image Urls配列のサイズを読み込みたい画像の数に合わせ、各URLを自身の画像URLに更新します。GitHub Pagesを使用する場合、URLの形式は https://<your-github-username>.github.io/<your-repo-name>/1.jpg となります。

9. String Urlを自身のキャプション用URLに更新します。GitHub Pagesを使用する場合、URLの形式は https://<your-github-username>.github.io/<your-repo-name>/captions.csv となります。

動作テスト

GitHubを使用して画像やキャプションをホストしている場合は、変更をGitHubにコミットおよびプッシュしたことを確認してください。これによりGitHub Actionがトリガーされ、ファイルがGitHub Pagesに公開されます。

1. UnityでPlay Modeに入ります。
2. 画像とキャプションは自動的に読み込まれるはずです。読み込まれない場合は、Consoleにエラーが出ていないか確認してください。
3. Build and Testを実行し、VRChatでも動作することを確認します。設定で「Untrusted URLs」をオンにする必要があるかもしれません。

重要なGameObject

シーン内で確認すべき最も重要なオブジェクトは、TheFrameとSlideshowFrameです。

TheFrame

TheFrameは、いくつかの重要な要素を持つGameObjectです。

• SlideshowFrame: ウェブサーバーから画像とキャプションを読み込むUdonBehaviourです。
• Mesh: 写真の周囲にある黒い枠です。
• Picture: ダウンロードしたテクスチャを描画するMeshです。
• UI: キャプションを描画するワールドスペースのCanvasです。

SlideshowFrame

SlideshowFrame UdonBehaviour には、Webサーバーから画像やキャプションをダウンロードするためのすべてのロジックが含まれています。

以下のパブリック変数が用意されています：

• Image Urls: ダウンロードする画像の VRCUrls を格納する Array です。
• String Url: キャプションテキストをダウンロードするための単一の VRCUrl です。
• Renderer: このターゲット Renderer の sharedMaterial に、ダウンロードしたテクスチャが設定されます。
• Field: この UI Element の text プロパティに、対応するテクスチャのダウンロード済みキャプションが設定されます。
• Slide Duration Seconds: 各画像を表示する時間です。

スクリプトの基本的なロジックフローは以下の通りです：

Image Downloaderを作成する

Using the ImageDownload ImageDownload スクリプトを使用して画像をダウンロードする

SDKには、画像を簡単にダウンロードするためのスクリプトが含まれています：

1. シーンに新しいGameObjectを作成します。
2. UdonBehaviourコンポーネントを追加します。
3. ImageDownloadをプログラムソースとして選択します。
4. ダウンロードしたテクスチャを適用するMaterialを選択します。
5. （任意）TextureInfoをカスタマイズして、ダウンロードするテクスチャの設定を変更します。

独自のスクリプトを作成して VRCImageDownloader

独自のUdon GraphスクリプトでVRCImageDownloaderを使用できます。

1. Constructorノードを使用して、新しいVRCImageDownloaderオブジェクトを作成します。
2. 新しく作成したVRCImageDownloaderを変数として保存します。（これは required です。）
3. VRCImageDownloaderインスタンス上でDownloadImage関数を実行します。
4. （任意）OnImageLoadSuccessまたはOnImageLoadErrorイベントの実行を待機します。

スクリプトの基本的なロジックフローは以下の通りです。

1. On StartでVRCImageDownloaderを構築し、すべての画像のダウンロードに再利用します。テクスチャを保持するために、このインスタンスを維持しておくことが重要です。

// It's important to store the VRCImageDownloader as a variable, to stop it from being garbage collected!
_imageDownloader = new VRCImageDownloader();

2. String Urlからキャプション／文字列をダウンロードします。

文字列のダウンロードに成功したら、行ごとに分割して個別の文字列にし、それらを_captions配列に保存します。ダウンロードに失敗した場合は、エラーメッセージをログに出力します。

private void Start()
{
    // To receive Image and String loading events, 'this' is casted to the type needed
    _udonEventReceiver = (IUdonEventReceiver)this;
        
    // Captions are downloaded once. On success, OnImageLoadSuccess() will be called.
    VRCStringDownloader.LoadUrl(stringUrl, _udonEventReceiver);
}

public override void OnStringLoadSuccess(IVRCStringDownload result)
{
    _captions = result.Result.Split('\n');
    UpdateCaptionText();
}

public override void OnStringLoadError(IVRCStringDownload result)
{
    Debug.LogError($"Could not load string {result.Error}");
}

3. 次の画像を読み込みます。_loadedIndexをインクリメントして現在位置を追跡し、先ほど保存したダウンローダーでDownloadImage()を呼び出します。

画像のダウンロードに成功した場合はその参照を保存し、Rendererに読み込ませます。失敗した場合はエラーメッセージをログに出力します。

4. SlideDurationSecondsだけ遅延させて、再度次の画像を読み込む関数を呼び出します。_loadedIndexは読み込み呼び出しのたびにインクリメントされ、配列内の最後のURLに到達すると最初に戻ります。

各画像が2回目以降に表示される際は、初回ダウンロードに失敗した場合を除き、新たに読み込まれるのではなく保存済みのTexture2D参照から表示されます。

既知の問題

• 最初の画像のキャプションの読み込みが間に合わず、最初のループが一周するまで表示されません。