王 昊

（中國船舶集團第七一五研究所，浙江 杭州 310000）

關(guān)鍵字：數(shù)字孿生；Web3D；Threejs；力導向圖

0 引言

水聲應(yīng)用是利用水下聲波經(jīng)信號處理對水下目標進行探測、定位及通信的算法應(yīng)用。水聲信息處理平臺是水聲應(yīng)用運行的基礎(chǔ)平臺，主要為水聲應(yīng)用算法提供計算、存儲、網(wǎng)絡(luò)等資源，以保障其正常運行。因此，平臺的健康狀態(tài)尤為重要。目前，傳統(tǒng)水聲信息平臺監(jiān)測系統(tǒng)的監(jiān)測對象多為硬件平臺，當算法應(yīng)用發(fā)生故障，往往難以查找故障位置。此外，硬件監(jiān)測平臺多以二維圖片展示為主，監(jiān)測數(shù)據(jù)不直觀，且界面形式不友好。隨著數(shù)字孿生技術(shù)的發(fā)展，可實現(xiàn)更直觀的方式，對水聲信息處理平臺進行可視化監(jiān)控。本文結(jié)合水聲信息處理平臺可視化需求，融合Web3D 及D3js 技術(shù)，實現(xiàn)平臺的硬件及軟件的孿生狀態(tài)監(jiān)控，為水聲應(yīng)用的監(jiān)測、預警及故障排除等提供有力的支撐。

1 數(shù)字孿生及監(jiān)測系統(tǒng)可視化

數(shù)字孿生（Digital twin）一詞最早出現(xiàn)在美國空軍實驗室于2009 年提出的“機身數(shù)字孿生體”概念中[1]。數(shù)字孿生是以真實存在或即將設(shè)計實現(xiàn)的物理實體為原型，通過感知、仿真、數(shù)據(jù)驅(qū)動來構(gòu)建一個虛擬的數(shù)字孿生體，來達到對物理實體的實時監(jiān)測、動態(tài)控制乃至故障預測與健康管理的一種新興技術(shù)[2]。

1.1 硬件孿生及Web3D 技術(shù)

Web3D 技術(shù)是硬件設(shè)備在Web 端進行孿生可視化的技術(shù)手段。OpenGL 是一個定義了跨編程語言、跨平臺（Windows、Linux、Mac OS）計算機圖形繪制的編程接口的標準，在實際中得到了廣泛的應(yīng)用[3]。

前端人員開發(fā)主要使用的是JavaScript 語言。WebGL 通過增加OpenGL ES 的JavaScript 綁定，通過JS 語句操作本地OpenGL 接口實現(xiàn)對頁面圖形的渲染。WebGL 原生API 是一種非常低級的接口，使用之前還需要掌握像坐標變換、圖形學等相關(guān)技術(shù)，無疑增加了開發(fā)者的難度。Threejs 技術(shù)把常用的WebGL 方法封裝起來，簡化了開發(fā)者學習和使用的成本。本文選用Threejs 技術(shù)實現(xiàn)Web 端的3D 渲染。

1.2 應(yīng)用孿生及D3js 技術(shù)

水聲應(yīng)用通常融合若干信息處理算法程序，綜合完成對目標的識別。對算法程序在設(shè)計、實現(xiàn)、測試過程中可能出現(xiàn)的問題，開發(fā)者往往需要從程序起始位置，按流程單步調(diào)試查找問題。傳統(tǒng)的開發(fā)方法面對不同水聲場景任務(wù)需求時，往往需要重新設(shè)計程序，代碼的復用率較低，同時也降低了開發(fā)效率。本文將常用的水聲應(yīng)用根據(jù)各自獨立性進行組件化，結(jié)合D3js 技術(shù)中的力導向圖技術(shù)，繪制不同水聲應(yīng)用組件化拓撲關(guān)系，實現(xiàn)應(yīng)用層面的孿生監(jiān)控。

水聲應(yīng)用在組件化的同時，使得組件間拓撲關(guān)系復雜度提升。D3js 中的力導向圖技術(shù)模擬自然界中電子間相互作用原理，計算每個節(jié)點合力從而計算移動節(jié)點位置，使復雜拓撲關(guān)系的應(yīng)用孿生成為可能[4]。

2 系統(tǒng)軟件設(shè)計

水聲信息處理平臺的硬件和軟件孿生軟件均采用瀏覽器/服務(wù)器（Browser/Server，B/S）架構(gòu)。前端編程語言采用JavaScript，框架主要采用Vue框架，結(jié)合ElementUI 插件完成前端布局，信息處理設(shè)備的3D 渲染通過Threejs 完成，應(yīng)用組件化拓撲展示通過D3js 的力導向圖完成。后端編程采用Java 語言完成，框架采用Spring 框架。

2.1 硬件孿生軟件設(shè)計

信息處理設(shè)備3D 模型的可視化是硬件孿生軟件設(shè)計的重要設(shè)計過程。其可視化主要分為以下4個步驟。

2.1.1 信息處理設(shè)備三維模型構(gòu)建

三維模型的構(gòu)建主要有人工建模和自動建模兩種方式。本文采用的是人工建模方式。在設(shè)備設(shè)計前期，已通過Solidworks 軟件完成基本尺寸、碰撞干涉及應(yīng)力估計等設(shè)計，可生成stl 文件供后續(xù)Threejs 加載模型。

2.1.2 Threejs 加載三維模型

Threejs 提供了可以加載復雜三維模型的Loader 插件，支持常見的3D 建模工具生成文件的模型加載。對比Threejs 支持的3 種常見三維模型文件（stl、obj 及gltf），其中stl 和obj 的文件大小超過300 MB 時，Loader 加載器解析加載的時間會加長，而且每次模型渲染時會導致前端界面出現(xiàn)卡頓的情況。因此本文選用的文件格式是gltf。信息處理設(shè)備三維模型構(gòu)建中建模得到的是stl 文件，需借助blander 軟件轉(zhuǎn)換成gltf 文件[5]。

2.1.3 三維場景渲染

三維場景渲染主要模擬真實環(huán)境，將前兩步中創(chuàng)建的設(shè)備3D 模型在屏幕渲染繪制。流程如圖1所示。

圖1 三維場景渲染流程

構(gòu)建三維場景，場景決定了觀察者可以看到哪些實體。設(shè)定渲染器類型，本文采用的是WebGLRenderer 渲染器。創(chuàng)建渲染器后，還需要設(shè)置渲染器的像素比、陰影模式以及渲染器的大小等相關(guān)因素。設(shè)置相機，相機決定了觀察者的觀察角度及可看到的物體范圍。Threejs 技術(shù)提供了正交相機和透視相機兩類相機。正交相機視角下，設(shè)備模型不會因為觀察者遠近距離不同發(fā)生大小變化。為了更接近實際情況，本文選用透視相機設(shè)定觀察者角度，并添加到場景中。對于光照設(shè)定，為模擬真實環(huán)境，本文設(shè)置了環(huán)境光AmbientLight，并在設(shè)備上下左右前后6 個方位各設(shè)置了1 個點光源PointLight。創(chuàng)建GLTFLoader 加載器，加載創(chuàng)建好的設(shè)備3D 模型文件，獲取模型后，遍歷模型的各個零件，通過MeshLambertMaterial設(shè)置模型材質(zhì)信息，設(shè)置模型初始位置wrapper.position.set（0，0，0）；程序執(zhí)行renderer.render（scene，camera）完成一次場景渲染。

2.1.4 人機交互

完成以上3 步，可以看作是一幀數(shù)據(jù)渲染，此時渲染出來的場景就等同于二維靜態(tài)圖形，不具備動畫功能，無法改變觀察者角度實現(xiàn)對設(shè)備的360°觀察。Threejs 封裝了軌道控制器對象OrbitControls，將相機對象Camera 作為參數(shù)，可以監(jiān)聽鼠標的變化，改變相機對象的屬性，達到改變觀察角度的目的。

2.2 應(yīng)用孿生軟件設(shè)計

應(yīng)用組件化后的組件拓撲關(guān)系尤為重要。本文采用D3js 中的力導向圖技術(shù)。應(yīng)用孿生可視化的開發(fā)過程大致可以分為以下4 個步驟，如圖2所示。

圖2 應(yīng)用孿生可視化開發(fā)流程

首先是網(wǎng)狀數(shù)據(jù)結(jié)構(gòu)定義，力導向圖中最重要的元素就是節(jié)點和節(jié)點之間的關(guān)系。定義對象dataset={nodes：[]，edges：[]}，其中有兩個數(shù)組元素，nodes 代表應(yīng)用組件化后所有組件信息，edges 代表組件間的連接關(guān)系。兩個數(shù)組元素的內(nèi)容都可以額外的對象用來描述組件或關(guān)系的詳細信息。定義力的模擬環(huán)節(jié)需要設(shè)定多體力d3.forceManyBody、連接力d3.forceLjink 以及中心力d3.forceCenter，算法程序會根據(jù)合力，推擠比自己弱的節(jié)點和連線，最終達到平衡狀態(tài)。定義可見元素，包含節(jié)點、節(jié)點說明及節(jié)點間的有向線段。力模擬會隨時間變化需要設(shè)計時間步tick，力的模擬會隨時間變化，D3js 根據(jù)力的變化隨時調(diào)整節(jié)點和連線位置。時間步tick 的設(shè)定，要保證節(jié)點和連線盡可能均勻地分布在屏幕中，節(jié)點最終的位置不一定是觀察者想要的拓撲結(jié)構(gòu)，本文自定義拖拽函數(shù)dragStarted、dragging 及dragEnded 用來監(jiān)聽節(jié)點位置變化，最終實現(xiàn)用戶自定義位置的應(yīng)用組件化拓撲結(jié)構(gòu)狀態(tài)監(jiān)控。

3 監(jiān)測效果展示

3.1 硬件孿生狀態(tài)監(jiān)控效果展示

信息處理裝備3D 模型建立完成后，加載到Threejs 場景中，即可顯示信息處理裝備孿生狀態(tài)。如圖3 所示，圖片中部展示的是水聲信息處理設(shè)備。鼠標左鍵可控制模型旋轉(zhuǎn)，右鍵可控制模型拖曳，滾輪可進行縮放；左上角區(qū)域展示的是硬件孿生狀態(tài)監(jiān)控的設(shè)備列表，點擊對應(yīng)的設(shè)備可查看選中設(shè)備的運行狀況；左側(cè)中部展示的是硬件的真實圖片和尺寸等基本信息，左側(cè)下部展示的是當前設(shè)備的系統(tǒng)故障日志，右側(cè)展示的是當前設(shè)備關(guān)鍵參數(shù)的運行狀態(tài)。

圖3 硬件孿生可視化界面

3.2 應(yīng)用孿生狀態(tài)監(jiān)控效果展示

在硬件孿生狀態(tài)監(jiān)控軟件中，設(shè)備列表可選擇運行在物理機上的應(yīng)用，點擊要查看的應(yīng)用狀態(tài)。如圖4 所示。

圖4 中部展示的是當前應(yīng)用的拓撲關(guān)系，連線動畫代表組件信息傳遞方向。點擊拓撲關(guān)系單個組件，可以查看當前組件關(guān)鍵參數(shù)運行狀態(tài)；圖片左側(cè)代表的是單個組件的線程運行列表，主要包含線程運行時間和運行次數(shù)；圖片右側(cè)展示的是當前組件發(fā)送、接收信息狀態(tài)監(jiān)控。

圖4 應(yīng)用孿生可視化界面

4 結(jié)語

本文分析了當前信息處理裝備可視化發(fā)展現(xiàn)狀，結(jié)合項目需求，實現(xiàn)了水聲信息處理平臺可視化研究與應(yīng)用。通過分析當前Web3D 技術(shù)發(fā)展趨勢及當前主流技術(shù)優(yōu)劣，選擇Threejs 技術(shù)實現(xiàn)設(shè)備的硬件孿生可視化，通過D3js 技術(shù)的力導向圖實現(xiàn)了應(yīng)用孿生狀態(tài)監(jiān)控，綜合完成了水聲信息處理平臺監(jiān)測系統(tǒng)從硬件層到應(yīng)用層數(shù)字孿生狀態(tài)監(jiān)控。此外，該系統(tǒng)還實現(xiàn)了對水聲應(yīng)用故障的監(jiān)測功能，對今后水聲設(shè)備領(lǐng)域的數(shù)字孿生有一定借鑒意義。