Gliding through volumetric clouds in the browser

· 1 min read · three.js, webgl, clouds, atmosphere, launch

A bright sky with soft layered volumetric clouds and a lens flare, an aviation concept scene in Three.js

A flat sky is the first thing that gives a 3D scene away. Glide Clouds is a small aviation concept built to show the opposite: volumetric clouds in the browser, soft and layered, that you can fly through.

The sky of Glide Clouds

What to look at #

The scene has two ideas that work together:

  • Volumetric clouds. They are volumes, and not billboards, and light scatters through them, so the sky feels deep and not painted on a dome.
  • Cinematic lens flares. The same light that cuts through the cloud bank blooms across the frame, so atmosphere and camera optics read as one coherent look.

It is a focused technical demo: realistic sky density and optical response, working together for a flight-inspired moment that still runs in real time.

Where it went next #

The clouds went on to become a component for React Three Fiber. There are videos about the volumetric cloud component and about the clouds running in a project.

Try it #

The scene is live at threejs-aviation.vercel.app, and there are more details on the project page.

Related projects

  • Glide clouds — Volumetric clouds with cinematic lens flares