02Physics · Graphicsinteractive simulation

ScatterWhy the sky is blue

Why is the sky blue and not violet, why are sunsets red — and why are sunsets on Mars blue?

Scatter on a desktop screen
Scatter on a phone

Summary

A spectral sky simulator: drag the sun, switch off the physics one piece at a time, and read the spectrum of any point in the sky.

What you can do

  • Drag the sun from noon to night and watch the whole sky change colour, rendered from physics at 16 wavelengths.
  • Experiments: make scattering wavelength-independent, ask “why not violet?”, switch aerosols, remove the ozone layer.
  • Fly from the ground to 400 km and see the atmosphere become a thin glowing shell.
  • Tap any point of the sky to read the spectrum reaching your eye there, next to sunlight itself.
  • Switch to Mars, where fine dust makes the noon sky butterscotch and the sunset blue.

How it works

Each pixel integrates single Rayleigh and Mie scattering with ozone absorption along the view ray through a spherical atmosphere, at 16 wavelengths, then converts the spectrum to colour with the CIE 1931 colour-matching functions and a filmic tone map. A precomputed transmittance table keeps it real-time; Martian dust is computed with Mie theory in a worker.

The hard part

Physically based spectral rendering in a fragment shader that also stays measurable: the GPU image agrees with an independent CPU implementation to within 1/255, and the optical depths match published tables.

Validation

Rayleigh optical depth at 400 / 550 / 700 nm (Bodhaine et al. 1999)
within 0.002 %
Mie test cases (Bohren–Huffman, Wiscombe)
match to 6 digits
WebGL vs CPU renderer, 6 scenes
≤ 1/255 in every pixel
16 wavelengths vs a 5 nm reference
colour difference ΔE ≤ 1.05
Scene colours: noon zenith / setting-sun horizon / Mars sunset
476 nm / 587 nm / 479 nm

Built with

  • TypeScript
  • WebGL2
  • GLSL
  • Web Workers
  • KaTeX

Skills it demonstrates

  • Spectral rendering
  • Radiative transfer
  • Colour science