基于WebGL的艦船模擬訓練虛擬三維技術應用

寧 靜,卜樂平, 馮 源

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

?

基于WebGL的艦船模擬訓練虛擬三維技術應用

寧 靜,卜樂平, 馮 源

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

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

WebGL; 模擬訓練；虛擬三維；Three.js

0 引言

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

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

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

1 WebGL及Three.js

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

圖1 WebGL基本渲染過程

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

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

圖2 Three.js基本繪圖流程

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

var scene = new THREE.Scene();

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

2 系統(tǒng)設計

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

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

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

圖3 系統(tǒng)體系結構

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

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

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

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

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

3.2 三維模型的加載

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

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

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

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

3.3 性能評估

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

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

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

3.4 交互處理

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

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

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

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

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

4 結語

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

[1] 張錦榮.推進海軍模擬訓練跨越式發(fā)展的幾點思考[J].軍事運籌與系統(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技術的網絡三維可視化研究與實現(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引擎的三維網頁加密與實現(xiàn)[J].企業(yè)技術開發(fā),2014,33(2)：79-80.

[7] 榮艷冬.基于WebGL的3D技術在網頁中的運用[J].信息安全與技術,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-)，女，陜西西安人，碩士研究生，主要從事信號檢測與處理方向的研究。

1671-4598(2016)09-0251-03

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

TP31

A

卜樂平，教授，博士生導師，主要從事信號檢測與處理方向的研究。