FoliMesh

Babylon.js向けローポリスタイルのグラウンドカバー

ローポリのグラウンドカバーは Babylon.js のシーンで最も軽い素材です。シダ、草むら、アシの3モデルは LOD0〜LOD3 と根元のピボットを持ち、GLB として @babylonjs/loaders の glTF ローダーに渡せます。1つだけなら ImportMeshAsync、森の床に何百ものコピーを並べるなら LoadAssetContainerAsync と instantiateModelsToScene を使います。

色は頂点カラー(COLOR_0)に入り、各面はフラットシェーディングの法線1本だけなので、選んだモデル全体を1つのマテリアルでまかなえます。テクスチャもUV展開も不要で、ビデオメモリはほとんど使いません。葉はソリッドなジオメトリなので、モバイルGPUでアルファのオーバードローが出ません。LOD は lod0.addLODLevel(30, lod1) でつなぎ、コリジョンメッシュは非表示のまま checkCollisions や Havok に渡し、草むらは thinInstanceAdd で1ドローコールにまとめて散布できます。

モデル
3
LODレベル
LOD0 – LOD3
フォーマット
GLB · FBX · OBJ

ローポリスタイルについて

ローポリはレンダリング負荷もビルドサイズも最も軽いスタイルです。

  • フラットシェーディング:面ごとに 1 本の法線でくっきりした多面体の見た目になり、法線マップは不要です。
  • 色は頂点カラー(glTF COLOR_0)に格納:テクスチャなし、UV 作業なし、VRAM もほぼ消費しません。
  • 葉はアルファカードではなく実体のジオメトリ:アルファテストも半透明のオーバードローもなく、モバイル GPU で効きます。
  • シーン内の全モデルで 1 つのマテリアルを共有でき、樹木を簡単にバッチング・インスタンシングできます。
  • LOD0 の一般的な予算は数百〜2,000 ポリゴン程度です。

モバイル、WebGL/WebGPU、VR、ストラテジー、街づくり、スタイライズドなインディーゲームに向いています。エンジンでは頂点カラーを乗算するマテリアルを使ってください。

Babylon.jsでの使い方

Babylon.js は @babylonjs/loaders の glTF ローダーで GLB を読み込みます。ImportMeshAsync(古いコードでは SceneLoader.ImportMeshAsync)、多数のコピーが必要なら LoadAssetContainerAsync と instantiateModelsToScene を使います。

  • LOD:lod0.addLODLevel(30, lod1)、addLODLevel(80, lod2) のように登録します。メッシュに null を渡すと、その距離より先でオブジェクトが非表示になります。
  • 数千本の木:Thin Instances(行列を渡す thinInstanceAdd)はメッシュごとに 1 ドローコールで描画できます。木ごとにピッキングやロジックが必要なら通常の createInstance を使います。
  • 葉:glTF の MASK はアルファテストの PBRMaterial(MATERIAL_ALPHATEST)になります。
  • コリジョンメッシュ:isVisible = false にして、checkCollisions か Havok 物理(MESH 形状の PhysicsAggregate)で使います。

その他のカテゴリー

他のスタイルで見る

他のエンジン向け