Cloudscape WebGL — Volumetric Sky Raymarching

Volumetric raymarching casts a ray from the camera through a region of space that can hold varying amounts of "stuff" — in this case a hazy horizontal slab of sky — and samples density at several points along that ray. Instead of hitting a hard surface like a rock or wall, the ray gradually gathers colour and opacity as it passes through cloud, building up a soft, semi-transparent look rather than a solid one.

This shader takes 28 steps through the cloud slab per pixel. Full volumetric cloud renderers in film and games often take hundreds of steps with multiple scattering bounces, which is far too costly for a real-time browser tab. Twenty-eight steps with a single self-shadowing sample is a deliberately lighter approximation, tuned to stay smooth on ordinary laptops and phones while still reading convincingly as billowing cloud.

FBM (fractal Brownian motion) layers several octaves of value noise at increasing frequency and decreasing strength, the same way real cloud structure has large soft billows with smaller wispy detail riding on top. Summing five octaves of hash-based noise produces exactly that layered, organic softness without needing any texture images or 3D cloud data.

Each march sample's position is advected sideways by a slow time-based offset before the noise is evaluated, which reads as the whole cloud layer drifting. On top of that, a cheap secondary noise lookup domain-warps the sampling coordinates so the cloud shapes themselves slowly fold and morph rather than just sliding rigidly, avoiding the repetitive look of a plain scrolling texture.

At every point where cloud density is found, the shader takes one extra density sample slightly offset toward the sun direction. Denser cloud in that direction means less light reaches the point, so it is shaded darker and cooler; thinner cloud toward the sun lets more warm light through. It is a single cheap sample rather than a full secondary light march, but it is enough to give the clouds believable sunlit tops and shadowed undersides.

The Time of Day slider blends between three hand-authored sky colour presets — a warm pink-orange dawn, a bright blue day, and a deep orange-purple dusk — using smooth interpolation. At 0 you get dawn, at 0.5 a clear midday sky, at 1 a dusk glow, with every position between blending continuously rather than snapping between the three.

Your pointer position is converted to a normalised value from -1 to 1 relative to the canvas centre, then smoothed a little further each frame so it eases toward wherever the pointer currently is instead of jumping there instantly. That smoothed value nudges the camera's ray origin and direction by a small amount, so the cloud layer appears to shift very gently with your perspective, like looking through a window as you move your head.

Yes. Touch-drag on the canvas feeds the same parallax value as mouse movement. Where the device exposes gyroscope tilt data, gentle phone tilts drive the parallax instead, so lying back and slowly tilting the phone shifts the cloud view — no special setup is needed on most Android browsers, and iOS shows a small optional Motion button since Apple requires a tap before granting tilt access.

The other scenes on this site (aurora, nebula, crystal cave, bioluminescent ocean) are all set at night for a moody, low-light atmosphere. Cloudscape is intentionally a daytime-leaning scene by default — sky and cloud undersides are naturally brighter than a night sky — though the Time of Day slider lets you dial it back toward a softer dawn or dusk palette if you prefer less brightness.

Yes. ASMR Sanctuary is a Progressive Web App. After your first visit the Service Worker caches this page and its shader code, so Cloudscape keeps running fully offline with no internet connection required.