Google DriveからVRChatワールド上のテクスチャ画像をらくらく更新する

はじめに

だいぶ経ってしまいましたが、あけました、おめでとうございます。 2018年は7月にHTC VIVE Proを買ってから、取り憑かれたようにVRにハマっていました。 2019年もこの熱は冷める気がしないと思いますので、VRChatを中心に関わってくださっている方々、今年もよろしくお願いします

さてさて、本題です。 VRChatのワールドにちょこちょこ遊びに行くと、たまに広告を見かけることがあります(当然、今のところお金が絡むようなものはないですが)。これらはワールド作成時に貼られたテクスチャが多いかと思いますが、ワールドそのものはアップロードして更新する静的なコンテンツなので、それに伴って静的なものになりがちです。定期的にワールドのテクスチャを張り替えてアップロードしなおしている方もいらっしゃるのですが、そのたびにUnityを開いて、テクスチャを入れ替えて、ワールドをアップロードする必要があるので、正直かなり手間がかかります。

一方で、VRChat SDKにはVRC_Panoramaというコンポーネントが提供されているのですが、これを使うと指定のWebリンク先からテスクチャ画像をリアルタイムに取得できます。そこで今回は、Google Driveにアップロードした画像をテクスチャとして取得し、動的に更新する方法をハンズオン形式で紹介します。

テクスチャ画像をGoogle Driveにアップロードする

早速ですが、まず初めにGoogle Driveにテクスチャ画像をアップロードしてみます。 Google Driveのセットアップは、あらかじめ済ませておいてください。今回は"VRChat"フォルダを作成し、その下にアップロードします。 f:id:jscmla1118:20190113152822p:plain

次に、アップロードする画像を用意します。今回はPNG画像に"vrc_texture"という名前をつけて、先ほどのVRChatフォルダにでアップロードします。

そしたら、ひとつ確認事項です。この後Unityからこの画像を参照するためのURLを張り付けるのですが、あらかじめGoogle Driveで見ておきましょう。 Google Driveのアップロードした画像に対して右クリック、「共有可能なリンクを取得」を選択します。するとリンクが表示されるので、それをコピーしてメモしておいてください。後ほど使用します。 f:id:jscmla1118:20190113153715p:plain

ワールド(Unity)の設定

それでは、Google Driveにアップロードした画像を取得してみます。まずVRChat SDKをインポートし、VRCWorldやPlaneなどを適当に設置して、ワールドの設定を済ませます。 f:id:jscmla1118:20190113172432p:plain

次に、コンポーネントの設定です。テクスチャを張り付けるためのQuadを設置しましょう。縦横の比率は、アップロードした画像に合わせておきましょう。これに、VRC_Panoramaコンポーネントを追加してください。 f:id:jscmla1118:20190113175140p:plain

Size欄には、1を入力します。すると、URLを入力する項目が現れます。そこに、先ほど確認したGoogle Driveの共有リンクを張り付けてください...と言いたいところですが、残念ながらこのままでは取得に失敗してしまいます。 f:id:jscmla1118:20190113171326p:plain

そこで、このURLを少し書き換えましょう。先ほど取得したURLですが、下記のような構造となっています。

https://drive.google.com/open?id=[ID]

このIDがGoogle Drive上のファイルを一意に識別するためのものです。このIDだけを抜き出し、下記のURLに書き換えてください。

http://drive.google.com/uc?export=view&id=[ID]

VRC_Panoramaの設定はこれでよいですが、もう一つ設定項目があります。 VRC_Panoramaを追加したタイミングで、VRC_DataStorageも自動で追加されます。こちらも設定する必要があるので、下記のように入力してください。 f:id:jscmla1118:20190113172059p:plain

ちなみにVRC_DataStorageはその名の通り、VRChatにて使用する様々な数値を管理するコンポーネント...かと思います。詳細な仕様はあまり公開されていないのですが、VRC_Panoramaで取得した画像はこのdisplayパラメータとして管理されるようです。 Sizeを増やすと、その数だけ画像を保持できるようになり、順々に参照できるようにもなります。やり方は少し複雑、かつ今回の話からは逸れるので、紹介は割愛します。

さて、設定はこれで完了なので再生してみましょう。設定が完了していれば、テクスチャが表示されるはずです。 f:id:jscmla1118:20190113172742p:plain

試しにBuildして、VRChatからも確認します。ログインした時点で画像が表示されていれば、おっけーです。 f:id:jscmla1118:20190113173611p:plain

テクスチャ画像を更新する

ひとまず、Google Driveからテクスチャ画像を参照できるようになりました。ただ、これだけではUnity上にテクスチャ画像をローカルで配置する手間と何ら変わりません。そこで次は、ワールドの更新は行わずに、テクスチャ画像を更新してみましょう。

前提として、ワールド側には既に画像のファイルIDを含むURLを参照させています。 IDが変わってしまうとテクスチャ画像を取得できなくなり、設定しなおしとなってしまいますので、これを維持する必要があります。

ではどうすればよいのかというと、対象の画像ファイルと同じ名前のファイルを、Google Driveにアップロードすればよいのです。 Google Driveは、名前が同じファイルがアップロードされた場合、新たなバージョンとして更新されます。この場合ファイルIDは変わらないので、VRC_Panoramaで参照しているURLは継続して使用できます。

実際に試してみると、バージョンが更新されたことを示すポップアップも出てきます。とっても親切。 f:id:jscmla1118:20190113174252p:plain f:id:jscmla1118:20190103131215p:plain

と、上記の通りGoogle Driveにファイルをアップロードするだけで、画像の差し替えが可能になります。実際にUnity側でもう一度、再生してみましょう。 f:id:jscmla1118:20190113174420p:plain

画像が切り替わりました。ここでの確認はローカルのUnityで実施していますが、この時点でアップロード済みのワールドも同様に画像が更新されています。 なので、必要な更新作業はこれで完了しています。かなり楽になりますね。一つだけ注意なのですが、アップロードしてから名前を変えても同名のファイルが共存する状態になるだけなので、あらかじめ名前を合わせておきましょう。

おわりに

ということで、シンプルに画像をアップロードのみで更新できる流れを書きました。同様に今後も、新たに更新する場合は同様の手段で実現できます。複数の画像を管理したい場合は、それだけ別名のファイルを用意してください。今回はシンプルな例を紹介していますが、Google Driveへのアップロードや、GASを使用した画像自動生成など、複雑な処理も実装することも可能です。今回の話含め、先日のVRChat Advent Calendar 2018にて紹介されている方もいますので、ぜひ調べてみてください。 qiita.com

じぇしかめも

VRChatとインフラのお話がメインです。主に備忘録として、自分の理解を書いています。かならずしも事実とは限らないので、ご了承くださいな。