FoliMesh

three.js向けサボテン・多肉植物

ブラウザの砂漠シーンは draw call の数で決まります。このサボテン・多肉植物は GLB なので、three/addons の GLTFLoader でそのまま読み込めます — ベンケイチュウ、樽型サボテン、ウチワサボテン、アガベ、アロエの 5 種で、西部劇、サバイバルマップ、low-poly のジオラマに向きます。

各モデルは LOD0–LOD3 を備え、THREE.LOD と lod.addLevel(mesh, distance) でカメラ距離に応じて切り替わります。大量配置は InstancedMesh が数千個を 1 draw call で描画しますが、LOD はインスタンス単位では効かないためチャンクごとにまとめます。alphaMode MASK は material.alphaTest になり、コリジョンメッシュは非表示のまま Rapier や cannon-es に渡せます。WebGLRenderer と WebGPURenderer の両方で動作します。

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

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 のどちらでも動作します。

パック

その他のカテゴリー

他のスタイルで見る

他のエンジン向け