threejs-landscape

Three.js Landscape

A backdrop has one job: make the subject look like it is somewhere. Everything here is chosen so the landscape reads at a glance and then gets out of the way.

Reach for threejs-weather to put rain, storm or snow on top of it, and threejs-towers when the subject standing in it is architecture.

Ring the camera with a polar grid

Do not build a square heightfield. A long lens sees a narrow wedge, so a square grid spends most of its triangles behind the camera and still runs out of resolution at the horizon.

Sample on a polar grid centred under the camera, with radial rings that get further apart as they recede:

const AN = 900, RN = 52, R0 = 2.0, R1 = 700;   // angular, radial, near, far
for (let r = 0; r <= RN; r++) {
  const t = r / RN;
  const rad = R0 + (R1 - R0) * Math.pow(t, 2.4);   // dense near, sparse far
  for (let a = 0; a < AN; a++) {
    const th = a / AN * Math.PI * 2;
    push(Math.cos(th) * rad, landH(x, z), Math.sin(th) * rad);
  }
}

Two thousand triangles near the subject beat two hundred thousand spread evenly. pow(t, 2.4) is the whole trick: every ring covers roughly the same number of screen pixels.

Watch the winding. On a polar grid it is easy to wind every quad the wrong way and end up looking at the sky through the ground. Index as (a0, b1, b0, a0, a1, b1) and check by orbiting under the horizon once, deliberately, before you build anything else on top.

Warp the domain before you layer octaves

Plain fBm reads as crumpled paper. Warping the sample position with another noise field before you evaluate it is the single biggest step toward terrain that looks eroded:

function landH(x, z) {
  const wx = x + fbm(x * 0.012, z * 0.012, 3) * 26;   // domain warp
  const wz = z + fbm(x * 0.012 + 41, z * 0.012 - 17, 3) * 26;
  let h = fbm(wx * 0.0075, wz * 0.0075, 5) * 34;      // broad landforms
  h += ridged(wx * 0.021, wz * 0.021, 3) * 9;         // ridge lines
  return h;
}

Keep the analytic function separate from the mesh. Grass, stones, fog and anything else you scatter must sample the same landH, or they will float and sink.