FoliMesh

three.js向けリアルスタイルの樹木

リアルな樹木は three/addons の GLTFLoader でそのまま three.js のシーンに入ります。GLB には LOD0〜LOD3 のメッシュが含まれ、THREE.LOD に渡せます。lod.addLevel(mesh, distance) で各レベルを登録すれば、レンダラーがカメラ距離に応じて毎フレーム切り替えるため、オークやヨーロッパアカマツ、シダレヤナギが一人称カメラの正面に立つ場面でも破綻しません。

森を作る場合、InstancedMesh なら数千本の幹を1回のドローコールにまとめられ、BatchedMesh ならトウヒ、シラカバ、カエデのバリエーションを混在できます。THREE.LOD はオブジェクト単位なので、チャンクごとにレベル別へインスタンスをまとめてください。葉はアルファテストのカードで(glTF の alphaMode MASK は material.alphaTest になり、両面マテリアルには THREE.DoubleSide が入ります)、ソート不要で影も正しく出ます。コリジョンメッシュは非表示のまま Rapier や cannon-es に渡せ、WebGLRenderer でも WebGPURenderer でも動作します。

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

リアルスタイルについて

リアル系モデルは PBR の metal/roughness ワークフローを採用しており、glTF 2.0、Unity、Unreal、Godot、three.js でそのまま読み込めます。

  • 樹皮:幹と枝にベースカラー、法線、ラフネスのマップ。
  • 葉:葉の房のテクスチャを貼ったアルファテスト(Masked)カード。アルファブレンドではないため深度を書き込み、ソート不要で影も正しく落ちます。
  • 樹皮と葉は別マテリアルなので、ドローコール数が読みやすく GPU インスタンシングとも相性が良好です。
  • LOD0 は近景用。LOD1〜LOD3 で枝と葉カードを減らし、最後のレベルは遠景に十分な軽さです。

PC・コンソールの一人称/三人称ゲーム、サバイバル、オープンワールド、シミュレーターに最適です。モバイルでは LOD1 か LOD2 を最も近いレベルにし、葉のオーバードローに注意してください。

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

パック

その他のカテゴリー

他のスタイルで見る

他のエンジン向け