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我們主要分爲以下幾個類型：

舉個例子，我們用模型樣式類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混合拾取方案實現數據拾取交互的實時性。