threejs-scatter: Put a million things on the map.

import { Scatter, bakeImpostor } from 'threejs-scatter'

const far = await bakeImpostor(renderer, rock, { frames: 8, size: 512 })

const scatter = Scatter.create({
  camera, scene,
  terrain: (x, z) => height(x, z), // or a terrain mesh
  seed: 7,
  layers: [{
    name: 'boulder',
    spacing: 12,                     // metres between instances
    density: (x, z) => rockiness(x, z),
    maxSlope: 1.5, align: 1, scale: [0.6, 2],
    cluster: { scale: 80, threshold: 0.5, strength: 0.8 },
    lods: [{ distance: 120, geometry: rock.geometry, material: rock.material }],
    impostor: { distance: 600, geometry: far.geometry, material: far.material },
  }],
})

import { Scatter } from 'threejs-scatter/react'

function Rocks({ geometry, material }) {
  const ground = useRef()
  const scatter = useRef() // ScatterImpl: query(), stats
  return (
    <>
      <mesh ref={ground} geometry={hills} />
      <Scatter ref={scatter} terrain={ground} seed={7}
        maxDistance={400}
        layers={[{ name: 'rock', spacing: 8, maxSlope: 1,
          lods: [{ distance: 150, geometry, material }] }]} />
    </>
  )
}