Volumetric cloudsfor Three.js.

A physical atmosphere, raymarched cloud layers and time-of-day lighting in one configurable renderer.

Buy Skydrift for $32 Open the live demo
60 fps capture
StratocumulusCinematic quality, WebGPU render
Atmosphere
Physical scattering LUTs
Clouds
Lower volume and cirrus
Rendering
WebGPU and WebGL2
Delivery
Readable source included

Inside the renderer

One sky model from horizon to cloud top.

The atmosphere and cloud passes share the same sun, exposure and weather controls, so a time change affects the whole frame.

Physical atmosphere

Transmittance, multi-scatter and sky-view LUTs model Rayleigh scattering, aerosols and ozone.

Raymarched cloud volume

Perlin-Worley shape, weather cells, edge erosion, cone-sampled lighting and temporal accumulation.

Cirrus, shafts and terrain

A separate high layer, screen-space sun shafts and a grounded horizon all follow the same lighting state.

Five quality tiers

View samples, lighting samples, cirrus samples and internal resolution scale together for a clear frame budget.

Clouds in motion.

Fresh 60 fps captures from the shipped renderer. No compositing, stock footage or offline cloud simulation.

Fair-weather cumulusVolume shape and self-shadow
Sun peekCloud mask shafts and warm light
Afternoon to duskAtmosphere LUT response
Grounded horizonTerrain silhouette and atmospheric depth

The frame has somewhere to land.

A procedural terrain silhouette and angular ground gradient put the viewer under the weather instead of inside an empty skybox.

Move the camera in the demo

Integration

Boot the whole sky in one call.

Skydrift ships as readable ES modules. Load a preset, render it from your camera, then tune named atmosphere, cloud, lighting and terrain controls.

sky.printSettings() exports the current look as a copy-pasteable preset.

Read the API reference
main.jsThree.js r184
import { bootSkydrift } from "skydrift/Skydrift.js";

const sky = await bootSkydrift({
  renderer,
  backend,
  hasCompute,
  preset: "sunpeek",
  quality: "high",
});

renderer.setAnimationLoop(() => {
  sky.update(camera, clock.getElapsedTime());
  sky.render(renderer);
});

Seven starting skies.

Load a weather state, then change every parameter through the same API used by the demo.

cumulus
Fair-weather puffs
sunpeek
Backlit moving banks
mixed
Low volume with cirrus
stratocumulus
Broken low deck
stratus
Flat overcast ceiling
cumulonimbus
Deep storm structure
cirrus
High ice veil
Preset reelAll seven shipped states

Developer license

Build the sky into your next world.

$32 one-time
Buy Skydrift Read the license
  • Readable sourceNo obfuscation or runtime service.
  • Commercial useUnlimited products and installs for one developer.
  • Free v1.x updatesDownload each v1 release from the purchase page.
  • Two rendering pathsWebGPU with a WebGL2 fallback.

Questions

For team licensing or integration questions, email hello@getskydrift.com.

Does it need WebGPU?

No. Skydrift uses Three.js WebGPURenderer, with WebGPU where available and a WebGL2 fallback from the same TSL graph.

How does this differ from a sky shader?

The package combines physical atmosphere LUTs with raymarched lower clouds, cirrus, self-shadowing, multiple scattering and temporal accumulation.

What does it cost to render?

The cloud raymarch is the main cost. Five quality tiers scale samples and internal resolution. Profile the densest preset on your target hardware.

Can I ship it commercially?

Yes. One developer can use it across unlimited products and installs. The source itself cannot be redistributed or resold.

How do updates work?

Every v1.x release is included. The latest build stays available from the same purchase page.