バーチャル3Dクリエイター神部まゆみです(*^-^*)
この記事は自作VRChatワールドで画像URLを読み込んで表示してみたからそれについての記事です。
動作確認した最新の環境はunity 2022.3.22、SDK 3.8.2です。
現在、3D建物系アセットが50%オフで買える Unityパブリッシャーセール をやってるみたいです(2025/10/02 23:59まで)。
クーポンコード 3DFORGE2025 を使うと、↓3Dの洞窟を手軽に作れるCave Adventure Kitアセットがタダで貰えます(決済時にクーポンコード入力適用で0円に)。
BOOTHでVRoidテクスチャやVRChat向けオブジェクトなどを販売しています。いいねしてくれると励みになります(*^-^*)
やりたいこと 自作VRChatワールドで画像URLを読み込んでワールドに表示させる
画像URLから画像を読み込んで表示できれば、画像を差し替えるだけで画像を変えられてワールドをアップロードし直す手間がない。
以前動画URLを埋め込んでみたけど、動画ができたのだから画像もできるでしょう。
【試行錯誤の記録】優秀なChatGPTパイセンに聞いてみたが…
ここは試行錯誤したらできなかった記録なので、早く画像URLを読み込む方法を知りたい人は下の方から見てください。
VRChatワールド作成で質問です。
動画をワールドに埋め込む場合は自前のサーバーにアップした動画を読み込めるのですが、画像も読み込むことができるのでしょうか？その場合は画像を変更すればちゃんとワールドに反映されるのでしょうか？
以上よろしくお願いします。
VRChatワールドに画像を埋め込むことは可能です。自前のサーバーにアップロードした画像を使用する場合、そのURLを使用してワールド内のオブジェクトに画像を表示させることができます。
〇手順
①画像のアップロード：画像を自前のサーバーにアップロードし、そのURLを取得します。
②Unityでの設定：UnityでVRChatのワールドを作成中の場合、「Canvas」や「Quad」などのオブジェクトに「Renderer」コンポーネントを追加し、マテリアルの「Main Texture」に画像のURLを指定します。
③VRC SDKの使用：VRC SDKの「VRC_Panorama」コンポーネントを使用すると、URLから直接画像を読み込んで表示させることができます。このコンポーネントをオブジェクトに追加し、URLフィールドに画像のURLを入力します。
〇画像の変更と反映
自前のサーバーにアップロードした画像を変更すると、URLが同じであればVRChatワールド内でも自動的に変更が反映されます。キャッシュの問題がある場合、キャッシュをクリアするか、URLを更新することで最新の画像を表示させることができます。
以下の点に注意してください：
・キャッシュ：VRChatやブラウザにはキャッシュがあるため、画像の変更がすぐに反映されない場合があります。この場合は、キャッシュをクリアするか、画像のURLを一時的に変更することで対応できます。
・更新のタイミング：ワールドがオンラインで公開されている場合、すべてのユーザーに画像の変更がリアルタイムで反映されるかどうかを確認するためにテストが必要です。
〇まとめ
・自前のサーバーにアップロードした画像をVRChatワールド内で使用可能。
・画像のURLを指定して表示させる。
・画像を変更すれば同じURLであれば自動的に反映されるが、キャッシュの問題に注意。
この方法でVRChatワールド内に画像を表示し、変更が反映されることを確認してみてください。何か他に質問があれば教えてください。
VRC_Panoramaコンポーネントなんてないぞ…？
ChatGPT氏が言うVRC_Panoramaコンポーネントなんてなかったですね…。
AssetフォルダにもPackagesフォルダにもないから本当になさそうですね…。
検索したら↓こちらの優秀な先輩のnote記事が出てきたけど、どうもSDK2にあった機能らしいです。
2023/07/20追記 VRC_PanoramaはSDK2にある機能で、現在主流のSDK3では扱うことが出来ない。 しかし、SDK3のVideoPlayerを使うことで、扱うコンテンツは動画になるが似たような機能を使うことが出来る。
もうSDK3になってだいぶ経つからこれは使えなさそう。
代わりにUdonでやる方法があるらしい
公式マニュアルみたらUdonノードグラフでできるっぽい
生成AIよりまず公式マニュアルを先に頼るべきでしたね(;^_^A
UdonGraphノード
VRCImageDownloader(英語)
のコンストラクタを使用して、実行時にインターネットからイメージをダウンロードできるイメージダウンローダを作成します。VRCImageDownloaderダウンロード画像
イメージをダウンロードし、成功または失敗を示すイベントを呼び出します (以下の「イベント」を参照)。
ダウンロードの進行状況を追跡するために使用できる を返します。IVRCImageDownload
というかここに公式のサンプルがあるな…もうこれでいいか…。
ダウンロードしてみたら2019.4.31の古いプロジェクトだったのでVCCでSDKをアップデートしていく必要があったけど、普通に動いた。
このスクリプトURLをgithubとかDropboxに自前の画像アップすればいけるか…。
でもUdonノードグラフでできるなら手軽だからまずそちらでやってみようかな。
UdonノードグラフでImageDownLoader見つけた！
検索したら出ました。
URLとかマテリアルを作って繋げていけば良いのかな？
ノードグラフはイミフすぎて諦めた(´；ω；`)
……↓ここまで試行錯誤してみたけど動かなかったので諦めた。
URLとレンダーテクスチャを設定したマテリアルを読み込ませることはできたけど、この後どれをどうやれば表示させられるのかよく分からなかった。
ノードグラフこれ分かりづら過ぎんか…？必須の要素は自動で追加してくれるとかなら分かりやすいんですけどね。
簡単なギミックならすぐできて便利なんだけども。
公式サンプルとChatGPTパイセンの力でやったらできた
結局公式サンプルをChatGPTに書き換えてもらう形でできました。
別にスライドショーさせる必要はないので、画像を一枚表示させたいだけです。
指定した画像URLを読み込んで表示するUdon#のコード
公式サンプルのやつは複数の画像URLを読み込んでスライドショー表示するヤツだったけど、単に一つの画像を読み込ませたいだけなのでシンプルにした。
公式サンプルのやつは読み込み失敗した時の処理とかも書いてあったけど、読み込み失敗したら単に表示されないだけでいいだろうと思って消しましたｗ
using UdonSharp;
using UnityEngine;
using VRC.SDK3.Image;
using VRC.SDKBase;
using VRC.Udon.Common.Interfaces;
[UdonBehaviourSyncMode(BehaviourSyncMode.None)]
public class SingleImageFrame : UdonSharpBehaviour
{
[SerializeField, Tooltip("URL of the image to load")]
private VRCUrl imageUrl;
[SerializeField, Tooltip("Renderer to show downloaded image on.")]
private new Renderer renderer;
private VRCImageDownloader _imageDownloader;
private IUdonEventReceiver _udonEventReceiver;
private void Start()
{
// Initialize the image downloader
_imageDownloader = new VRCImageDownloader();
// To receive Image and String loading events, 'this' is casted to the type needed
_udonEventReceiver = (IUdonEventReceiver)this;
// Download the image
var rgbInfo = new TextureInfo();
rgbInfo.GenerateMipMaps = true;
_imageDownloader.DownloadImage(imageUrl, renderer.material, _udonEventReceiver, rgbInfo);
}
public override void OnImageLoadSuccess(IVRCImageDownload result)
{
renderer.sharedMaterial.mainTexture = result.Result;
}
}導入方法
①画像を表示するレンダーテクスチャとマテリアルを作成し、マテリアルにレンダーテクスチャを設定します。
シェーダーはどのプラットフォームでも表示できる VRChat/Mobile/Toon Lit が良いかな。
Unlit系のシェーダーなら見やすいと思う。
②画像を表示させるPlaneオブジェクトを作成して、↑で作ったマテリアルを適用する。
後でもいいけど、適当にPlaneの回転や位置を調整して動作確認しやすくしといてください。
③PlaneオブジェクトにUdon Behaviorを追加して、Udon C#で新規作成、ファイル名を SingleImageFrame.cs にして上記コードをコピペする。
普通にコンパイル通りましたね。
↓でもこの後ImageURLのテキストフィールドに入力できないバグがあったので、unityエディターを再起動したら直りました。
Udonのコンパイル時はちょくちょく不具合や反映が遅いことがあるので、ダメならunityエディター再起動したり、最初からやり直してみると上手くいくかもしれません。あんまり挙動は安定していないような…？
④追加したスクリプトのコンポーネントに画像URLとPlaneのメッシュレンダラーを設定する。
これで表示できました！向きやサイズは調整してないのでテキトーだけど(;^_^A
表示先のオブジェクトの向きやサイズで表示がおかしくなるので、まぁそこはトランスフォームで調整してくださいｗ
ウェブページではないのでHTMLやCSSで見栄えを調整したりとかはできないです。
画像をアップする場所は後述の許可リストに入っているプラットフォームが無難だけど、Allow Untrusted URLsをオンにしていればとりあえず動作確認はできます。
とりあえず私のブログのヘッダー画像は読み込めたので、↓動作確認に勝手にURLを指定してもらっても構いません。
https://knb-mayumi.com/wp-content/uploads/2021/02/header200.png
画像は許可リストのドメインにアップしたほうが良いっぽい
許可リストに入っていないドメインにアップした画像は、ユーザーの設定によって読み込みされないみたいです。
また、特定のドメインのみが許可されます。ドメインがリストにない場合、ユーザーの設定で「信頼できないURLを許可する」(Allow Untrusted URLs)が有効になっていない限り、画像はダウンロードされません。
ちなみにAllow Untrusted URLsの設定はここにあります。
デフォルトで画像読み込みが許可されているドメインリスト
2025/09/13現在だと以下のドメインリストがデフォルトで許可されているようです。
DisBridge (.disbridge.com)
Dropbox (dl.dropbox.com,dl.dropboxusercontent.com)
GitHub (.github.io)
ImageBam (images4.imagebam.com)
ImgBB (i.ibb.co)
imgbox (images2.imgbox.com)
Imgur (i.imgur.com)
Postimages (i.postimg.cc)
Reddit (i.redd.it)
Twitter (pbs.twimg.com)
VRCDN (*.vrcdn.cloud)
VRChat (assets.vrchat.com)
Ytimg (i.ytimg.com)
DropBoxに登録して画像を上げてみる
DropBoxアカウント持ってたっけな…？
私のアカウントでは持っていなかった気がするのでアカウント作るところからやってみます。
↓Googleアカウントで登録、2GBのベーシックプラン、デスクトップアプリインストールなしでやりましたがこのあたりは好みで。
ブログのヘッダー画像をアップしてみました。
DropBoxの共有URLを書き換える
画像をアップして共有設定できたけど、URLはこんな感じ。
https://www.dropbox.com/scl/fi/oop1j8da9s42obso7lzmf/header200.png?rlkey=vg98m5b9i5ujapsvgo7srx6tw&st=5xn58r0y&dl=0
しかしVRChatの許可リストのドメインは dl.dropbox.com か dl.dropboxusercontent.com になっているのでURLを変換しないとダメっぽい？↑のURLでは表示されなかった。
しかし単純にwwwをdlに書き換えただけじゃダメっぽいな…。
検索したらこちらの優秀な先輩のページが出たけど、末尾の dl=0 をraw=1 にすると良いっぽい？
Dropboxヘルプセンターにrlkeyを導入すること及び利用方法(レンダリングの強制 )の説明があります。この中で、ブラウザで直接画像を表示するには、つまりWordPressなどでリンク表示する場合は、raw=1を使ってリダイレクトをさせて使用するように指示が書かれています。まだ移行が完了したとはしていないので、今後とも何らかの仕様の変更があるかも知れません。ウオッチする必要があります。
最終的に以下のURLなら表示されました。
https://dl.dropboxusercontent.com/scl/fi/oop1j8da9s42obso7lzmf/header200.png?rlkey=vg98m5b9i5ujapsvgo7srx6tw&st=5xn58r0y&raw=1
↓なにもいじってない元のURLはこっち。
https://www.dropbox.com/scl/fi/oop1j8da9s42obso7lzmf/header200.png?rlkey=vg98m5b9i5ujapsvgo7srx6tw&st=5xn58r0y&dl=0
- www.dropbox.com ⇒ dl.dropboxusercontent.com に書き換える
- dl=0 ⇒ raw=1 に書き換える
これでできた。
dl.dropboxusercontent.com は、dl.dropbox.com に書き換えてブラウザで見てみたらリダイレクトされてこのURLになってたので、これでやってみたら行けました。
他のファイルで上手くいくかは不明。ちょくちょく仕様が変わってるっぽいし、公式サンプルで動いたgithubのほうが無難かも？(~_~;)
Allow Untrusted URLsをオフにした別アカウントでも読み込めたので多分大丈夫だと思います。
画像ファイルを編集して、ちゃんと反映されるか確認する
そもそも画像URLで埋め込むメリットは、アップロードした画像を差し替えればワールドをアップロードしなおさなくても画像を変えられること。
DropBoxで画像を編集して、ちゃんとワールドに反映されるか確認します。
幸いDropBoxは反転とか回転程度の編集はすぐできるっぽいので、左右反転して上書きします。
おっ、ちゃんとワールドにも反映されましたね。
直前に画像差し替え前のワールドを読み込んでいたけど、画像差し替えてからワールド読み込み直したらもう反映されてたから多分大丈夫かな？
これならイベントカレンダーとか近況とかを載せて、ワールドをアップし直さなくてもワールドをちょこっと更新できますね。
追記：github.ioでもできました
Githubにファイルをアップロードして公開設定すると割り当てられるドメイン github.io でもできました。
普通に画像をアップして、Settings ⇒ Pages のところでBranchをSaveしたら github.io のドメインが割り当てられて公開できました。
Githubに画像をアップロードして公開、VRChatワールドに表示する動画
↓やり方動画。Publicでリポジトリを作ってReadMe追加、画像をアップロード。
↓その後Settings → Branchでmainを選択 → save でページを公開すると、一分くらいすればgithub.ioのドメインが割り当てられて自分のページが見れます。
画像のURLを入れて公開できてるか確認できたら、↓画像のURLをImage UrlにコピペすればOK。
まぁ画像置き場としての利用だけだと規約的にどうなんだって感じだから、書いたコードがあればGithubにアップして公開していくかな…。
クラウドストレージとしてだけ利用されると、Githubさんもあまり良い顔をしないような気がする(;^_^A
おわりに
案外手軽にできて良かった。
まぁ画像をアップする場所によって仕様が違ったり仕様変更がある可能性があるので、ちゃんと表示されるかは色々な環境でテストしたほうが良いかもしれないけど。
画像差し替えればすぐワールドに反映させられるのは手軽で良いですね。
まぁもう少しいじってみます(*^-^*)