Url Textureを使って入れ替えが簡単なバーチャル写真展をつくろう

事前準備

まず、clusterにワールドをアップロードできる環境を事前に用意してください。
すぐに準備したい方は下記の記事を参考にテンプレートワールドを導入するのがおすすめです。

一から準備をしたい方はこちらを参考にしてください。

• はじめてのワールド作成

Url Textureとは？

Url TextureとはURLから画像を取得してワールドのテクスチャとして使用する機能です。
GoogleDriveなどのクラウドサービスを併用すると、ワールドの更新をしなくてもワールド内のテクスチャを変えることができます。

今回はUrl Textureを使用して、写真の入れ替えができる写真展ワールドをつくってみましょう！

注意
Googleドライブなどを利用する場合は、一時的なアクセス制限などにより表示されなくなる場合もありますので、ご注意ください。

• Url Texture｜Creator Kit ドキュメント

画像をGoogleDriveにアップロードする

今回はGoogleDriveを使用してみます。
まず、使いたい画像をGoogleDriveにpng形式かjpeg形式でアップロードします。

次に共有の設定をします。
リンクの取得から、共有対象をリンクを知っている全員に変更します。

GoogleDriveの共有リンクは直接使えないので以下のようにURLを書き換えます。

https://drive.google.com/file/d/<ファイルID>/view?usp=sharing
↓
https://drive.google.com/uc?id=<ファイルID>   

写真を設置する

次はUrl Textureを使って写真を設置します！

• まずはHierarchyのCreate Emptyから空のGameObjectを作成します。

• 作成した空のGameObjectを右クリックして、子オブジェクトとしてQuadを作成します。

• QuadのTransformを以下のように変更します。

• 今回は1920×1080の画像を使用したので、このようになりました。

Url Textureを設定する

• QuadのInspectorの一番下のAddComponentからUrl Textureを追加します。

• Url TextureのUrlの欄に先ほど書き換えたGoogleDriveの画像のURLを入力します。

https://drive.google.com/uc?id=<ファイルID> 

この状態でワールドアップロードしてみると…
アップロードした画像が表示されました！

マテリアルを設定する

このままだと写真の表面にテカリがあったりして見づらいので、画像を見やすくするために光の影響を受けないマテリアルを設定します。

• Project欄から新規Materialを作成し、好きな名前を付けます。
• 今回は『picture1』と名前をつけます。

• 次に新しく作成したマテリアルを選択し、インスペクタのShader欄にtextureと入力し、Texture (Unlit/Texture)というShaderを選択します。

• マテリアルのシェーダーがUnlit/Textureに変更されていることを確認したらUrl Textureを設定しているQuadにつくったマテリアルをドラッグアンドドロップで適用します。

絵が光の影響を受けなくなって綺麗に見えるようになりました！

※絵に光を当てたい場合にはStandardシェーダーなどのマテリアルを使用しましょう！

画像を差し替える

次はGoogleDriveでの画像の差し替え方を説明します。

• 更新したい画像を右クリックし、版の管理を選択します。

• 新規アップロードを押して、更新する画像をアップロードします。
• 元画像との縦横比率が変わらないように注意してください。

ワールドに入りなおしてみると画像が変わりました！

Url Textureで会場の雰囲気を変える

Url Textureを使うと、飾る写真を入れ替えるだけでなくワールドを更新せずにワールドの雰囲気を変えることもできます。

• 床と壁を作成して、絵を設置した時と同様にUrl Textureを設定します。
• (Ctrlを押しながら選択すると複数選択できます)

このようにワールドの更新を行わなくても簡単にワールドの雰囲気を変えることができます！