WEB 三维引擎在高精地图数据生产的探索和实践

1. 前言

高精地图（High Definition Map）作为自动驾驶安全性不可或缺的一部分，能有效强化自动驾驶的感知能力和决策能力，提升自动驾驶的等级。对于自动驾驶来说，高精地图主要是给机器用的，但是在制作和分析过程中依然需要人能够理解。本文将为大家简单介绍下，在过去的一段时间里高德高精地图业务团队，在WEB三维引擎技术方面的一些探索和实践，如何让复杂抽象的地理数据呈现在人们面前，满足其业务编辑和分析的诉求。

高精地图主要是对道路交通层对象（如：车道地面标线、交通灯、交通牌、防护栏、杆等）的精细化表达，包含其几何位置和属性。由于对精度要求极高，它的制作主要还是依赖激光点云，通常都是海量的数据，一个路口的点云量就可能上亿，这就对渲染引擎的性能有较高要求，要满足对海量点云实时渲染和拾取编辑。

起初，我们调研了市面上主流的Web三维地图引擎：Mapbox、Cesium、JS API、L7等，它们普遍对点云的加载处理能力支持不够，偏向于对抽象的点、线、面表达，精细化渲染能力不足，同时也满足不了作为编辑工具对复杂Topo关联关系的编辑能力。对于高德高精数据编辑分析的业务场景，需要更多的底层抽象能力建设。于是，我们在高精业务中开启了三维引擎eagle.gl的探索实践之路。

先通过一个视频简单了解下目前高德三维引擎eagle.gl的能力，它实现了一套2/3D统一的地图数据编辑和可视化解决方案，具备很好的可扩展能力，目前已应用在高德高精地图数据生产、数据分析、以及新基建项目等业务。

Figure 1.1 高精地图渲染引擎能力展示

2. 引擎方案设计实现

基于上面的分析，我们需要实现一套满足高德业务场景需求的数据制作引擎能力。为了不重复造轮子，最大程度利用已有的开源能力，我们最终选用Threejs当作渲染层框架依赖。基于该框架，在上层构建GIS可视化和复杂编辑能力，最终实现构建一套2/3D一体化渲染引擎。同时面向未来智慧城市、5G IOT方向，构建数据团队面向业界看齐的GIS 3D可视化能力。

Figure 2.1 面向高精地图的2/3D一体化数字引擎

整个引擎工作可以拆分为三个部分（点云地图、矢量地图、模型地图），前端团队整体工作需要围绕这三个点去展开。

• 点云地图：对接多种点云资料格式的可视化(las/laz/bc/xbc/rds/bin)，支持海量点云的实时渲染和编辑，满足主产线对点云资料的作业吸附能力。

• 矢量地图：主要对接在线生产产线矢量化成图能力，通过数据快照、命令行编辑模式、空间数据索引等能力实现矢量化3D数据的增删改查能力。

• 模型地图：主要面向数据成果应用层，进行数据预处理建模、实时建模编辑等，实现数据能力与高德客户端车道级渲染能力拉齐。

3. 技术解题

下面简单介绍一下各个核心模块能力。

3.1 全幅面精细化渲染

高精数据有着更精确更丰富的信息，支持更精细的数据渲染，更好地还原真实世界。

Figure3.1.1 全幅面精细化渲染

高精原始的产出数据是矢量化骨架数据，这一层数据是真实世界的数字化的点线面抽象，怎么根据原始的矢量数据进行模型化渲染展示呢？原始矢量数据是面向自动驾驶等机器使用，为了能够更好的核实数据质量，进行数据问题调查分析，我们需要把点线面矢量数据进行建模渲染，达到最终模型化精细化渲染效果，方便人工进行快速的问题核实。

Figure3.1.2 原始的矢量化数据成果

Figure3.1.3 端上实时数据建模精细化渲染成果

为了支持精细化的渲染效果，eagle.gl引擎目前支持常用的点、线、面、体、文本、模型等多种可视化图层，并且通过配置化的方式实现了数据渲染实现。

整个建模渲染分为以下核心模块流程, 主体流程是原始点线面矢量数据拉取，根据规则进行数据解析，数据建模处理，数据合并和Instance处理，数据渲染。其中工作量最大的部分在于数据预建模处理，因为原始数据的表达更加抽象，为了更加真实的还原世界，需要做很多的逻辑计算，例如斑马线/导流带数据表述中只有外边的边框轮廓，为了渲染的更真实，需要根据数据的长短边规格和交通路网规范，进行过程中实时建模生成。

Figure3.1.4 端上渲染建模核心流程

Figure.3.1.5 斑马线原始几何

Figure.3.1.6 斑马线建模后几何

通过同样的处理方式，我们就能够实现数百种高精数据定制化建模能力。但是好几百种数据规格如果通过硬编码的形式进行建模会导致整个代码结构的腐化和不可维护。因此我们在引擎层实现数据配置驱动地图图面样式展现的能力。

Figure.3.1.7 多种高精数据建模成果表达

对于style的定义我们区分为两种类型，一种是基本的feature要素对应的展现行为，这层style目前定义为静态的style配置；另外一种style是tile数据源驱动的styleSchema，这种style会定义动态的属性以及空间场景、灯光等共有属性定义。

基础要素层对应的style我们主要分为以下几个类型：

IBaseStyle | ILineStyle | ITextStyle | IPointStyl | IPolygonStyle | IModelStyle | ICustomStyle

举个例子，我们用模型样式类ModelStyle，新增模型的样式定义，继承自IBaseStyle。

mapView.addDataLayer({
  id: 'model', // 图层id，id为唯一标识，不能重复
  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]],
      },
    },
  ],
});

属性

置为灰色部分表示继承自BaseStyle属性

ModelResource资源定义

通过上面的API调用就可以实现模型数据的加载渲染。整个地图图面的全量要素表达都可以通过这种形式进行可视化描述。

Figure.3.1.8 gltf模型如何通知配置样式进行定义加载

3.2 多源异构数据一体化渲染

对于HD的数据生产，点云和DEM高程分为对应采集和应用侧最核心的资料数据表达。作为引擎的特色能力，目前引擎实现了DEM高程渲染和多维度的点云着色能力，后续还会进行BIM/倾斜摄影等多源模型能力的接入，实现基于一张图进行宏观/微观一体化展示能力。

3.2.1 DEM高程渲染

Figure.3.2.1.1 DEM渲染效果DEMO

高精的数据是XYZ的三维数据表达，但是我们很多传统的路网数据都是二维的，如何实现多源矢量数据的混合叠加，我们采用接入DEM高程方案，把无高程的传统背景数据/路网数据拔投影到海拔高度。原始输入的为tiff图像文件，通过利用数据预处理进行QMesh渲染矢量生成，主体数据处理流程如下：

Figure.3.2.1.2 DEM数据渲染处理流程

QMesh渲染方案是Cesium推荐的现在及未来使用的地形切片格式，与Heightmap格式相比较，具有更高的性能优势和更小的数据存储。基于性能更优的QMesh几何处理方案，实现全国山体地形实时加载，同时支持在worker中进行地形实时细分，可以基于低级别三角面动态计算渲染至21级地形。

Figure.3.2.1.3 多源异构数据融合一体化渲染 - DEM高程方案

3.2.2 点云地图

点云作为高精特色的采集资料，与传统的照片资料相比，能够最大精度的还原真实世界的三维位置信息。为了实现真实世界的高度精细化描述，Web海量点云加载和渲染在我们日常工作中是非常重要的内容。

点云渲染的最大问题是海量数据实时加载和动态拾取，eagle.gl实现了基于全球ECEF统一坐标索引下点云实时从网络加载，能够实现支持内存中同时800w以上海量点云LOD实时加载以及根据反射率/高度/MIX混合着色能力，渲染帧率可以保持在60fps，通过GpuPicker和Raycast混合拾取方案实现数据拾取交互的实时性。

Figure.3.2.2.1 基于LOD点云的实时吸附编辑能力

3.3 交互和扩展能力

对于地图数据生产，数据可视化展示是第一步，如何在数据可视化展示的基础上进行上层复杂的GIS编辑能力建设是业务增值的重要一环。

3.3.1 交互能力

为了满足高精产线复杂的数据编辑诉求，拾取是编辑最底层的能力, 融合射线拾取与GPU拾取，能精准满足对海量数据20ms以内的快速拾取能力。

Figure.3.3.1.1 海量数据拾取能力

数据裁剪能力：立交场景下，数据间的互相遮挡会对数据分析产生一定的影响，我们默认提供了数据裁剪能力以满足复杂场景的数据编辑&分析需求。

Figure.3.3.1.2 数据实时裁剪

3.3.2 插件体系

引擎支持插件开发，用户可以根据自己的需求定制插件，目前我们提供了测距、编辑和框选三个插件供大家参考。同时，引擎还支持图层和控制器的定制化开发，满足多样的业务场景。

Figure.3.3.2.1 测距插件体系

3.4 其他能力 - 视觉&动效

3.4.1 飞行

平滑的飞行效果和基于滤镜的背景换肤能力。

Figure.3.4.1.1 平滑的飞行效果/背景换肤

3.4.2 光影

模拟一天中的时间，实现光照阴影能力。

Figure.3.4.2.1 光照阴影

3.4.3 后处理

深度定制扩展threejs，实现扩展的后处理渲染管线，并且抽象出通用三方后处理基础库，该库增加了引擎的后处理能力，用于提升可视化效果，为未来大屏项目做准备。

Figure.3.4.3.1 后处理

3.4.4 3D地球

23D一体化，支持墨卡托投影和球投影的自由切换，增强可视化效果。

Figure.3.4.4.1 2/3D一体化球展示

4. 总结规划

目前，eagle.gl引擎广泛应用到了高德高精团队的数据生产、数据分析和新基建项目能力建设当中。后续随着引擎的能力完备，一方面立足于高精业务实现面向自动驾驶的仿真平台搭建；另一方面通过真实世界数字化的刻画，实现多源异构数据（DEM/BIM/倾斜摄影等行业相关）融合渲染，最终达到数字孪生能力。

以上的事情要最终实现任重道远，欢迎联系加入我们共同构建一个数字世界。欢迎对通用平台前端、在线编辑IDE、3D可视化方向感兴趣的小伙伴加入我们，一起做一些有意义的事情。投递简历到 gdtech@alibaba-inc,com, 邮件主题为: 姓名-技术方向-来自高德技术, 欢迎自荐或推荐。