Why is there no geometry?

Because clouds have no surface. Anything you model with triangles has a boundary, and cloud does not — it is a density that fades. Raymarching samples that density directly, which is why volumetric rendering exists as a separate technique.

Will this run on an old machine?

It is the heaviest saver here, since the cost is per pixel rather than per object. It scales with window size, so a smaller window or a lower resolution display will run it comfortably.

Does this need a special browser or plugin?

No. It uses WebGL, which every current desktop and mobile browser supports. Nothing is installed and no plugin is required.

Does it cost anything or need an account?

No. Every screensaver here is free, runs in the browser and needs no sign-up.

What is fractal noise?

A sum of noise layers at different scales, each finer and fainter than the last. The result has detail at every zoom level, which matches how natural shapes such as clouds and mountains look.

Why does the image sometimes look grainy?

Taking fewer samples along each ray is faster but leaves gaps between steps. Renderers hide the gaps by jittering the start point of each ray, which trades banding for fine grain.

Do real clouds scatter light the same way?

In outline, yes. Water droplets scatter light mostly forwards, which is why edges facing the sun glow, though a faithful simulation also needs multiple scattering.

Volumetric Clouds Screensaver

The Volumetric Clouds screensaver renders drifting cloud with no geometry whatsoever. The scene is a single quad, and for every pixel the shader marches a ray through a noise field, accumulating density and light. It runs in the browser with nothing to install; press ESC to exit.

How the Volumetric Clouds screensaver works

The saver renders with three.js on your GPU. The library is vendored into this site rather than fetched from a CDN, and is loaded only when a 3D screensaver actually runs.

It reads nothing external — the entire image is computed in a fragment shader on your GPU.

The scene resizes with the window and releases its WebGL context when the saver stops, so shuffle mode and Multi-view can cycle 3D savers without exhausting the browser's context limit.

If WebGL is unavailable the saver says so on screen rather than showing an empty black box.

Raymarching a cloud from density alone

Clouds are not surfaces. They are suspended droplets that scatter light throughout their volume, which is why a mesh of triangles cannot capture them. Volumetric rendering takes the physical view instead: define how dense the medium is at every point in space, then simulate light passing through it.

The technique is called raymarching. For every pixel, the program sends a ray into the scene and steps along it in small increments, sampling the density at each point and accumulating how much light is absorbed and scattered. Density comes from layered noise. Adding several octaves of noise at increasing frequency and decreasing strength, a method known as fractal Brownian motion, produces the billowy, self-similar texture of real cumulus.

Lighting is the part that makes a cloud read as solid. A cheap approximation samples density a step or two toward the light, so thick regions cast shadow on their own interiors, and thin edges glow where light passes through them. All of this is calculated per pixel on the graphics card, which is why a modest change in the number of steps affects both quality and speed so strongly.

A worked example

For each pixel the shader steps along a ray up to 52 times. Wherever it finds density it takes four more samples toward the sun to ask how much cloud is in the way, and darkens accordingly. That inner loop is what produces silver linings: a thin edge transmits light and a thick core does not, and the difference is computed rather than painted.

Settings & tips

Accent and Background recolour the scene; Speed changes the pace of both the motion and the camera.
Add it to a Multi-view grid, though 3D savers are heavier than the 2D ones and a few per screen is plenty.
Press ESC at any time to leave fullscreen.

Frequently asked questions

Why is there no geometry?: Because clouds have no surface. Anything you model with triangles has a boundary, and cloud does not — it is a density that fades. Raymarching samples that density directly, which is why volumetric rendering exists as a separate technique.
Will this run on an old machine?: It is the heaviest saver here, since the cost is per pixel rather than per object. It scales with window size, so a smaller window or a lower resolution display will run it comfortably.
Does this need a special browser or plugin?: No. It uses WebGL, which every current desktop and mobile browser supports. Nothing is installed and no plugin is required.
Does it cost anything or need an account?: No. Every screensaver here is free, runs in the browser and needs no sign-up.
What is fractal noise?: A sum of noise layers at different scales, each finer and fainter than the last. The result has detail at every zoom level, which matches how natural shapes such as clouds and mountains look.
Why does the image sometimes look grainy?: Taking fewer samples along each ray is faster but leaves gaps between steps. Renderers hide the gaps by jittering the start point of each ray, which trades banding for fine grain.
Do real clouds scatter light the same way?: In outline, yes. Water droplets scatter light mostly forwards, which is why edges facing the sun glow, though a faithful simulation also needs multiple scattering.

← All Generative screensavers