寧 靜,卜樂平, 馮 源

(海軍工程大學(xué) 電氣工程學(xué)院，武漢 430033)

?

基于WebGL的艦船模擬訓(xùn)練虛擬三維技術(shù)應(yīng)用

寧 靜,卜樂平, 馮 源

(海軍工程大學(xué) 電氣工程學(xué)院，武漢 430033)

由于目前國內(nèi)的艦船模擬訓(xùn)練系統(tǒng)大多均為岸基模擬器，和半實(shí)物半仿真的應(yīng)用模式，受制于該傳統(tǒng)方式下系統(tǒng)通用性、可擴(kuò)展性差，成本高等局限性；提出一種基于WebGL的艦船模擬訓(xùn)練虛擬三維環(huán)境，采用其應(yīng)用框架Three.js圖形引擎庫在網(wǎng)頁中繪制3D虛擬交互界面，可直接通過瀏覽器登錄系統(tǒng)，從而給出了可跨平臺(tái)免插件高效的艦船模擬訓(xùn)練界面；結(jié)果表明該方法在人機(jī)交互界面的友好性、監(jiān)控的直觀性、訓(xùn)練操作的便捷性、較強(qiáng)的沉浸性等方面具有優(yōu)勢(shì)，亦可推廣應(yīng)用于其他模擬訓(xùn)練領(lǐng)域。

WebGL; 模擬訓(xùn)練；虛擬三維；Three.js

0 引言

目前國內(nèi)的艦船模擬訓(xùn)練系統(tǒng)大多均為岸基模擬器，由于船員經(jīng)常出海，去訓(xùn)練基地參加訓(xùn)練班、進(jìn)修班等培訓(xùn)比較困難等因素的制約[1]，艦載模擬訓(xùn)練系統(tǒng)(OBTS：On-Board Training System)應(yīng)運(yùn)而生，船員在閑暇時(shí)間就可以在艦船上進(jìn)行訓(xùn)練操作，節(jié)省了訓(xùn)練時(shí)間和大量經(jīng)費(fèi)[2]。由于訓(xùn)練過程中涉及操控設(shè)備種類多，不同型號(hào)的艦船設(shè)備型號(hào)各異，操縱平臺(tái)形式多樣，采用半實(shí)物仿真培訓(xùn)成本高，占地面積大，在艦船上很難實(shí)現(xiàn)。隨著計(jì)算機(jī)技術(shù)水平的發(fā)展，成本低、真實(shí)感強(qiáng)的艦船虛擬模擬訓(xùn)練系統(tǒng)已成為發(fā)展趨勢(shì)。

虛擬模擬訓(xùn)練系統(tǒng)一般將訓(xùn)練模型裝在一臺(tái)主機(jī)中，通過網(wǎng)絡(luò)與各訓(xùn)練客戶端相連，受訓(xùn)人員可多人同時(shí)在客戶端上進(jìn)行訓(xùn)練。近幾年，隨著互聯(lián)網(wǎng)的發(fā)展，越來越傾向于基于B/S(Browser/Server)架構(gòu)的Web應(yīng)用服務(wù)，因此，原有傳統(tǒng)的C/S體系架構(gòu)下的單機(jī)版二維人機(jī)交互模式，由于其不可跨平臺(tái)，友好性等不足，如何使其能在瀏覽器端與設(shè)備的三維模型直接進(jìn)行交互成為了目前的需求。尤其是WebGL標(biāo)準(zhǔn)的提出，將瀏覽器和GPU緊密的關(guān)聯(lián)在一起，使得在Web上呈現(xiàn)三維圖形成為了可能，使模擬訓(xùn)練系統(tǒng)有了新的應(yīng)用模式[3]。應(yīng)用過程中需要將設(shè)備的三維模型與操作界面的二維圖形相疊加，結(jié)合形成一個(gè)友好的界面，然而，目前國內(nèi)現(xiàn)有的基于WebGL在艦船模擬訓(xùn)練的研究還比較少見，還是一個(gè)新的嘗試。

本文基于WebGL的Three.js三維渲染引擎技術(shù)，在船舶虛擬三維技術(shù)方面作出了一些探討研究，并在艦船虛擬三維呈現(xiàn)軟件中進(jìn)行了初步應(yīng)用，避免了以往Web3D應(yīng)用中，插件/專有客戶端軟件安裝所帶來的安全及用戶體驗(yàn)差的問題，可直接通過瀏覽器訪問，在人機(jī)交互界面的友好性、監(jiān)控的直觀性、訓(xùn)練操作的便捷性、較強(qiáng)的沉浸性等方面具有優(yōu)勢(shì)。

1 WebGL及Three.js

WebGL是一項(xiàng)基于瀏覽器(而不是基于操作系統(tǒng))的，用以在瀏覽器中繪制、顯示三維計(jì)算機(jī)圖形，可以在多種平臺(tái)上運(yùn)行，并與之交互的技術(shù)。2009年8月由Khronos提出的一種3D繪圖標(biāo)準(zhǔn),這種繪圖技術(shù)標(biāo)準(zhǔn)結(jié)合了HTML5和JavaScript，通過為OpenGL ES 2.0增加一個(gè)JavaScript綁定，將JavaScript和OpenGL ES 2.0結(jié)合在一起，從而為HTML5中Canvas提供了硬件3D加速渲染[4]。WebGL程序的基本渲染過程如圖1[5]。

圖1 WebGL基本渲染過程

WebGL原生API是一種十分低等級(jí)的接口，直接來寫3D程序不僅開發(fā)難度大，并且需要對(duì)OpenGL、三維設(shè)計(jì)以及WebGL的原生API非常了解，從而導(dǎo)致開發(fā)效率低下，因此需要將常用的底層模塊進(jìn)行隱藏封裝，從而使用戶在無需了解底層細(xì)節(jié)的情況下，快速開發(fā)Web交互式三維圖形應(yīng)用。目前，已經(jīng)有不少WebGL框架開發(fā)出來：Three.js、PhiloGL、Babylon.js、O3D等，這些引擎庫能夠讓用戶更為方便地進(jìn)行3D圖形繪制和動(dòng)畫的制作。本文選用Three.js實(shí)現(xiàn)，它源自GitHub的一個(gè)開源項(xiàng)目，發(fā)展相當(dāng)迅速，現(xiàn)在已經(jīng)發(fā)展到r73版了，是一個(gè)輕量級(jí)的用于在瀏覽器中創(chuàng)建3D計(jì)算機(jī)圖形圖像應(yīng)用程序的JavaScript庫，也是目前應(yīng)用最廣泛的WebGL框架[6]。

所有WebGL 框架在使用時(shí)都需先定義三維世界中所包含的基本元素[7]，Three.js庫中包括了場景、相機(jī)、模型加載器、著色器、材質(zhì)、燈光、動(dòng)畫、粒子、物理工具等，其中，場景(scene)、對(duì)象(object3D)、相機(jī)(camera)、渲染器(render)是基礎(chǔ)。有了這些東西，才能將物體渲染到網(wǎng)頁中去。Three.js的繪圖流程如圖2所示。

圖2 Three.js基本繪圖流程

場景是所有物體的容器，如果要顯示一個(gè)物體，就需要將對(duì)象加入場景中。在Three.js中場景只有一種，用THREE.Scene來表示，代碼如下：

var scene = new THREE.Scene();

相機(jī)決定了場景中哪個(gè)角度的景色會(huì)顯示出來。相機(jī)就像人的眼睛一樣，人站在不同位置，抬頭或者低頭都能夠看到不同的景色。與場景不同的是，相機(jī)有很多種。和現(xiàn)實(shí)中一樣，不同的相機(jī)確定了呈相的各個(gè)方面，設(shè)置不同的相機(jī)參數(shù)，就能夠讓相機(jī)產(chǎn)生不一樣的效果。在Three.js中有多種相機(jī)，本文使用的是透視相機(jī)(THREE.PerspectiveCamera)。渲染器決定了渲染的結(jié)果應(yīng)該畫在頁面的什么元素上面，并且以怎樣的方式來繪制。渲染器renderer的domElement元素，表示渲染器中的畫布，所有的渲染都是畫在domElement上的，appendChild表示將這個(gè)domElement掛接在body下面，這樣渲染的結(jié)果就能夠在頁面中顯示了。渲染應(yīng)該使用渲染器，結(jié)合相機(jī)和場景來得到結(jié)果畫面[8]。

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

虛擬三維模擬訓(xùn)練系統(tǒng)總體上分為前端三維場景、二維界面，和后臺(tái)電力系統(tǒng)仿真，以及中間的數(shù)據(jù)交互，如圖3所示。其中圖像交互界面是交互接口的重要組成部分，本文基于WebGL的艦船虛擬三維技術(shù)，采用Three.js引擎，重點(diǎn)研究系統(tǒng)前端人機(jī)交互界面。系統(tǒng)架構(gòu)采用B/S模式，使用戶端不需要安裝任何應(yīng)用程序，只要打開瀏覽器即可登錄系統(tǒng)進(jìn)行相應(yīng)操作。

將處方量的枸櫞酸莫沙必利原料藥、助漂劑、黏合劑、泡騰劑混合均勻，過80目篩；將上述軟材擠出、滾圓制備丸芯，干燥后過篩，收集20～50目之間的丸芯，進(jìn)行包衣，即得。

目前交互界面主要可分為二維和三維。前臺(tái)二維，三維界面主要向受訓(xùn)者提供直觀的訓(xùn)練界面和演示平臺(tái)，用戶的所有操作基本在上面完成，所以該界面一是要滿足受訓(xùn)者的訓(xùn)練需求，這也是人機(jī)交互界面的最基本的要求；二是要求界面能和人的思維模式相一致性；三是要求界面易用性。

圖3 系統(tǒng)體系結(jié)構(gòu)

艦船三維模型界面逼真的再現(xiàn)了整個(gè)船體的空間結(jié)構(gòu)，鼠標(biāo)拾取可通過拖拽來旋轉(zhuǎn)船體，鼠標(biāo)滑輪則可以根據(jù)用戶需求放大或縮小船體，通過漫游和后臺(tái)數(shù)據(jù)交互，將電力系統(tǒng)所涉及到的參數(shù)在二維版面真實(shí)的顯示出來。二維界面主要包括設(shè)備參數(shù)欄，控制設(shè)置欄，三維界面顯示窗，性能監(jiān)視器，小地圖。

3 系統(tǒng)實(shí)現(xiàn)

3.1 基本環(huán)境的設(shè)置與搭建

為確保瀏覽器能夠正確運(yùn)行WebGL程序，首先需要對(duì)瀏覽器進(jìn)行設(shè)置，以開啟對(duì)WebGL的支持，本文使用Firefox瀏覽器，如圖4所示。雙擊將webgl.force-enabled的值設(shè)置為true，將webgl.disabled的值設(shè)置為false。

在渲染器的設(shè)置中，本文選取Three.js中渲染效果較好的WebGLRenderer；Three.js中為用戶提供了正交相機(jī)和透視相機(jī)這兩種相機(jī)類型，本文采用透視相機(jī)，可以逼真地實(shí)現(xiàn)用戶體驗(yàn)；Three.js中用THREE.Scene()來設(shè)置三維場景；用THREE.AmbientLight()、THREE.SpotLight()來設(shè)置Three.js中提供的4種光源其中的環(huán)境光和點(diǎn)光源。

3.2 三維模型的加載

大部分三維程序都是從模型文件中讀取三維模型的頂點(diǎn)坐標(biāo)和顏色數(shù)據(jù)等相關(guān)信息，而當(dāng)所需建立的模型結(jié)構(gòu)很復(fù)雜時(shí)，可以在專門的建模軟件中進(jìn)行繪制，其中模型文件便是由三維建模軟件生成的。本文中模型文件由三維建模軟件Blender生成，后導(dǎo)入Three.js引擎中。Blender是一款非常流行的建模軟件，可以將三維模型導(dǎo)出為OBJ格式，該格式是基于文本的，易于閱讀和理解，也易于轉(zhuǎn)化為其他格式，導(dǎo)出時(shí)將模型的材質(zhì)信息存儲(chǔ)在外部的MTL格式的文件中。

3D世界是由點(diǎn)組成，兩個(gè)點(diǎn)能夠組成一條直線，3個(gè)不在一條直線上的點(diǎn)就能夠組成一個(gè)三角形面，三維物體是由多個(gè)三角形或四邊形組合而成的網(wǎng)格模型(在Three.js中，用THREE.Mesh表示)，我們通常把這種網(wǎng)格模型叫做Mesh模型。THREE.Mesh=function(gometry,material) 為其構(gòu)造函數(shù)，其中，第一個(gè)參數(shù)是一個(gè)THREE.Geometry類型的對(duì)象，表示模型定點(diǎn)間的連接關(guān)系；第二個(gè)參數(shù)定義了材質(zhì)，即表面的樣式，有可能是單色或漸變色，也有可能貼有紋理。

在代碼中，最主要的是對(duì)加載的三維模型文件進(jìn)行解析，只有解析了的模型才能在后面的代碼中使用。模型解析完成后，按4步調(diào)用geometry，依次為：計(jì)算geometry中每一個(gè)面的重心geometry.computeCentroids()；計(jì)算每一個(gè)面歸一化后的法向量geometry.computeFaceNormals()；計(jì)算一個(gè)可以包圍geometry的橢圓geometry.computeBoundingSphere()；最后得到完整的geometry對(duì)象。MTL文件按同樣的過程最終得到完整material對(duì)象后，新建mesh變量引入geometry和material:

var mesh=new THREE.Mesh(geometry,material)

3.3 性能評(píng)估

測(cè)試一個(gè)程序，性能上是否有瓶頸，在3D世界里，經(jīng)常使用幀數(shù)的概念。幀數(shù)即圖形處理器每秒鐘能夠刷新幾次，通常用fps(Frames Per Second)來表示。人眼看物體時(shí)，成像于視網(wǎng)膜上，并由視神經(jīng)輸入人腦，感覺到物體的像。一幀一幀的圖像進(jìn)入人腦，人腦就會(huì)將這些圖像給結(jié)合起來，形成動(dòng)畫。幀數(shù)越高，畫面的感覺就會(huì)越好。

在Three.js中，性能由一個(gè)性能監(jiān)視器來管理，其中FPS表示上一秒的幀數(shù)，這個(gè)值越大越好，點(diǎn)擊該圖就會(huì)變成右側(cè)視圖，如圖5所示。MS表示渲染一幀需要的毫秒數(shù)，這個(gè)數(shù)字是越小越好，再次點(diǎn)擊又可以回到FPS視圖中。

圖5 性能監(jiān)視器

3.4 交互處理

在系統(tǒng)中，實(shí)現(xiàn)三維空間與用戶的交互一般是通過鼠標(biāo)、鍵盤操作，而鼠標(biāo)、鍵盤所觸發(fā)的事件是通過添加事件偵聽實(shí)現(xiàn)，代碼如下：

documenet.addEventListener(“事件名稱”，函數(shù)，false)；

function函數(shù)(event){//函數(shù)體}

本文中用戶是通過拖動(dòng)(即按住鼠標(biāo)左鍵移動(dòng))鼠標(biāo)旋轉(zhuǎn)三維船體，通過鼠標(biāo)滾輪實(shí)現(xiàn)船體的縮放。鼠標(biāo)的響應(yīng)事件名稱有4個(gè)，分別為：mousemove、mousedown、mouseup、mousewheel。其中，mousemove與mousedown、mouseup相配合，分別完成相應(yīng)移動(dòng)動(dòng)作，而mousewheel滾輪事件觸發(fā)函數(shù)實(shí)現(xiàn)鏡頭的縮放。在Firefox瀏覽器中效果如圖6所示。

圖6 基于WebGL實(shí)現(xiàn)艦船虛擬三維場景圖

4 結(jié)語

本文將WebGL這一新興Web技術(shù)應(yīng)用于艦船模擬訓(xùn)練，采用了B/S結(jié)構(gòu)，受訓(xùn)者在客戶端只需要打開瀏覽器即可登錄系統(tǒng)，省去了繁瑣的客戶端程序安裝過程，克服了跨平臺(tái)和插件所帶來的不兼容性。利用基于WebGL技術(shù)的Three.js引擎構(gòu)建三維交互平臺(tái)并加載三維模型，實(shí)現(xiàn)鼠標(biāo)對(duì)網(wǎng)頁三維場景中的模型進(jìn)行互動(dòng)，為傳統(tǒng)二維系統(tǒng)模式帶來了新的思路，從視覺上更逼真的模擬真實(shí)的艦船環(huán)境。目前，國內(nèi)關(guān)于WebGL的研究和探討還是比較少的，可以說是比較前沿的技術(shù)，而WebGL標(biāo)準(zhǔn)仍在進(jìn)一步的發(fā)展之中，網(wǎng)絡(luò)化的交互訓(xùn)練系統(tǒng)還需要進(jìn)一步的完善。

[1] 張錦榮.推進(jìn)海軍模擬訓(xùn)練跨越式發(fā)展的幾點(diǎn)思考[J].軍事運(yùn)籌與系統(tǒng)工程,2010,24(1)：44-47.

[2] Marine Systems: On-Board Training System[EB/OL].http://www.cae.com/L3_MAPPS/Products_and_Services/Marine_Systems/Naval_Systems/obts.pdf.

[3] 劉愛華，韓 勇，張小壘，等.基于WebGL技術(shù)的網(wǎng)絡(luò)三維可視化研究與實(shí)現(xiàn)[J]. 地理空間信息,2012(5):79-81.

[4] Kouichi Matsuda,Rodger Lea.WebGL Programming Guide:Interactive 3D Graphics Programming with WebGL[M]. Addison-Wesley Professional, 2013.

[5] WebGLSpecification[Z/OL].https://www.khronos.org/registry/webgl/specs/1.0/.

[6] 王騰飛，劉俊男，周更新.基于Threejs3D引擎的三維網(wǎng)頁加密與實(shí)現(xiàn)[J].企業(yè)技術(shù)開發(fā),2014,33(2)：79-80.

[7] 榮艷冬.基于WebGL的3D技術(shù)在網(wǎng)頁中的運(yùn)用[J].信息安全與技術(shù),2015:90-92.

[8] Dirksen J.Learning Three.js: The JavaScript 3D Library for WebGL[M].Packt Publishing Ltd,2013.

Application of Virtual Three-dimensional Technology on Ship Simulation Training Based on WebGL

Ning Jing, Bu Leping, Feng Yuan

(College of Electrical Engineering,Naval University of Engineering,Wuhan 430033,China)

In view of the limitation of the poor universality and scalability and high cost for traditional mode of ship simulation training system,virtual three-dimension environment on ship simulation training based on WebGL is presented in this paper.It adopts a graphics engine called Three.js to render 3D virtual interactive interface on the web page,logging into the system by a browser.Thus a cross-platform,free plug-in and efficient interface of simulation training on ships is acquired.This method can be applied to other simulation training field as well.

WebGL; simulation training; virtual three-dimension; Three.js

2016-04-11；

2016-05-24。

寧 靜(1992-)，女，陜西西安人，碩士研究生，主要從事信號(hào)檢測(cè)與處理方向的研究。

1671-4598(2016)09-0251-03

10.16526/j.cnki.11-4762/tp.2016.09.070

TP31

A

卜樂平，教授，博士生導(dǎo)師，主要從事信號(hào)檢測(cè)與處理方向的研究。