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, 郵件主題為: 姓名-技術方向-來自高德技術, 歡迎自薦或推薦。