Design and Implementation of the Eagle.gl Web 3D Engine for High-Definition Map Rendering

High‑Definition (HD) maps are a critical component for the safety of autonomous driving, providing precise perception and decision‑making capabilities. Their production relies heavily on massive laser point‑cloud data, often reaching billions of points per intersection, which imposes strict performance requirements on rendering engines for real‑time visualization and interactive editing.

Existing Web 3D map engines such as Mapbox, Cesium, L7, etc., focus on abstract point, line and polygon visualizations and lack the ability to efficiently load, render, and edit massive point‑cloud datasets. To meet the specific needs of AMap’s HD‑map business, the team launched the development of a custom 3D engine named eagle.gl .

The engine is built on top of Three.js as the rendering layer, extending it with GIS‑oriented visualization and complex editing capabilities. It adopts a unified 2D/3D architecture and is designed to support future smart‑city and 5G‑IoT scenarios.

The overall engine is divided into three major subsystems:

Point‑cloud map: supports various point‑cloud formats (las, laz, bc, xbc, rds, bin), real‑time LOD rendering of hundreds of millions of points, and interactive picking/editing.

Vector map: provides online production‑line vector rendering, snapshot management, command‑line editing, and spatial indexing for CRUD operations.

Model map: handles data‑level modeling and real‑time model editing to align with AMap’s client‑side lane‑level rendering.

Key technical solutions include:

Config‑driven style system with interfaces such as IBaseStyle , ILineStyle , ITextStyle , IPointStyle , IPolygonStyle , IModelStyle , and ICustomStyle . Styles can be static or driven by tile‑based schemas.

Data‑driven model loading via an API call, for example: mapView.addDataLayer({ id: 'model', style: { type: 'model', resources: { type: 'gltf', base: '//cn-zhangjiakou-d.oss.aliyun-inc.com/fe-zone-daily/eagle.gl/examples/assets/theme/default/model/', files: ['ludeng_0.glb'] }, translate: [0, 0, 0] }, features: [{ geometry: { type: 'Point', coordinates: [[116.46809296274459, 39.991664844795196, 0]] } }] });

DEM elevation rendering using QMesh tiles, enabling high‑performance terrain visualization and seamless integration of 2D vector data with 3D elevation.

Multi‑source heterogeneous data fusion (DEM, BIM, oblique photography) to achieve macro‑ and micro‑level unified visualization.

Advanced interaction capabilities: hybrid ray‑casting and GPU picking for sub‑20 ms selection of massive datasets, real‑time data clipping, and plugin extensibility (distance measurement, editing, box selection).

Visual effects such as smooth flight animations, time‑of‑day lighting, post‑processing pipelines built on top of Three.js, and 2D/3D globe switching.

The engine has already been deployed in AMap’s HD‑map production, data analysis, and new‑infrastructure projects. Future work aims to extend the platform toward autonomous‑driving simulation and digital‑twin applications by integrating additional data sources and enhancing simulation fidelity.