見出し画像

メタバース空間ってどうやって作るの？Vma plus Station メタバース空間 実装ガイドライン

Vma plus 株式会社

現在、非常に多くの方から「オリジナルのメタバース空間を作りたい」とのお問合せを頂いております。
「Vma plus Station」では、お客様の作成したメタバース空間を積極的に取り込んでおり、参加者全員でメタバースを作り上げていきたいと考えております。
オリジナルメタバース空間を作成する際、本記事が参考になれば幸いです。


🌐概要

Vma plus StationのメタバースはPlayCanvasで実装されており、WebGL上で動作します。
ブラウザでのアクセスが可能なため、PCやスマートフォンなどのデバイスで問題なく動作することが期待されています。
低スペックなデバイスでの動作も考慮し、メモリ、CPU、GPUの負荷を最小限に抑えつつ、高品質な3Dモデルを作成するための要件やガイドラインを記載しています。

🌐要件と制約

3Dモデルを作成する上での要件、制約を記載します。

  • 作成ツール

    • 特に指定はありません

  • ファイル形式

    • PlayCanvasのプロジェクトをzip出力

    • fbx形式

  • ワールドのスケール

    • 上限は特に定めておりませんが、大きすぎない範囲で設定してください。
      ※ポリゴン数は250k (250,000)までを目安としてください。
      ※例として、Vma plus Stationで実装されているマーケットエリアのスケールはx: 110, y: 25, z: 110、アバターはx: 1, y: 1.68, z: 1で作成されています(図1)。

図1 マーケットエリアの寸法

🌐モデル作成時のガイドライン

✅ポリゴン数について

Vma plus Stationで動作しているシーンはそれぞれ 70k〜250k のポリゴン数で構成されています。そのため、その範囲内であれば動作実績がありますが、出来るだけ少ないポリゴン数で作成していただけますと動作が安定します。

ただし、メッシュがQuadで提供されている場合でも、PlayCanvas エンジンはジオメトリをTriangles(三角形)に変換して表示します。
Quadでは1ポリゴンで済むところが、Trianglesではより多くのポリゴン数が必要になることに留意してください。

あくまで、目安としての数値ですので、大幅に逸脱しない範囲でデザイン性とバランスを取りながら作成してください。

✅メッシュオブジェクトについて

・メッシュの再利用
メッシュオブジェクトを作成する際は、極力メッシュの再利用を検討してください。空間を囲む壁や天井・床など、同じ形を繰り返す構造物はメッシュを再利用できる可能性があります。
これにより、データ量の削減と描画パフォーマンスを向上させることができます。

良い例:
4つのキューブがありますが、全て同じメッシュを使用しているため、メッシュの数は1です。(図2)

図2 同じ形であれば、メッシュを再利用する

悪い例:
同じ形の4つのキューブがあり、全て異なるメッシュが使用されています。メッシュの数は4です。

図3 同じ形なのに、それぞれメッシュが異なる

・オクルージョンカリング
メッシュオブジェクトは、オクルージョンカリングについて意識して作成してください。
カリングなしでメッシュを作成した場合、プレーヤーがどこを見ているかに関係なく、すべてがレンダリングされます。(図4)

図4 カメラに映らない範囲も描画対象となっている

カリングを利用した場合、カメラに映し出されているオブジェクトのみレンダリングします。(図5、図6)

図5 カメラに収まるオブジェクトだけ描画される（小部屋を映した場合）
図6 カメラに収まるオブジェクトだけ描画される（大きい部屋を映した場合）

カリングを考慮すると、オブジェクトは次の 2 つのタイプに分けて考えることができ、それぞれモデル作成時のアプローチが異なります。

  1. 大きいオブジェクト (壁、天井、ドアなど)
    通常、建造物などの大きなオブジェクトは、できるだけ1つのメッシュにまとめるのが一般的ですが、オクルージョンカリングを効率よく機能させるためには、いくつかの部品に分ける必要があります。

    例えば、廊下があり、両側に複数の部屋があるモデルを想定した場合、それぞれの部屋と廊下を別々のメッシュにするのが最適です。ただし、このとき各部屋の壁面まで別々のメッシュにしてしまうと、ライティングの計算に問題が発生する可能性があるため注意してください。

    図 3 の例では、2つの部屋にメッシュを分けていますが、より多くの部品に切り分けるとさらに効果が期待できます。

  2. 小さいオブジェクト (テーブル、椅子など)
    一部でもカメラに映っていると、フルメッシュがレンダリングされるため、オブジェクト同士の位置が離れている場合には、メッシュも別々にしてください。

    ただし、オブジェクト同士が隣接し、それぞれが別の場所で再利用されない場合は、オブジェクトを 1 つのメッシュとしてグループ化しても問題ありません。

✅マテリアル

マテリアルはできるだけ再利用できるようにしてください。
複数のメッシュが異なるFBXファイルにある場合でも、同じマテリアルを使用することが望ましいです。マテリアルに大きな違いがない場合、多少の見栄えの変化であれば、同じマテリアルを使用してパフォーマンスの改善をしてください。

✅テクスチャ

・テクスチャのサイズ
テクスチャのデータサイズは2MB程度に抑えてください。
また、縦幅および横幅は4の倍数のサイズで作成してください。
例) 512px × 512 px、1024px × 1024 px

・テクスチャの再利用
テクスチャも汎用的に作成して、再利用できるようにしてください。
再利用性を高めるため、特定のオブジェクトにのみ適用できる、細かく設定されたテクスチャは利用せず、タイル化できるような汎用的なテクスチャを適用してください。

さらに、1枚のテクスチャを領域ごとに分け、複数のオブジェクトから参照されるようなテクスチャが理想的ですが、カスタム UV を準備する必要があり、ハードルは高いため必須ではありません。

また、ライトのベイク処理なども、再利用できなくなるため、同じテクスチャを複数のオブジェクトで使用しない限り、行わないことが望ましいです。
以下にソファのオブジェクトに対して、テクスチャを適用する場合の例を挙げます。

ソファの例:

良いテクスチャ:
タイル化できる正方形のテクスチャマップは、汎用的に使用可能なテクスチャであり、再利用できるだけでなく、大幅にサイズを圧縮しても見た目上の変化を最小限に抑えられます。

悪いテクスチャ:
オブジェクトに対して細かい部分まで、見た目を制御することができていますが、1 つのオブジェクトに 1 つのテクスチャが必要になるため、リソース効率が悪くなります。

理想的なテクスチャ:
一枚のテクスチャではあるが、一部の領域のみをソファに割り当て、他の領域には別のオブジェクトで利用されるテクスチャや、汎用的に利用される領域があり最適化されています。

✅UV設定

メッシュのUV は重なり(オーバーラップ)がないか確認してください。ライティングのベイク操作によって、UVが重なっているとアーティファクトが発生する可能性があります。

 

✅シェーディング

スムースシェーディングとフラットシェーディングのどちらでも問題ありませんが、Vma plus Stationでは、できるだけ少ないジオメトリでリアルに見えるよう最適化しているため、丸いオブジェクトやメッシュの部分にはスムースシェーディングを使用してください。

🌐最後に

「Vma plus Station」では、将来的に作成した空間をアップロードする機能や、作成した空間を他の人と売買できるマーケットプレイスを追加予定です。どうぞご期待ください！

この記事が気に入ったらサポートをしてみませんか？