「Cluster Creator Kit」を使ってみる

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

投稿者:

「Creators Guide」は、メタバースプラットフォーム「cluster」で「つくる」ことにチャレンジしてみたい方に向けた導入ガイドです。

Creators Guideで読むことができるすべての情報はこちらにまとめています。

目次

事前準備

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

すぐにワールド制作をはじめたい方へおすすめ！──テンプレートワールドとメインスクリーンとコメントボード（サンプルプロジェクト）の導入方法

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

Url Textureとは？

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

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

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

画像を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を以下のように変更します。
xyz
Position000
Rotation000
Scale1画像の縦サイズ/画像の横サイズ1
  • 今回は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を押しながら選択すると複数選択できます)

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

最後に公式による記事や多くのクリエイターの皆さんによるドキュメントやコミュニティを紹介します。
ぜひ活用して自分だけのワールドを制作してみましょう！

▼ 「Cluster Creator Kit」の全てが分かる公式ドキュメント
Cluster Creator Kit ドキュメント┆https://docs.cluster.mu/creatorkit/

▼ クリエイターによる投稿記事まとめ
ワールド制作部┆https://note.com/cluster_official/m/m1fd772ab8f45
アバター制作部┆https://note.com/cluster_official/m/m6b18e343f35c
イベント制作部┆https://note.com/cluster_official/m/m7155e6f6887f

▼ 分からないことがあればコミュニティを活用してみましょう！
Cluster Creator Community Discord┆https://discord.gg/DHQmAfDhkt