WebGPU Clouds

This is a small WebGPU cloud playground built with Three.js WebGPU. React. and Vite.

The short idea is simple. We are not drawing flat cloud sprites. We build 3D cloud data on the GPU. march rays through that data every frame. then composite the result over the sky.

That is what volumetric means here. the cloud has thickness. light can travel through it. and the final image depends on scattering and transmittance instead of just alpha.

Why It Is Interesting

A normal fake cloud is often just a textured shape.

This project does something more physical.

1. A compute pass generates 3D noise.
2. A compute pass generates a 3D signed distance field for the big cloud bodies.
3. Another compute pass ray marches the cloud volume every frame.
4. A fullscreen pass composites clouds over the sky.

That gives us a much better base for learning real time volumetric rendering.

Run It

bun install
bun run dev

Open http://localhost:5173.

For checks.

bun run test
bun tsc
bun lint

Use bun run test. not bun test. The project uses Vitest through the script.

Where To Look

If you want the volumetric path only. start here.

1. src/clouds/renderer.ts
2. src/clouds/compute/noise-generator.ts
3. src/clouds/compute/sdf-generator.ts
4. src/clouds/compute/cloud-march.ts
5. src/clouds/composite.ts

If you want a short file map with a bit more guidance. read volumetric-clouds-reference.md.

If you want the bigger architecture explanation. read webgpu-architecture.md.