How do you visualize decades of high-resolution national climate projection data — wind speed, solar radiation, temperature, degree days — directly in a web browser, with smooth rendering and precise data picking, all built on open source tools?

At Camptocamp, we tackled this challenge during the Météo France hackathon in Toulouse, where teams were given access to beta climate projection datasets from Météo France and the DINUM. Our goal: build a web application helping the renewable energy industry assess regional potential under different climate warming scenarios, aligned with the French government's TRACC adaptation framework (+2°C, +2.7°C, +4°C milestones).

The data pipeline — built with Python, GDAL, Xarray, and RioXarray — transforms NetCDF climate model outputs (CNRM-ALADIN64E1, ~12 km resolution, 2014–2100) into monthly raster tilesets. The challenge then becomes how to render these rasters with maximum expressiveness on a map, going well beyond what standard raster layer support in MapLibre GL JS offers out of the box.

This is where our open source library maplibre-gl-shader-layer comes in. Born from real production needs in meteorological data visualization, this TypeScript/WebGL library provides the building blocks to create fully custom tiled layers for MapLibre GL JS, powered by Three.js under the hood. Developers can write their own GLSL fragment shaders and hook into per-tile uniform updates — giving full control over color mapping, encoding, blending, and animation.

The library's flagship component, MultiChannelSeriesTiledLayer, is designed specifically for scientific data: it decodes multi-channel PNG or WebP tiles where RGB channels encode up to 24-bit precision float values (similar to Mapbox Terrain-RGB), supports time/depth/scenario series interpolation, and applies configurable colormaps from a built-in library (viridis, inferno, turbo, and custom descriptions). Nodata handling via the alpha channel and support for PMTiles archives round out the feature set for production use.

We will walk through the full open source stack — from raw NetCDF to interactive browser map — and show how maplibre-gl-shader-layer makes it straightforward to build expressive, performant meteorological visualizations without sacrificing flexibility. Demos will include climate indicator overlays, a warming scenario slider, and seasonal navigation — all rendered in WebGL.

The library is MIT-licensed, available on npm, and actively maintained by the Camptocamp geoblocks team.

Repository: https://github.com/geoblocks/maplibre-gl-shader-layer