Ground cover in Low-poly Style for three.js

About the Low-poly style

Low-poly vegetation is the cheapest style to render and to ship.

• Flat shading: one normal per face gives the crisp faceted look; no normal maps.
• Colour lives in vertex colours (glTF COLOR_0), so there are no textures, no UV work and almost no video memory.
• Leaves are solid geometry, not alpha cards: no alpha testing and no transparent overdraw, which matters on mobile GPUs.
• One material can be shared by every model in the scene, so trees batch and instance easily.
• Typical budgets range from a few hundred to a couple of thousand triangles at LOD0.

A good fit for mobile, WebGL/WebGPU, VR, strategy, city builders and stylised indie games. In the engine, use a material that multiplies by vertex colour.

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.