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