A forest is usually the first thing that turns a browser game's 60 FPS into 15 and a 5 MB page into 150 MB. The web is the strictest platform: weak laptops and phones, a GPU shared with the browser, and every megabyte downloaded before the player sees anything. Here's how to build vegetation that survives those limits.

The web budget

Starting points for a mid-range laptop or phone — measure your own scene:

Most of the forest is far away, so most of it must be cheap. Each LOD should be ~3–4× lighter than the previous one.

Step 1. Start with a game-ready GLB

Before writing rendering code, check the file has:

• an LOD chain with the same silhouette (ideally plus an impostor);
• leaves as clustered cards — not thousands of single leaves, not a solid "broccoli";
• pivot at the trunk base, real-world scale in metres;
• simple collision — a trunk capsule, not the crown;
• per-vertex wind weights.

Step 2. Make the file small: meshopt + KTX2

• Geometry — meshopt (or Draco).
• Textures — KTX2 (Basis Universal). Unlike PNG/JPEG it stays compressed in VRAM, saving both download and memory.

npx @gltf-transform/cli optimize tree.glb tree.min.glb --compress meshopt --texture-compress ktx2

(KTX2 in the CLI needs KTX-Software installed; --texture-compress webp works without it.)

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';

const ktx2 = new KTX2Loader().setTranscoderPath('/basis/').detectSupport(renderer);
const loader = new GLTFLoader().setKTX2Loader(ktx2).setMeshoptDecoder(MeshoptDecoder);
const gltf = await loader.loadAsync('/models/oak.min.glb');

Step 3. A few trees: THREE.LOD

For a handful of trees near the player, built-in THREE.LOD is enough. The third argument is hysteresis against flicker:

const lod = new THREE.LOD();
lod.addLevel(lod0, 0);
lod.addLevel(lod1, 30, 0.1);
lod.addLevel(lod2, 70, 0.1);
lod.addLevel(impostor, 150, 0.1);
lod.position.set(x, 0, z);
scene.add(lod);

Its limit: every tree is still separate draw calls for bark and leaves. Past a few dozen trees you need instancing.

Step 4. Many trees: instancing, in chunks

InstancedMesh draws thousands of copies in one draw call — but it's culled as a whole and has no LOD. Instances 500 m away or behind the camera are drawn at full detail.

Fix: split the world into chunks, one InstancedMesh per chunk × LOD level × material, and pick the level by distance:

const CHUNK = 32;              // metres — close to the LOD0 distance
const STARTS = [0, 35, 80, 160];
const CULL = 400;

function buildChunk(trees, lodMeshes) {
  // lodMeshes[i] = [barkMesh, leavesMesh] from the GLB
  const levels = lodMeshes.map((parts) => parts.map((src) => {
    const im = new THREE.InstancedMesh(src.geometry, src.material, trees.length);
    trees.forEach((m, k) => im.setMatrixAt(k, m));
    im.computeBoundingSphere();
    return im;
  }));
  const group = new THREE.Group();
  levels.flat().forEach((im) => group.add(im));
  group.userData.levels = levels;
  group.userData.center = centerOf(trees); // THREE.Vector3
  return group;
}

function updateChunk(group, camera) {
  const d = camera.position.distanceTo(group.userData.center);
  group.userData.levels.forEach((parts, i) => {
    const visible = d >= STARTS[i] && d < (STARTS[i + 1] ?? CULL);
    parts.forEach((im) => { im.visible = visible; });
  });
}

Run updateChunk a few times per second, not every frame. Keep chunks close to the LOD0 band — distance is measured to the chunk centre.

BatchedMesh: the modern alternative

BatchedMesh draws many geometries with one material, culls each object separately, and setGeometryIdAt is exactly an LOD switch:

const bark = new THREE.BatchedMesh(maxTrees, maxVerts, maxIndices, barkMaterial);
const lodIds = barkLods.map((g) => bark.addGeometry(g));

for (const t of trees) {
  t.id = bark.addInstance(lodIds[0]);
  bark.setMatrixAt(t.id, t.matrix);
}

// a few times per second:
for (const t of trees) {
  const d = camera.position.distanceTo(t.position);
  bark.setGeometryIdAt(t.id, lodIds[STARTS.findLastIndex((s) => d >= s)]);
}

One BatchedMesh per material. Ready-made options: @three.ez/instanced-mesh and @three.ez/batched-mesh-extensions. And if a GLB uses EXT_mesh_gpu_instancing, GLTFLoader creates the InstancedMeshes for you.

Step 5. Leaves: cutout, not transparency

Most slow web forests are slow because of leaves.

leaves.material.transparent = false;
leaves.material.alphaTest = 0.5;
leaves.material.side = THREE.DoubleSide;
leaves.material.alphaToCoverage = true; // soft edges with antialias: true

• Cut cards to the cluster silhouette — on phones fill rate is often the real limit.
• renderer.setPixelRatio(Math.min(devicePixelRatio, 1.5)) is often the single biggest win on high-DPI phones.

Step 6. Shadows and wind

Shadows draw the forest twice. Keep the shadow camera tight, use a moderate shadow.mapSize, and only near levels cast:

lod2Leaves.castShadow = false;
impostor.castShadow = false;

Wind belongs in the vertex shader. With per-vertex weights in the second UV channel (trunk bend in x, branch sway in y):

const time = { value: 0 };
geometry.setAttribute('wind', geometry.getAttribute('uv1'));

material.onBeforeCompile = (shader) => {
  shader.uniforms.uTime = time;
  shader.vertexShader = shader.vertexShader
    .replace('#include <common>', '#include <common>\nattribute vec2 wind;\nuniform float uTime;')
    .replace('#include <begin_vertex>', `#include <begin_vertex>
      float sway = sin(uTime * 1.3 + position.y * 0.2);
      transformed.x += sway * wind.x * 0.25 + sin(uTime * 2.7 + position.x) * wind.y * 0.1;
      transformed.z += sway * wind.x * 0.1;`);
};

// render loop:
time.value = clock.getElapsedTime();

Copying uv1 under its own name avoids a clash with three.js's own uv1 declaration.

Step 7. Measure

• renderer.info.render.calls and .triangles;
• the browser Performance panel — CPU or GPU bound?;
• a real mid-range phone, not just your dev machine.

Often one fix (cutout leaves, pixel ratio, shadow distance) beats all the others combined.

Checklist

• GLB with LOD chain, clustered cards, root pivot, collision, wind weights
• meshopt geometry, KTX2 textures
• THREE.LOD for a few trees; chunked InstancedMesh or BatchedMesh for forests
• alphaTest + alphaToCoverage, not transparent
• Shadows only on near levels, tight shadow camera
• Pixel ratio capped on phones
• Draw calls, triangles and frame time measured on a real device

If you'd rather not build all of this by hand: the FoliMesh tree generator runs in the browser and exports a GLB with LOD0–LOD3 plus a billboard, cluster-shaped leaf cards, wind weights in uv1 and collision capsules in userData — at the triangle budgets you set.

What's the worst bottleneck you've hit with vegetation in three.js?