A sky generated, every frame

Procedural cloud backdrops on a web page used to mean a looping video — pre-rendered footage of real clouds, shipped as MP4 and streamed to the visitor. That works, but it's a fixed asset: same clouds every time the page loads, and no real "live sky" feeling. The alternative — real volumetric clouds raymarched per pixel — produces stunning visuals but costs an enormous per-pixel budget. Beautiful in a tech demo, unshippable as a background.

This sits in the middle. The cloud shapes are generated in real time from a multi-octave noise field, projected onto the sky via a perspective trick — the same d.xz/d.y formula used in flight simulators since the eighties. A second noise layer simulates the self-shadow that gives cumulus their luminous tops and shadowed undersides. The HDRI sky behind it provides atmospheric depth.

The technique trades the dimensional truth of a raymarched volume for something cheaper that still reads convincingly as a cloudy sky — and crucially, fast enough to actually use. Real-time generated, no baked assets, runs on integrated graphics. The kind of thing you could put behind your hero copy without your CPU fan spinning up.

— fps

Want to bring WebGL to your site?
Let's talk about what it would take.

Book a discovery call →