基于WebGL的二維三維融合態勢可視化設計及關鍵技術研究

陳昊 趙斐

（北京跟蹤與通信技術研究所，北京 100094）

1 引言

未來戰爭已經朝著信息化方向不斷推進，如何獲取信息優勢已經成為制勝關鍵。各國大力發展的天基、空基、陸基、海上及水下態勢感知技術空前發展，各類偵察、探測、遙感技術獲取海量戰場信息，形成了察覺戰場態勢的基礎，但如何對海量戰場信息進行處理、分析，準確進行態勢估計和預測，為作戰指揮決策和執行提供支持，成為亟待解決的問題。戰場態勢可視化是可視化技術的重要應用，通過對作戰對象的幾何特征和拓撲關系的展現，復雜戰場信息數據易于理解，以直觀方式展示大量戰場信息分析的結果。

2 態勢可視化技術發展現狀

戰場態勢可視化得到了軍事大國的重視，已被廣泛用于作戰態勢指揮顯示、聯合作戰任務規劃、數字戰例分析、作戰模擬推演、協同對抗模式演練等領域。

2.1 國外態勢可視化發展歷程

20世紀90年代中期，美軍便提出了虛擬戰場可視化。近年來，美國海軍研究所和美國海運聯合體聯合資助的Dragon戰場態勢可視化系統[1]，以三維顯示的方式來展現戰場空間，通過移動終端設備獲取戰場各個軍隊作戰信息，加強了對戰場信息的查詢分析能力以及戰場態勢顯示能力。

2.2 國內態勢可視化現狀及存在的問題

國內的可視化系統主要包括信息工程大學的二三維顯示系統[2]，北京航空航天大學基于GIS的虛擬二三維戰場態勢。這些系統各有特點，一定程度上滿足了對作戰模擬系統二三維顯示的要求，部分系統充分考慮系統的分布式和通用性，采用基于HLA的模擬仿真標準框架。但隨著態勢可視化系統的發展，已有系統暴露出缺陷：一是系統對平臺高度依賴，導致信息態勢共享、協同性低。二是系統二三維度的聯動和融合程度不高，難以在統一界面實現多層次不同維度的靈活切換。

鑒于當前國內態勢可視化系統存在的不足，本文設計了基于WebGL的二維三維融合戰場態勢可視化系統，提出了多源數據的統一管理、二三維軍標一體化表達、基于WebGL的顯示引擎技術，實現了多種態勢信息綜合顯示和戰場態勢空間分析功能。

3 基于WebGL的二維三維融合態勢可視化設計

3.1 設計思路

隨著網絡技術的發展，戰場態勢可視化系統通過C/S架構轉向Web應用，從而具備跨平臺、可移植特性，實現態勢信息的高效協同共享。在可視化技術選擇上，基于HTML5以及WebGL的顯示技術組合，以插件、硬件加速的方式，為逼真的態勢顯示、豐富的人機交互提供更好的體驗，本文以WebGL技術為基礎，為態勢的可視化提供更好的技術支撐。

3.2 系統架構

本文設計的基于WebGL的二三維態勢融合可視化系統框架自底向上分為三個層次：數據層、業務層和表現層。數據層對多源數據一體化封裝，為態勢融合應用提供統一的數據支撐；業務層是二三維一體化態勢融合展示的核心，是整個系統的服務器端，對底層數據進行組織管理，為客戶端提供高效的數據服務和業務處理，為二三維一體化服務提供支撐；表現層由基于WebGL的二三維一體化顯示引擎和多個功能模塊組成，放置在Web端，負責數據的調度與訪問、二三維場景加載與交互，并提供二三維態勢融合顯示、態勢交互、態勢空間分析及人工標繪的人機接口。基于WebGL的二三維融合態勢可視化系統架構如圖1所示。

圖1 基于WebGL的二三維融合態勢可視化系統架構

4 基于WebGL的二維三維融合態勢可視化關鍵技術研究

4.1 多源數據的統一管理技術

隨著作戰力量的多元化發展，戰場數據來源也是多樣化和異構的，因此，必須對原始的態勢數據和環境數據進行格式轉換和處理，生成統一的面向Web的輕量級數據格式。本文選擇一種通用數據格式，將多源、異構的數據轉換成標準數據格式，并兼顧數據在瀏覽器上的可視化效率。針對二維態勢數據，提供OGC標準的數據接口；針對三維模型數據，選用glTF標準數據格式[3]。glTF參照JSON表達方式，基于JavaScript對象表示法進行定義，是面向WebGL、OpenGL ES以及OpenGL接口的傳輸格式，為Web3D 資源提供一種輕便、可重復使用的共存標準，以及統一的資源存儲庫和檔案庫。glTF數據模型不但能夠表示復雜的數據類型和空間關系，還可以在Web上高效傳輸和解析，通過WebGL顯卡能夠直接加載該數據結構。

4.2 二三維軍標一體化表達技術

二維軍標技術可以通過GDI（Graphics Device Interface，圖形設備接口）實時生成，并保存在二維軍標庫。標繪時直接在二維地圖上進行人工標繪和編輯。基于態勢三維可視化需求，三維軍標的創建和標繪技術應加以研究并更好地實現。本文提出一種一體化表達技術，可實現二三維軍標的一體化創建和標繪。針對規則軍標和不規則軍標，直接通過二維軍標快速實時生成對應的三維軍標，同時在態勢標繪時，解決二三維軍標的一體化可視化；通過計算，降低三維軍標生成的難度，并建立部分二三維軍標間的對應聯系。

由基本的圖元（點、線等）構成的規則軍標，在三維場景中的三維效果通常不會隨著地形等因素改變，生成與標繪三維軍標的具體過程相對簡單。先對GDI實時生成的二維軍標圖像進行斜面與浮雕算法處理，生成具有三維軍標效果的圖像，存儲在三維軍標庫中。斜面與浮雕算法是通過模擬光源產生的三維效果而對圖像進行亮度變化處理的一種圖像處理方法。在進行態勢標繪時，采用公告板（billboard）技術實現三維規則軍標在三維場景的標繪，即在三維態勢場景中，選定特定的空間位置和方向，放置一個公告板，這個公告板是一個共面四邊形，將上述三維軍標以紋理的形式貼附到四邊形上，使得該三維標繪始終面向觀察點的位置，給用戶一致的視覺顯示。

基于線狀和面狀的不規則軍標，通過在二維軍標上增加一個高程維度，使之成為三維圖形。具體實現采用面三角剖分算法生成三維動態軍標的形狀底面，再對生成的平面軍標添加高程以生成三維動態軍標，最后利用WebGL在三維場景中進行標繪。在使用三維不規則軍標進行態勢標繪時，要考慮軍標與地形的關系。例如，在跨越一片山脈的區域標繪一個雙線箭標，軍標也隨著地形起伏，這需要根據軍標和地形的關系對軍標的高程信息進行控制，從而形成軍標浮于地形表面、隨地形起伏的效果。

4.3 基于WebGL的顯示引擎技術

本文設計了一個基于WebGL和HTML5協同的Web端可視化框架，采取異步資源獲取的方式，實現跨平臺顯示的需求，提升系統的平臺適應性和靈活性，具備實現更多二維三維應用的擴展潛力。

（1）基于WebGL的Web端可視化框架

基于WebGL的Web端可視化框架如圖2所示，主要包含幾個模塊，實現對二三維態勢融合顯示、空間分析和人機交互等應用的支持。

高速資源加載模塊：采用AJAX技術實現異步資源加載，極大地縮小資源的加載容量。在服務器端訪問數據庫后，計算頂點信息，將其轉換為glTF格式。

通用處理模塊：通用處理提供系統調試、分析和跨瀏覽器運行的實用程序，包括瀏覽器兼容性和用戶行為等常規檢測，為系統各應用模塊在瀏覽器端執行提供數學庫輔助，如提供向量和矩陣執行運算等支持。

用戶界面：對瀏覽器端可能的事件和事件處理封裝，提供良好的I/O和人工交互接口，嵌入了GUI組件提供無縫切換的用戶界面。

圖2 基于WebGL的跨平臺Web端可視化框架

（2）WebGL可視化渲染過程

WebGL是Web端可視化框架的核心[4]，基于OpenGL ES 2.0，提供3D圖形的API，能夠搭建在基于瀏覽引擎的環境上，代碼作用于HTML5的元素，依靠瀏覽器解析，實現圖像繪制并渲染。WebGL可視化渲染過程如圖3所示。

圖3 WebGL二三維圖形繪制流程

數據預處理：對各種數據進行簡單處理，包括對幾何模型進行格式轉換，將模型轉換為圖形庫所能接受的原始圖元格式；對圖片以及視頻等進行預處理。

參數設置：二三維場景數據在發送到渲染模塊完成渲染前，對場景進行簡單設置，包括物體紋理特性、攝像機位置、視點方向、光照屬性等。

紋理映射：指定義和應用紋理的方式，為了使二三維場景更具真實感，給模型進行貼圖。

模型構造：通過二三維API接口提供的相關函數方法，將物體模型構建成對應的幾何模型。

投影變換：將圖形從三維轉換為二維表示，用投影的方法降低三維圖形的維數。

視口變換：視口在屏幕上是一個矩形區域。由于計算機顯示屏是二維顯示的，所以需要視口變換，將處在三維坐標系的物體轉換為適用于二維顯示的坐標系中，方便用戶通過顯示屏將物體顯示出來。

5 試驗驗證

5.1 系統軟件環境搭建

基于本文提出的建模方法，在Windows+Apache+MySQL+PHP環境下，應用HTML5+WebGL技術對試驗系統進行研發，并利用實測數據進行應用驗證。由于WebGL只包含底層函數，直接使用WebGL進行開發過于繁瑣，因此采用基于WebGL的地圖引擎Cesium實現戰場環境和戰場態勢可視化。Cesium是一個基于JavaScript編寫的使用WebGL的地圖引擎的開源框架[5]，支持3D、2.5D、2D形式的地圖展示，可以自行繪制圖形，高亮區域，提供良好的觸摸支持，且支持絕大多數的瀏覽器和移動端框架。

5.2 二三維戰場環境可視化

戰場環境通常用二維地圖或三維地形場景來表達，二三維戰場環境可視化基于WebGL實現二維地圖可視化和三維地形場景可視化。Cesium提供了多種ImageryProvider用于實現二維地圖的加載，可以用WebMapServiceImageryProvider和WebMapTileServiceImageryProvider兩個類實現WMS地圖和WMTS地圖的加載。在Cesium中，地形和影像的處理不同，默認是影像覆蓋在地形上，任何影像的provider都可以在任何地形的provider上使用。使用CesiumTerrainProvider類實現地形數據的加載，也可模擬光照、積雪、水流等真實環境。實現二三維戰場環境可視化效果如圖4所示。

（1）二三維戰場態勢可視化

二三維戰場態勢可視化通過軍標符號來實時表達戰場的二三維態勢，也就是說二維態勢用二維軍標來表達，三維態勢用三維軍標來表達。

Cesium提供Entity API來繪制空間數據，例如點、標記、標簽、線、3D模型、形狀。Cesium提供兩類API：一是面向圖形開發人員的底層API，即“Primitive API”。二是高級別的數據驅動API，即“Entity API”。該API使用一致性設計的、高級別的對象管理一組相關性的可視化對象，其底層使用Primitive API。繪制不同類型的三維軍標符號可用viewer.entities.add（）來實現。實現的二三維態勢如圖5所示。

圖4 二三維戰場態勢可視化效果

圖5 二三維態勢可視化

（2）二三維態勢空間分析

二三維態勢空間分析實現剖面分析、通視分析、緩沖區分析等功能。在三維地形上繪制一條進行剖面分析的線路，繪制完成自動彈出默認采樣間距的分析剖面示意圖。舉例說明剖面分析的實現流程：

①實現鼠標點擊操作兩次，記錄獲取到的兩點坐標，確定要進行剖面分析的線段。通過viewer.scene.pickPosition（click.position），獲取坐標。②對獲取的線段做插值，取樣獲取線段上100個點的坐標。③將取樣點坐標存入數組array[]后，遍歷取出數組中各點坐標，根據當前點經緯度坐標求得3DTilset在該坐標下的點位高度。④根據獲取的X、Y、Z三個坐標繪制剖面圖。剖面分析示意圖如圖6所示。

圖6 X、Y、Z三個坐標繪制剖面圖

6 結論

現代戰爭正朝著陸、海、空、天、電全維聯合，信息化方向快速發展，戰場態勢空前復雜。態勢可視化技術將復雜的戰場態勢以直觀方式予以呈現，為戰場態勢感知與作戰指揮提供支持，是未來聯合作戰的重要一環。本文論述了當前國內外戰場態勢可視化相關技術和系統的發展現狀，剖析當前存在的問題，提出了一種基于WebGL的二維三維融合態勢可視化技術，以提升戰場態勢可視化系統的平臺適應性和二三維視覺間的聯動性，并構建原型系統進行驗證和測試。