NatureGL Sky · Volumetric clouds, atmosphere and a day/night clock

#One mesh. The whole sky.

The sky is a far-plane backdrop in your scene, so your geometry covers it with no sorting. Everything expensive, including the cloud march, shadow map and environment bakes, runs inside sky.update(dt). Your render loop stays renderer.render(scene, camera).

Follow the quick start or read how it composes.

Climbing from the cloud base to above the deck at 180 m/s. The temporal reconstruction reprojects every pixel at the cloud's recorded depth, so the bases don't smear.

presets, one file each: 15
quality tiers, low to ultra: 4
median on high (Apple M5, 1280×720): ~75 fps
mesh added to your scene: 1

#What's in the box

Volumetric clouds at a real altitude
Six cloud forms, from cumulus to cumulonimbus, in a world-space slab. The camera can sit below, inside or above it.
Physically based atmosphere
A sky-view LUT with Rayleigh, Mie and ozone, evaluated at the camera altitude. Sunsets redden with haze.
A real day/night clock
Sun track from latitude and declination, a phase-accurate moon, and rotating stars with the milky way.
Outputs for your scene
Sun/moon lights, hemispherical ambient, an equirect env map, a PMREM for PBR, and cloud shadows and fog colour.
Optional post pass
Height fog with volumetric god rays through the cloud shadow map, clouds in front of geometry, bloom and a night grade.
Scales from laptop to 4K
Four tiers with per-field overrides. The environment bakes are time-sliced so they never spike a frame.

#Fifteen skies, ready to load

Every preset is a plain params object in src/config/presets/. Snap to one with loadPreset, ease into it with applyPreset, or print your own with getParams().

Marine preset — Marine`marine`The signature sky: sea cumulus with the sun ahead.

Storm preset — Storm`storm`Squall line, rain veils, lightning, low sun under the deck.

Cumulonimbus preset — Cumulonimbus`cumulonimbus`One monumental cell anchored 10 km north.

Golden hour preset — Golden hour`golden`Low sun behind towering cumulus.

Noctilucent preset — Noctilucent`noctilucent`Electric-blue high cloud in deep twilight.

Night preset — Night`night`Waning gibbous moon, stars and the milky way.

See all fifteen presets

#Minutes to a living sky

main.js

import * as THREE from 'three';
import { SkySystem } from 'naturegl-sky';

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.toneMapping = THREE.ACESFilmicToneMapping; // the sky writes linear HDR
const sun = new THREE.DirectionalLight();
scene.add(sun, sun.target);

const sky = await SkySystem.create({ renderer, scene, camera, preset: 'marine' });
scene.environment = sky.environment;   // PBR ambient + reflections of the live sky
sky.bindLights(sun);                   // sun by day, moon by night
sky.patchMaterial(ground.material);    // cloud shadows sweep the ground
sky.clock.running = true;

renderer.setAnimationLoop(() => {
  sky.update(timer.getDelta());        // after moving the camera
  renderer.render(scene, camera);
});

#A day in fourteen seconds

sky.clock.speed = 1.35 hours per second, from before dawn to after dusk. The sun colour, ambient, environment map and exposure all follow automatically.

#Part of the NatureGL series

NatureGL Sky is the light source for the rest of the series. NatureGL Water reads its sun, environment and exposure directly. Grass, Weather and NatureGL Island take its lighting too.