Trees in Realistic Style for Babylon.js

About the Realistic style

Realistic models use the PBR metal/roughness workflow that glTF 2.0, Unity, Unreal, Godot and three.js read directly.

• Bark: base colour, normal and roughness maps on the trunk and branches.
• Leaves: alpha-tested (masked) cards with leaf-cluster textures, not alpha-blended, so they write depth, need no sorting and cast correct shadows.
• Bark and leaves use separate materials, which keeps draw calls predictable and works well with GPU instancing.
• LOD0 is the close-up mesh; LOD1–LOD3 drop branches and leaf cards, so the last level is light enough for far distances.

Best for first- and third-person games, survival, open worlds and simulators on PC and consoles. On mobile, start from LOD1 or LOD2 as the nearest level and watch overdraw from leaf cards.

Using it in Babylon.js

Babylon.js loads GLB through the glTF loader in @babylonjs/loaders: ImportMeshAsync (or SceneLoader.ImportMeshAsync in older code), or LoadAssetContainerAsync when you need many copies via instantiateModelsToScene.

• LOD: lod0.addLODLevel(30, lod1), addLODLevel(80, lod2) and so on; passing null as the mesh hides the object beyond that distance.
• Thousands of trees: thin instances (thinInstanceAdd with matrices) render in one draw call per mesh; use regular createInstance when each tree needs its own picking or logic.
• Leaves: glTF MASK maps to alpha-tested PBRMaterial (MATERIAL_ALPHATEST).
• Collision mesh: set isVisible = false and use it with checkCollisions or Havok physics (PhysicsAggregate with a MESH shape).