three.js向けリアル3Dモデル

three.js向けリアルスタイルの3Dモデル

リアルな植生は変換なしで three.js に入ります。three/addons の GLTFLoader で GLB を読み込み、PBR メタル/ラフネス素材——樹皮は base color・ノーマル・ラフネスマップ、葉はマスク処理されたカード——が制作時のまま表示されます。DRACOLoader や KTX2Loader はファイルがその拡張を使うときだけ追加してください。LOD0〜LOD3 のメッシュは lod.addLevel(mesh, distance) で THREE.LOD に渡し、カメラ距離に応じて毎フレーム切り替わります。

42 モデルにはオーク、ヨーロッパアカマツ、トウヒ、シラカバ、シダレヤナギ、オリーブ、ココヤシが揃い、森も砂漠も組めます。大量配置は InstancedMesh、数種を混ぜるなら BatchedMesh。THREE.LOD はインスタンス単位では効かないため、チャンクごとにレベル別へ自分でまとめます。コリジョンメッシュは非表示のまま Rapier や cannon-es に渡せます。FPS/TPS、サバイバル、オープンワールド、シミュレーター向きで PC とコンソールに。モバイルは LOD1 か LOD2 から始め、葉カードのオーバードローに注意を。

リアルスタイルについて

リアル系モデルは 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 などの物理ライブラリに渡します。