Skip to content

NatureGL Skyv1.1.0

Start here

The demo

The full demo is an island and open sea under the live sky, with a fly camera and a console that exposes every parameter. 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 look, use W A S D to fly, and press ? for every shortcut.

#Controls

#Camera

Input	Action
Drag	Look around
`W` `A` `S` `D` / arrows	Fly
`R` / `F`	Climb / descend
`Shift` (held)	Fly 6× faster
`Alt` + scroll	Zoom the lens
`O`	Toggle fly / orbit camera

#Sky

Input	Action
`Shift` + drag	Move the sun
Scroll	Raise / sink the sun
`1` – `9`, `0`	Jump to a sky preset
`[` `]`	Previous / next cloud form
`X`	Roll a random sky
`T`	Run the day/night clock

#Rendering

Input	Action
`Q`	Cycle quality tier
`Y`	Temporal reconstruction on / off
`B`	Bloom on / off
`G`	God rays on / off
`N`	Post pass on / off (plain `renderer.render`)

Input	Action
`P`	Save this frame as PNG
`Shift` + `P`	Render a 4K poster
`V`	Record a WebM clip
`C`	Copy a link to this sky
`J`	Copy the preset JSON
`M` / `K` / `H`	More controls / fold the console / hide the interface

#Camera jumps

More (M) opens the clock and atmosphere sliders and five camera jumps. Each one exercises a different part of the renderer.

**Shore**: eye height on the beach — Shore: eye height on the beach

**Hill**: looking across the island — Hill: looking across the island

**Cloud base**: just under the deck — Cloud base: just under the deck

**Above the deck**: the camera is above the clouds — Above the deck: the camera is above the clouds

#Automation contract

The demo exposes window.__pro, the same contract every NatureGL demo uses. npm test and the docs' media capture drive the demo through it.

js

window.__pro = {
  ready: true,                 // after the first frames rendered
  system: sky,                 // the SkySystem
  presets: ['clear', 'partlyCloudy', /* … */],
  qualities: ['low', 'medium', 'high', 'ultra'],
  applyPreset(name) {},        // snaps + frames the camera for the preset
  setQuality(level) {},
  // demo extras
  camera, cam, view(name), setPost(on), renderFrame(),
};