English | 日本語

Atmosphere - a sky simulator

Pass in a time and a weather, and it roughly reproduces that sky. One WebGL fragment shader, no dependencies, no DOM or framework dependency. See the samples in examples/ to see it in action.

import { Atmosphere } from '@takustaqu/atmosphere';

const sky = new Atmosphere(canvas, {
  time: new Date(),
  location: { latitude: 35.68, longitude: 139.77 },
  weather: { cloudCover: 0.95, precipitation: 12, windSpeed: 18 },
});

This keeps drawing Tokyo’s sky at that day and hour, with 95% cloud cover, 12mm/h of rain and 18m/s of wind. Calling sky.set({ ... }) transitions smoothly to a new weather over a few seconds.

It started as a side feature added while personally porting a certain game. It isn’t a physical weather simulation, so it isn’t accurate — but it should be an easy way to get a sky that keeps changing procedurally.

What it draws

• Time of day — the sky’s gradient, the sun (an outline-less blown-out glare, or smaller and bare — see The sun), sunset/magic-hour mauve, city lights at night
• The night sky — light…