FoliMesh

three.js向けローポリスタイルの3Dモデル

42点のモデルはすべてLOD0〜LOD3を含むGLBで、three/addonsのGLTFLoaderで読み込み、lod.addLevel(mesh, distance)でTHREE.LODに登録すれば、カメラ距離に応じて毎フレーム詳細度が切り替わります。葉はアルファカードではなく実体ジオメトリなので、アルファテストも透過オーバードローも発生せず、オーク、ヨーロッパアカマツ、シラカバ、竹はモバイルGPUでも軽いままです。

色は頂点カラー(COLOR_0)に入っているため、共有マテリアル1つでシーン内の樹木・サボテン・岩をすべてまかない、InstancedMeshなら数千個を1ドローコールで描画できます。THREE.LODはインスタンス単位では動作しないので、インスタンスはチャンクごとにまとめてください。ポリゴン予算はLOD0で数百〜2,000トライアングル程度。非表示のコリジョンメッシュはそのままRapierやcannon-esに渡せ、WebGLRendererとWebGPURendererの両方で動きます。

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

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

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

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

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

three.jsでの使い方

three.js では three/addons の GLTFLoader で GLB を読み込みます。DRACOLoader や KTX2Loader は、ファイルがその拡張を使う場合のみ必要です。

  • 距離 LOD:THREE.LOD に lod.addLevel(mesh, distance) で LOD0〜LOD3 を登録すると、毎フレームカメラとの距離でレベルが切り替わります。
  • 森:InstancedMesh なら数千本を 1 回のドローコールで描画でき、BatchedMesh では複数の樹木バリエーションを混在させられます。THREE.LOD はインスタンス単位では効かないため、チャンクごとに LOD 別のインスタンスグループを自前で管理します。
  • 葉:glTF の alphaMode MASK は material.alphaTest に、両面マテリアルは自動で side: THREE.DoubleSide になります。
  • コリジョンメッシュ:非表示にして、Rapier や cannon-es などの物理ライブラリに渡します。

WebGLRenderer と WebGPURenderer のどちらでも動作します。

パック

その他のカテゴリー

他のスタイルで見る

他のエンジン向け