Introduction
deck.gl-raster is a collection of TypeScript modules to enable loading GeoTIFF and Cloud-Optimized GeoTIFF (COG) data in the browser and interactively visualizing it in deck.gl.
Features
- Fully client-side: Direct COG/Zarr loading with no server required
- GPU-accelerated image processing:
- Converting color spaces (CMYK, YCbCr, CIELAB to RGB)
- Filtering out nodata values
- Applying colormaps for paletted images
- Soon: color correction, nodata masks, spectral band math, pixel filtering
- Intelligent rendering: Automatically infers default render behavior from GeoTIFF metadata
- Alternatively, fully-customizable rendering with no GPU knowledge required
- Native tiling: Renders tiled data sources in their native tiling scheme, without translating to a Web Mercator tiling grid.
- Flexible reprojection: GPU-based raster reprojection from most projections1
- Efficient streaming: Intelligent COG rendering fetches only visible image portions
- Multi-resolution support: Automatic overview selection based on zoom level
Packages
We're building a new, modular raster data ecosystem for the web; this monorepo contains several packages, each published independently to NPM under the @developmentseed namespace:
| Package | Description | Version |
|---|---|---|
affine | Port of rasterio/affine for managing affine transformations |  |
deck.gl-geotiff | High-level deck.gl layers for GeoTIFF & COG visualization |  |
deck.gl-zarr | High-level deck.gl layers for Zarr visualization (soon) | - |
deck.gl-raster | Core georeferenced raster rendering primitives |  |
epsg | The full EPSG projection database, compressed for the web |  |
geotiff | Fast, high-level, fully-typed GeoTIFF & COG reader |  |
morecantile | Port of Morecantile for working with OGC TileMatrixSets |  |
raster-reproject | Standalone mesh-based image reprojection utilities |  |
How It Works
┌─────────────────────────────────────────────────────────────┐
│ Application Layer │
│ ├─ COGLayer / GeoTIFFLayer │
│ └─ Custom visualization layers │
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
│ Raster Processing Layer │
│ ├─ RasterLayer (core rendering) │
│ ├─ RasterTileset2D (tile management) │
│ └─ GPU Modules (color space, filters, colormaps) │
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
│ Reprojection Layer │
│ ├─ RasterReprojector (mesh generation) │
│ └─ proj4 (coordinate transforms) │
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
│ Data Layer │
│ ├─ @developmentseed/geotiff (COG parsing & streaming). │
│ └─ HTTP range requests │
└─────────────────────────────────────────────────────────────┘
Render Pipeline: A composable sequence of GPU modules that transform raw raster data into displayable imagery. Pipelines are automatically inferred from GeoTIFF metadata or can be customized.
Adaptive Mesh Reprojection: Instead of per-pixel transformation, the library generates an adaptive triangular mesh that warps texture coordinates. This enables efficient GPU-based reprojection with minimal distortion.
Tile Streaming: For COGs, only the tiles visible in the current viewport are fetched. As you zoom, higher-resolution overviews are automatically loaded.
Zero-Copy Texture Upload: Raw raster data is uploaded directly to GPU textures, minimizing CPU-GPU transfer overhead.