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

1. 前言

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

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

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

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

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, 邮件主题为: 姓名-技术方向-来自高德技术, 欢迎自荐或推荐。