Trees in Realistic Style for three.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 three.js

In three.js, load GLB with GLTFLoader from three/addons; add DRACOLoader or KTX2Loader only if a file uses those extensions.

• Distance LOD: THREE.LOD with lod.addLevel(mesh, distance) for LOD0–LOD3; it switches levels by camera distance every frame.
• Forests: InstancedMesh draws thousands of copies in one draw call, and BatchedMesh mixes several tree variations. THREE.LOD does not apply per instance, so group instances by LOD per chunk yourself.
• Leaves: glTF alphaMode MASK becomes material.alphaTest, and double-sided materials get side: THREE.DoubleSide automatically.
• Collision mesh: keep it invisible and pass it to a physics library such as Rapier or cannon-es.

Works with both WebGLRenderer and WebGPURenderer.