Start here

The demo

A mountain valley authored with the API. A brook tumbles into an upper lake, a short outlet runs to the lip of a cascade, and the main stream winds away from the plunge pool. It runs from the package with npm run dev, and in your browser right here.

The same build as `npm run build:demo`. Drag to orbit, right-drag to pan, scroll to zoom. Press H to hide the interface and G to glide down the river.

#Controls

Input	Action
Drag	Orbit the camera
Right-drag	Pan
Scroll	Zoom
`G` or Glide	Start or stop the camera tour down the river. Clicking the canvas also stops it
`H`	Hide or show the interface

The panel holds everything else:

Control	What it does
Preset pills	`loadPreset(name)`, eased in
Clarity (0.3 – 2.5)	`setParam('water.clarity', v)`: how far you can see into the water
Flow (0 – 2.5)	`setParam('water.flow', v)`: the global speed multiplier, which also moves the leaves and driftwood
Caustics (0 – 2)	`setParam('water.caustics', v)`
Foam (0 – 2.5)	`setParam('water.foam', v)`
Quality pills	`setQualityLevel(level)`
Copy preset JSON	Copies `getParams()` to the clipboard, or prints it to the console when the clipboard isn't available

The HUD in the lower left shows the camera heading, the sun elevation, the flow speed under the orbit target (from sample()), and a visibility estimate: the distance at which the least-absorbed colour falls to 1 %.

#What the demo is made of

Everything wet comes from five authoring calls. The valley itself is demo code in demo/scenery/.

Body	Call	Notes
`main-run`	`addRiver`	From the plunge pool downstream to z = 78 at level 0, with a width and bed depth per point
`brook`	`addRiver`	Drops 6.5 cm per metre along its upper half, then runs level into the lake. `flowSpeed: 2.1`, and the steep part gets rapids turbulence
`upper-lake`	`addLake`	Circle of radius 10.5 m at `y = 3`, depth 3.2 m
`outlet`	`addRiver`	Lake → lip at level 3, `extend: [0, 0]` so it stops exactly at the lip
`cascade`	`addWaterfall`	3 m drop onto the main run

The terrain is system.carveTerrain(baseHeight). Boulders that break the surface are registered with addObstacle(). Five sticks of driftwood are library floaters that respawn upstream through onExit. The falling leaves are demo code: they land, then ride the current using system.sample().

#Automation contract

The demo exposes window.__pro, the contract every NatureGL demo shares. npm test and this site's media capture drive the demo through it.

window.__pro = {
  ready: true,                   // after the first two frames
  system,                        // the RiverSystem
  presets: ['clear', 'morning', /* … */],
  qualities: ['low', 'medium', 'high', 'ultra'],
  applyPreset(name) {},          // loadPreset(name, { instant: true }) + sync the UI
  setQuality(level) {},
  camera, controls,              // demo extras: the camera and its OrbitControls
};

Add ?smoke to the URL to turn off the demo's adaptive resolution, which otherwise lowers the pixel ratio when frames stay slower than about 30 fps.