Building a Real-Time Atmospheric Scattering Shader in the Browser

A month-long exploration into reproducing Earth’s atmosphere in WebGL, inspired by a photograph of the Endeavour shuttle at sunset showing the gradient from orange to deep blue at the edge of space. The approach treats sky color not as a static gradient but as the physical result of sunlight interacting with air molecules, dust, and ozone at varying altitudes.

The implementation builds up from raymarching fundamentals: casting rays from the camera through the atmospheric volume, sampling density along each step, and computing optical depth using a Rayleigh density function that thins with altitude. Beer’s Law then yields transmittance, while the Rayleigh phase function distributes scattered light based on the angle between the view ray and the sun. Because shorter wavelengths scatter more strongly, the math naturally produces a blue sky with a hazier horizon. Additional realism comes from layering in Mie scattering for larger particles like dust and aerosols, and ozone absorption to deepen the colors during twilight.

The write-up progresses from rendering a sky dome to wrapping the same technique as an atmospheric shell around a planet, and finally to Sebastian Hillaire’s LUT-based optimization for performance. It’s pitched as an interactive, step-by-step tutorial timed loosely to interest from the Artemis II mission, with each component demonstrated live in the browser.