LoginSignup
1
1
@kolinz(Kohei Nishikawa)

IBM Cloud Object Storage上でVerseEngineを使ってメタバースを動かす

Posted at

目的

「なるべくお金をかけない方法で、独自のメタバースを持ちたい」というささやか？なもの。

自分でメタバースを作ることができるソフトウェア

下記のソフトウェアは、ゲームを作ることがあまり得意ではありません。メタバース=エンタメ・ゲームという認識であれば、かつ無料で取り組みたい場合は、Spatialが取り組みやすいでしょう。Spatialでは、スポーツを題材にしたゲームやレースゲーム等を作ることができます。
下記のソフトウェアが得意なものは、仮想空間上で行うアバターとボイスチャットによるコミュニケーションであり、会議や勉強会、研究発表のようなものに向きます。

代表的なもの

Hubs Cloud Community Edition

  • 動かすためにKubernetes(k8s)クラスターが必須
  • 利用者側は、Webブラウザのみで利用できる。家庭や学校、ビジネスPCで利用できる
  • Hubs Cloudは、NTT DOORなど、自治体等でも実績のあるメタバースに採用されているので、利用者側は慣れることが早い

VerseEngine

今回使ったものです。アップランド社が開発・提供しており、商用でも無料から使えるようになっています。
自分はあまりVTuberに興味はないのですが、VTuberの事務所を運営されている会社らしく、「VerseEngine」は、メタバースエンジンとして誰でもWebブラウザベースのメタバースを作成・公開できるというものになっています。
前述の「Hubs Cloud Community Edition」よりも出来ることは少ないことは事実ですが、Kubernetesクラスターが不要なので、手軽にメタバースを構築することはできそうです。「VerseEngine」は、メタバース（仮想空間）をコードで制御するようになっているので、CI/CDツールと相性が良く、実にクラウドネイティブなエンジニア好みです。

今回取り組んだこと

Amazon S3互換の「IBM Cloud Object Storage」上で、VerseEngineの「Get Started(A-Frame)」の内容を動かし、独自のメタバースを動かせる確認しました。

流用したコードは、下記にあります。
https://github.com/VerseEngine/examples
Github上にあるVerseEngineのサンプルで、Githubに表示されている内容から、MIT license(ライセンス説明の日本語訳)が割り当てられていることがわかります。

サーバー側の環境

IBM Cloudを契約することで使えるライト(無料)プランを利用可能なサービスの１つである、Amazon S3互換の「IBM Cloud Object Storage」を使用します。「IBM Cloud Object Storage」には、アップロードしたファイルを公開する機能が備わっているので、その機能を活用します。

クライアント(利用者側)の環境

Webブラウザとして、Microsoft EdgeとGoogle Chromeを使っています。

結果

VerseEngineの「Get Started(A-Frame)」のコンテンツを動かしてみた結果、無料のライトプランで契約している「IBM Cloud Object Storage」で、メタバースをホストすることができました。
image.png
MS EdgeとGoogle Chromeの2つのブラウザそれぞれから同じ空間に接続し、それぞれ異なるアバターで、移動やボイスチャットの動作を確認することができました。

実装方法

サンプルのダウンロード

  1. Github上でMITライセンスが付与されているVerseEngineのサンプルをダウンロードします。https://github.com/VerseEngine/examples にアクセスし、「Code」>>「Download zip」の順にクリックすればダウンロードが始まります。
  2. ダウンロードした「examples-main.zip」を解凍（すべて展開）します。
  3. 「example-mainフォルダ」が表示されます。

IBM Cloud Object Storage側の設定

IBM Cloud Object Storage の有効化

IBM Cloudの「カタログ」の「ストレージ」において「Object Storage」をクリックし、インフラストラクチャーにIBM Cloudを選び、プランが「「Lite」であることを確認、「作成」をクリックします。
image.png

公開用のバケットを作成

  1. IBM Cloudのリソースリストに表示されている「Cloud Object Storage」のサービスをクリックします。
  2. 「バケットの作成」をクリックします。
  3. 「静的Webサイトのホスティング」のテンプレートを探し、「作成」をクリックします。
  4. 「固有のバケット名」は公開時にURLの一部になるため変更できますが、特に気にならない場合はそのままにします。
  5. 「パブリック・アクセスの有効化」の項目で、「パブリック・アクセス」のトグルボタンをクリックします。警告が表示されるので「有効化」をクリックします。
  6. 「パブリック・アクセス」のトグルボタンが緑色になり、オンになります。
  7. その他の項目は特にいじらず、「次へ」をクリックします。
  8. 「ファイル (オブジェクト) のアップロード」が表示されます。ファイルをドラッグ&ドロップするよう表示されている白い枠内に、先ほど解凍した「example-mainフォルダ」内の「examplesフォルダ」内の「assetフォルダ」内の「avatarフォルダ」内のすべてのファイルをドラッグ&ドロップします。ファイルは、vrm形式のファイルとpng形式のファイルです。これらはアバターのためのファイルです。
  9. 「転送」完了後、転送の右隣に表示されている「X」をクリックします。
  10. 同じく、ファイルをドラッグ&ドロップするよう表示されている白い枠内に、先ほど解凍した「example-mainフォルダ」内の「examplesフォルダ」内の「assetフォルダ」内の「animationフォルダ」内のすべてのファイルをドラッグ&ドロップします。ファイルは「idle.fbx」と「walk.fbx」です。
  11. 「転送」完了後、転送の右隣に表示されている「X」をクリックします。
  12. 「次へ」をクリックします。
  13. 「バケット構成の表示」をクリックします。

公開用のバケットの構成にCORSルールを追加

  1. 画面下部の「クロスオリジン・リソース共有 (CORS) ルール」で「ルールの追加」をクリックします。
  2. 「許可される発信元」に「*」を入れます。詳細指定した方が良いかもしれませんが、ひとまず動かせることを最優先なので、動いた後に考えることにします。
  3. 「許可されるメソッド」は「GET」のみチェックを入れます。「POST」や「PUT」は、サンプルを動かしてから必要かどうか考えましょう。
  4. 「許可されるヘッダー」は「すべて」にチェックを入れます。
  5. 「追加」をクリックすることで、追加したルールが表示されます。
    image.png

アップロードしたファイルの確認

  1. 画面上部に戻り、「オブジェクト」をクリックします。image.png
  2. 任意のファイル（例 idle.fbx）をクリックします。
  3. 「オブジェクト・パブリック URL」に表示されている内容を確認します。（例 https://cloud-object-storage-cos-static-web-hosting-xxxxxx.s3.jp-tok.cloud-object-storage.appdomain.cloud/idle.fbx)
    「cloud-object-storage-cos-static-web-hosting-xxxxxx」の部分がバケットの固有名になります。「オブジェクト・パブリック URL」に表示されている内容のうち、.cloudの部分は他のアップロード済みファイルでも共通なので、メモしておきましょう。後で再利用します。
  4. 画面右上、表示されているファイル名の反対側にある「X（閉じる）」をクリックして、ファイルの表示を閉じます。
  5. 他のファイルを確認したい場合は、ファイル名をクリックすることで同様に確認することができます。

VerseEngineサンプルの編集とアップロード

setup-verse.jpの編集とアップロード

setup-verse.jp の編集

先ほど解凍した「example-mainフォルダ」内の「examplesフォルダ」内の「getstartedフォルダ」内の「aframeフォルダ」内の「setup-verse.jp」を編集します。

idle: "../../asset/animation/idle.fbx" の編集

idle: "../../asset/animation/idle.fbx"の""内をIBM Cloud Object Storageにアップロードした「idle.fbx」のオブジェクト・パブリックURLに書き換えます。
例 idle: "https://cloud-object-storage-cos-static-web-hosting-xxxxxx.s3.jp-tok.cloud-object-storage.appdomain.cloud/idle.fbx"

walk: "../../asset/animation/walk.fbx の編集

idle: "../../asset/animation/walk.fbx"の""内をIBM Cloud Object Storageにアップロードした「walk.fbx」のオブジェクト・パブリックURLに書き換えます。
例 idle: "https://cloud-object-storage-cos-static-web-hosting-xxxxxx.s3.jp-tok.cloud-object-storage.appdomain.cloud/walk.fbx"

thumbnailURLおよびavatarURLの「../../asset/avatar」部分の編集

./../asset/avatar の部分を、メモしておいた、.cloudまでのURLに書き換えます。（例 https://cloud-object-storage-cos-static-web-hosting-xxxxxx.s3.jp-tok.cloud-object-storage.appdomain.cloud）

「setup-verse.jp」の保存

編集した「setup-verse.jp」を保存します。

「setup-verse.jp」のアップロード

編集した「setup-verse.jp」を、IBM Cloud Object Storageの先ほど作成したバケットにアップロードします。「転送」完了後、転送の右隣に表示されている「X」をクリックします。

index.htmlをアップロード

先ほど解凍した「example-mainフォルダ」内の「examplesフォルダ」内の「getstartedフォルダ」内の「aframeフォルダ」内の「index.html」を、IBM Cloud Object Storageの先ほど作成したバケットにアップロードします。「転送」完了後、転送の右隣に表示されている「X」をクリックします。
「index.html」を編集することで、メタバースのための仮想空間を編集することができます。A-Frameを使って空間を構成します。

IBM Cloud Object Storage側のバケットにアップロードした「index.html」を表示します。「オブジェクト・パブリックURL」に表示されたURLに、Webブラウザでアクセスします。タブを新規作成してアクセスしましょう。
image.png

動作確認

2種類のWebブラウザを用意し、それぞれに先ほどのURLにアクセスします。これで動作確認ができます。
image.png
画面左下に表示されるアイコンは、以下の操作が可能です。
image.png
移動や視点の変更は次のように行います。

移動 操作方法1 操作方法2
前進 Wキー ↑キー
後進 Sキー 　 ↓キー
左移動 Aキー ←キー
右移動 Dキー →キー
左回転 Qキー マウス左クリックしながらマウスを動かす
右回転 Eキー マウス左クリックしながらマウスを動かす

まとめ

IBM Cloudを使って、VerseEngineのサンプルではありますが自分用のメタバースをホストすることが出来ることがわかりました。A-Frameを使っており、コードを書くことで制御できるので、CI/CDツールを好むクラウドネイティブなエンジニアとも相性が良さそうです。

参考文書

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1