王 昊

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

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

0 引言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2.1.2 Threejs 加載三維模型

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

2.1.3 三維場(chǎng)景渲染

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

圖1 三維場(chǎng)景渲染流程

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

2.1.4 人機(jī)交互

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

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

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

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

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

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

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

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

圖3 硬件孿生可視化界面

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

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

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

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

4 結(jié)語

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