Graphics Modernization

← Back to MapLibre GL JS roadmap

MapLibre GL JS is getting a WebGPU rendering backend alongside the existing WebGL2 renderer. As part of this effort, the WebGL2 renderer is also being modernized to use features like Uniform Buffer Objects, immutable textures, and layout qualifiers that bring it closer to how WebGPU works.

The approach follows MapLibre Native’s architecture, where each backend (OpenGL, Metal, WebGPU) implements the same rendering interface. The WebGL2 and WebGPU backends share all non-GPU code (style evaluation, tile loading, symbol placement, etc.), differing only in how they submit draw calls to the GPU.

The work is split into four phases:

1. WebGL2 Texture and Shader Improvements - Adopt WebGL2-only features like immutable textures and layout qualifiers that align with WebGPU’s model.
2. Drawable Rendering Architecture - Restructure the renderer around Drawables with Uniform Buffer Objects, following MapLibre Native’s pattern.
3. WebGL2 Vertex and Rendering Improvements - Integer vertex attributes, additional GLSL ES 3.00 features, and instanced rendering.
4. WebGPU Backend - Add the WebGPU code path, port GLSL shaders to WGSL, and establish WebGPU render testing.

Each phase is independently shippable. The WebGL2 improvements in phases 1-3 prepare the codebase so that adding WebGPU in phase 4 is a contained change rather than a rewrite.

Progress can be followed in the Graphics Modernization tracking issue. If you are interested in contributing, please reach out on Slack (#maplibre-gl-js) or comment on the issue.