Start here

The demo

The full demo is a tropical island with palms, a basalt headland, buoys, pirate ships at anchor and under sail, a dock, a wreck and a reef. 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, press D to dive, H to hide the interface.

#Controls

#On the surface

Input	Action
Drag	Orbit the camera
Right-drag	Pan
Scroll	Zoom
`D` or Dive	Go under at the reef
`H`	Hide or show the interface

#Under water

Input	Action
Drag	Look around
Scroll	Change depth. Near the top of the range the camera rides the surface, half in and half out
`D` or Surface	Back to the surface

#The console

Control	What it sets
Sea buttons	`loadPreset(name)`: Tropical, Sunset, Dusk, Storm, Foggy, Moonlit, Arctic
Wind (1–25 m/s)	`wind`
Wave (8–120 m)	`wavelength`
Time (00:00–23:59)	`time`
Cloud (0–100 %)	`clouds`
Quality: Low, Med, High, Ultra	`setQualityLevel(level)`
Copy preset JSON	Copies `JSON.stringify(water.getParams(), null, 2)`, or prints it to the console if the clipboard is blocked

The HUD shows the heading, wind, significant wave height and sun elevation on the surface, all read from water.stats. Under water it shows depth, visibility and temperature.

#What each part exercises

**The beach**: breakers and swash from the baked bathymetry

**The wreck**: absorption and refraction through clear shallow water

**The reef**: fog, light shafts and caustics below the surface

**The waterline**: the camera riding the surface

The island terrain is passed to setBathymetry through its height function, so the shore waves follow its ragged coastline. Its seabed materials are patched with water.caustics.patch.
The ships, rowboat and buoys float with water.buoyancy.addObject. The ships and rowboat also call water.addWake. The second ship sails a circuit round the island, so its wake and trail are measured from its motion.
The reef sits on the island shelf, so Dive goes under the same ocean you see from above.
The demo lowers its pixel ratio in steps (down to 0.75) if the frame time stays above about 34 ms. Picking a quality tier by hand turns that off.

#Automation contract

The demo exposes window.__pro, the contract every NatureGL demo shares. npm test and the media capture for these docs drive it.

window.__pro = {
  ready: true,                    // after the first frames and the pirate kit loaded
  system: water,                  // the WaterSystem
  presets: ['tropical', 'sunset', 'dusk', 'storm', 'foggy', 'moonlit', 'arctic'],
  qualities: ['low', 'medium', 'high', 'ultra'],
  applyPreset(name) {},           // water.loadPreset + highlights the button
  setQuality(level) {},           // also stops the adaptive resolution
  // demo extras
  setMode(mode) {},               // 'surface' or 'under'
  setDiveDepth(y) {},             // dive camera target height, 0 = the waterline
  camera, controls,               // the PerspectiveCamera and its OrbitControls
};

Add ?smoke to the URL to turn off the adaptive resolution.