GPU-Accelerated Procedural Reconstruction of Cyclones from ERA5 Reanalysis Data

Jun 23, 2026
WebGL / Computer Graphics
Web Application

Objective

Real-time visualization of hurricanes rendered on an interactive 3D Earth.

Tools & Technologies

WebGL, Three.js, GLSL, JavaScript

Description

This presentation explores an original data visualisation developed to reconstruct Hurricane Katrina using massive atmospheric datasets from ERA5 and NASA imagery. Rather than relying on traditional video or satellite animation, the project creates a fully procedural representation generated in real time from meteorological data such as wind speed, direction and storm dynamics.

Designed for a mobile-first news experience, the visualisation addresses a major technical challenge: rendering high-quality atmospheric simulations on smartphones while handling extremely large climate datasets. Using WebGL and Three.js, the project leverages GPU acceleration to generate clouds procedurally with custom GLSL shaders and Perlin noise techniques. Hurricane structures are recreated through a particle-based flow field system advected by real wind data, producing a dynamic and physically inspired representation of the storm.

To make the experience fluid and accessible for a media audience, ERA5 datasets were compressed through a custom pipeline combining multi-resolution datasets, vector quantization, bit-packing and gzip compression. This approach dramatically reduced memory usage and loading times while preserving scientific accuracy and visual fidelity.

The rendering pipeline combines atmospheric effects inspired by computer graphics research, including Rayleigh and Mie scattering, with NASA Blue Marble imagery for Earth textures.

Published by Le Figaro’s data journalism unit, Fig Data, the project demonstrates how advanced procedural rendering and scientific datasets can be transformed into accessible editorial storytelling, offering readers a new way to understand the growing intensity of climate-driven extreme weather events.