メインコンテンツまでスキップ

3D空間の最適化

metatellの3D空間を幅広いデバイスで快適に利用できるようにするためには空間の最適化が重要です。 このドキュメントでは3D空間の最適化について説明します。

本手順を実施する方

組織の管理者または建築士

ポリゴン数の最適化​

ポリゴン数がパフォーマンスに与える影響​

3Dモデルのポリゴン数を削減することは、空間のパフォーマンスを向上させるための重要なステップです。ポリゴン数が多いモデルは、デバイスの負荷を高める要因になります。具体的には以下のように様々な要素に影響します。

  • GPU (グラフィックス処理ユニット): ポリゴンはGPUによって描画されます。ポリゴン数が増加するとGPUはより多くの計算を行う必要があり、パフォーマンスが低下する可能性があります。
  • CPU: ポリゴンデータはGPUで描画される前にCPUによって処理されます。ポリゴン数が多いモデルは、CPUの処理負荷を増加させる可能性があります。
  • メモリ: ポリゴンごとに頂点データが必要になります。ポリゴン数が多いモデルは、メモリの使用量が増加します。

metatellでは、モバイルデバイスで動作させる場合、三角形の総数を50,000以下に抑えることをお勧めしています。 三角形は3Dモデルにおける基本的な描画単位です。 空間が複数のモデルから構成される場合、各モデルの三角形数を合計して、総数が50,000以下になるようにする必要があります。

ポリゴン数の削減​

ポリゴン数を削減するためには、以下の方法を試してみてください。

BlenderのMesh Decimationを使用して、モデルのポリゴン数を削減することができます。以下のビデオは、Blenderでポリゴン数を削減する方法について説明しています。

また、glTF TransformのようなCLIツールを使用して、モデルのポリゴン数を削減することもできます。

ポリゴン数を削減することで、モデルの外観が変化する可能性があります。 モデルのポリゴン数を削減する場合、外観とパフォーマンスのトレードオフを考慮する必要があります。

Materialsの最適化​

3DモデルのMaterialの個数は、空間のパフォーマンスに影響を与える可能性があります。以下のセクションでは、Materialsの最適化について説明します。

Materialがパフォーマンスに与える影響​

Materialは、3Dモデルの外観を定義するための設定です。Materialには、色、テクスチャ、光沢、透明度などのプロパティが含まれます。1つの3Dモデルには、複数のMaterialが含まれることがあります。

各MaterialごとにGPUによる描画呼び出し (Draw Call) が発生します。 Materialの数が多いほど、GPUがより多くの描画呼び出しを行う必要があり、アプリ全体のパフォーマンスが低下する可能性があります。

Draw Callの増加は以下のような問題を引き起こす可能性があります。

  • フレームレートの低下: 描画呼び出しが多すぎると、GPUの処理負荷が増加し、フレームレートが低下します。
  • バッテリー消費の増加: 高負荷なレンダリングはバッテリー消費を増大させます。

metatellでは、モバイルデバイスで動作させる場合、ユニークなMaterialの数を25以下に抑えることをお勧めしています。

Materialの削減​

Materialの数を減らすためには、以下の方法を試してみてください。

  • 互換性のあるPrimitive(3Dグラフィクスにおける基本的な描画単位)の結合
    • 異なるMaterialを持つPrimitiveを結合して、1つのPrimitiveにまとめることで、Materialの数が減少する可能性があります。
    • glTF-Transformのjoinコマンドなどを用いることにより互換性のあるPrimitiveを結合することができます。
  • パレットテクスチャの利用
    • 複数のMaterialのユニークなプロパティの値を1つのテクスチャにまとめることで、Materialの数を減らせる場合があります。
    • glTF-Transformのpaletteコマンドなどを用いることによりパレットテクスチャを作成することができます。
  • テクスチャの統合 (Texture Atlas)
    • 複数のテクスチャを1つのテクスチャに統合することで、Materialの数を減らすことができます。
  • モデルの結合
    • もしも空間が複数のモデルから構成されている場合、それらを結合して1つのモデルにまとめて、上記の手法を適用することでMaterialをさらに削減できる場合があります。

Image, Video, Particle Emitter, Simple WaterなどのElementにもMaterialが含まれます。 Materialの個数が問題となる場合、これらのElementを削減することも検討してください。

テクスチャの最適化​

3Dモデルのテクスチャは、空間のパフォーマンスに影響を与える可能性があります。以下のセクションでは、テクスチャの最適化について説明します。

テクスチャがパフォーマンスに与える影響​

3Dモデルのテクスチャは、モデルの外観を定義するための画像ファイルです。テクスチャは3DモデルのMaterialに適用され、モデルの外観を決定します。 画像は一般にGPUによって非圧縮な状態でロードされ、VRAMに保存されます。テクスチャの解像度が高いほどVRAMの使用量が増加しパフォーマンスが低下する可能性があります。 特にモバイルデバイスでは、一般にRAMの容量が少ないため、VRAMの使用量を抑えることが重要です。

テクスチャの最適化​

テクスチャの解像度を最適化するためには、以下の方法を試してみてください。

  • テクスチャの解像度の縮小
    • 3Dモデルのテクスチャの解像度を縮小することで、VRAMの使用量を削減し、パフォーマンスを向上させることができます。
  • KTX2フォーマットの利用
    • KTX2は、GPUに最適化された圧縮フォーマットで、VRAMの使用量を削減することができます。詳細はこちらを参照してください。

3Dモデル内のテクスチャ以外にも、空間内のImage, Particle Emitter, LinkなどのElementにも画像が含まれています。 これらの画像の解像度を最適化することもパフォーマンス向上に寄与します。

metatellでは、モバイルデバイスで動作させる場合、VRAMの消費量の推定値を256MB以下に抑えて、2048x2048を超える解像度のテクスチャを使用しないことをお勧めしています。

各テクスチャおよび画像のVRAM消費量は、以下の再帰関数を使用して推定しています。 ここで、widthとheightは画像の幅と高さを表します。

function calculateUncompressedMipmapedTextureSize(width, height) {
  if (width === 1 && height === 1) {
    return 4;
  }

  return (
    width * height * 4 +
    calculateUncompressedMipmapedTextureSize(Math.max(Math.floor(width / 2), 1), Math.max(Math.floor(height / 2), 1))
  );
}

画像の解像度を縮小した場合, 見た目の品質が劣化します。 画像の解像度を縮小する場合、品質とパフォーマンスのトレードオフを考慮する必要があります。

ライトの最適化​

空間に多くのライトがあると、それぞれのライトについて光の計算を行う必要があります。これによりレンダリング時間が長くなりフレームレートが低下する可能性があります。

metatellでは、モバイルデバイスで動作させる場合、空間内のライトはアンビエントライトとヘミスフィアライトを除いて、3つ以下に抑えることをお勧めしています。

ファイルサイズの最適化​

3Dモデル、テクスチャ、画像、ビデオなどのアセットのファイルサイズが大きい場合、ロード時間が長くなりUXが悪化する可能性があります。

metatellでは、空間のファイルサイズを16MB以下に抑えることをお勧めしています。

ファイルサイズを削減するためには、以下の方法を試してみてください。

  • 3Dモデルのテクスチャの解像度の縮小
    • テクスチャの解像度を縮小することでファイルサイズを削減できます。
  • 3Dモデルのポリゴン数の削減
    • モデルのポリゴン数を削減することでファイルサイズを削減できます。

その他の最適化​

非常に大きな動画は、Web上でのパフォーマンスを低下させる可能性があります。 動画によるパフォーマンスの問題を回避するためには、以下の方法を試してみてください。

  • 大きな動画の寸法を縮小する
  • オンラインの動画圧縮ツールを使用してファイルサイズを縮小する
  • GIF形式の動画をビデオ形式に変換する
に最終更新