10 min readSaman Sahraei
GPU-Friendly Overlays on Top of MapLibre
Synchronising Three.js with MapLibre, instancing markers, and keeping 60 FPS when the camera moves.
WebGLThree.jsMapLibre
A 3D map overlay is really two renderers sharing one camera illusion. MapLibre owns the basemap; Three.js draws on top. If those cameras drift even slightly, the entire effect breaks trust immediately.
Instancing is non-negotiable
Drawing one mesh per order point will not survive past a few thousand features. InstancedMesh pushes marker transforms to the GPU in a single draw call. Level-of-detail culling trims instances outside the frustum before they hit the pipeline.
- Custom layer hook for MapLibre + Three.js sync
- Mercator projection helpers for world-space alignment
- Lazy-loaded demo chunks so routes stay lightweight
- Reduced motion and mobile fallbacks where WebGL is constrained
Performance on a map is not a benchmark score — it is whether panning still feels like touching paper.