基于Three.js的飛行仿真系統(tǒng)設(shè)計

(西南科技大學(xué) 計算機科學(xué)與技術(shù)學(xué)院，四川 綿陽 621010)

0 引言

飛行器設(shè)計領(lǐng)域高技術(shù)、高耗費、高難度等特點，使得飛行實驗及其成果復(fù)現(xiàn)都受到現(xiàn)實條件的約束，難以在實際空間中進行[1]?；谶@種現(xiàn)狀，通過可視化仿真技術(shù)將已有飛行器設(shè)計所得數(shù)據(jù)集進行三維可視化，模擬飛行行為，已經(jīng)成為研究人員的必然選擇。目前，絕大部分飛行仿真系統(tǒng)是基于Vega Prime[2]，OSG[3]，Unigine[4]，STK[5]等成熟的三維引擎實現(xiàn)，并以傳統(tǒng)的獨立富客戶端形式來展現(xiàn)三維仿真效果。這種方式有效地實現(xiàn)了飛行仿真，但由于計算資源的處理均由本地機器負(fù)責(zé)，對客戶端硬件的要求較高，且資源部署不方便，不便于后期更新維護。這不可避免地使系統(tǒng)在應(yīng)用條件和使用空間方面存在缺陷，不利于設(shè)計人員之間的協(xié)同交流，尤其是飛行器研究不再局限于設(shè)計人員內(nèi)部之間交流探討時。因此，基于仿真系統(tǒng)受限于應(yīng)用程序和硬件設(shè)備的問題，提升系統(tǒng)便利性，為用戶提供開放的、跨平臺的，并兼具實時性和交互性的仿真系統(tǒng)，是當(dāng)前飛行器設(shè)計的一個關(guān)鍵問題。

通過瀏覽器進行三維可視化仿真，能夠有效地解決上述問題，實現(xiàn)資源共享。在HTML5以前，Web三維可視化的實現(xiàn)需要借助于Flash、Siverlight等渲染插件，所構(gòu)建的可視化系統(tǒng)兼容性、可移植性較差，破壞了用戶體驗。近年來，隨著HTML5標(biāo)準(zhǔn)的發(fā)布，以及WebGL等技術(shù)的快速發(fā)展，直接推動了免插件、開放、易用、跨平臺仿真系統(tǒng)的構(gòu)建，支持用戶在不限制空間、時間和操作系統(tǒng)平臺的條件下，對仿真系統(tǒng)直接進行訪問交互。目前，HTML5和WebGL技術(shù)都已經(jīng)得到各個主流瀏覽器的支持，如Google Chrome、Firefox、Internet Explorer 9+等。

本文針對Web端飛行仿真的應(yīng)用需求，采用WebGL第三方圖形庫Three.js，構(gòu)建三維飛行可視化仿真系統(tǒng)。該系統(tǒng)以氣動數(shù)據(jù)為驅(qū)動，實時模擬了飛行器運動軌跡，同時兼顧天空效果、尾焰特效以及攝像機漫游[6]，增加仿真效果真實性，使用戶可以通過瀏覽器端得到直觀豐富的三維仿真效果。本系統(tǒng)已應(yīng)用于某單位的多學(xué)科智能非線性設(shè)計研究過程中，為該研究過程提供了良好的可視化支持。

1 WebGL和Three.js技術(shù)

WebGL[7]是一種免費的、跨平臺的3D繪圖標(biāo)準(zhǔn)，是HTML5規(guī)范的組成部分之一。WebGL通過OpenGL ES2.0標(biāo)準(zhǔn)接口進行封裝，支持工程師使用JavaScript直接調(diào)用，從而在HTML5的Canvas標(biāo)簽基礎(chǔ)上實現(xiàn)三維場景構(gòu)建。WebGL克服了渲染插件的弊端，允許網(wǎng)頁利用底層的圖形硬件(GPU)加速功能進行三維圖形渲染，因此，提升了三維場景在Web端渲染性能和用戶體驗。

WebGL[8]提供的是底層圖形接口，在編程過程中要求開發(fā)人員必須了解相關(guān)的數(shù)學(xué)和圖形學(xué)知識。為了簡化開發(fā)過程中的渲染細(xì)節(jié)和數(shù)據(jù)結(jié)構(gòu)，構(gòu)建一個對開發(fā)人員更加友好的開發(fā)環(huán)境，通常在WebGL的基礎(chǔ)上進行封裝，形成第三方類庫，包括Three.js，Babylon.js，PlayCanvas等。其中，Three.js[9-10]作為一個輕量級、開源免費的開發(fā)框架，憑借出色的易用性和擴展性得到了業(yè)界的廣泛應(yīng)用。Three.js不僅封裝了WebGL原始的API，還支持Canvas動畫、CSS動畫以及許多實用的內(nèi)置對象，可以快速實例化場景、光照、攝像機、渲染器等元素，實現(xiàn)基本三維場景創(chuàng)建，提高開發(fā)效率，降低開發(fā)成本。

2 系統(tǒng)總體設(shè)計

基于Three.js的飛行仿真系統(tǒng)主要用于飛行器飛行過程的三維動態(tài)演示，要求兼具實時性和逼真性，即在實時展示飛行過程的同時，還需生動呈現(xiàn)仿真環(huán)境。因此，結(jié)合氣動數(shù)據(jù)和建模數(shù)據(jù)，構(gòu)建飛行仿真系統(tǒng)，總體設(shè)計如圖1所示。

圖1 仿真系統(tǒng)總體設(shè)計

飛行仿真系統(tǒng)中的建模數(shù)據(jù)用于飛行器模型在瀏覽器中的重現(xiàn)，氣動數(shù)據(jù)用于為飛行器模型的運動變化提供依據(jù)。在系統(tǒng)完成飛行環(huán)境、飛行軌跡以及飛行器模型的構(gòu)建后，由仿真程序利用飛行軌跡驅(qū)動飛行器模型運動，并根據(jù)飛行器運動狀態(tài)的不同，設(shè)置相應(yīng)的尾焰特效和攝像機漫游，通過循環(huán)更新瀏覽器上呈現(xiàn)的飛行場景，使畫面“動”起來，實現(xiàn)飛行場景在瀏覽器上的三維展示。

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

3.1 飛行環(huán)境模擬

在仿真系統(tǒng)中，為了真實地對飛行狀態(tài)進行可視化描述，讓研究人員更好地了解整個飛行過程，飛行環(huán)境的模擬是必不可少的。飛行仿真系統(tǒng)的主要對象是高空釋放的飛行器，其所有的飛行過程均在天空中完成，因此系統(tǒng)對于飛行環(huán)境的模擬主要集中在天空效果的實現(xiàn)方面。由于動態(tài)天空模型的計算量大、圖形繪制復(fù)雜，會對系統(tǒng)繪制的效率和流暢性產(chǎn)生較大影響，所以本文采用天空盒方法[11]，簡化天空效果的模擬細(xì)節(jié)。

天空效果的繪制過程如下：首先，利用Three.js內(nèi)置對象進行場景初始化，包括場景(THREE.Scene)、攝像機(THREE.Camare)、渲染器(THREE.Render)等，由此建立起一個空白的三維仿真場景；其次，利用立方體對象(THREE.BoxGeometry)建立一個盒模型，并添加到場景中，該盒模型覆蓋整個三維場景，其內(nèi)部即為三維場景的可視范圍；最后，選擇適合的天空紋理對盒模型內(nèi)部進行紋理映射，使其內(nèi)部形成四周均是無限天空的視覺效果。

3.2 氣動數(shù)據(jù)處理

氣動數(shù)據(jù)集中描述了飛行器飛行狀態(tài)的變化過程，是仿真系統(tǒng)可信度和逼真度的保證。已有的氣動數(shù)據(jù)在采樣過程中受現(xiàn)實條件限制，采樣頻率較低，得到的數(shù)據(jù)離散間隔過大，無法滿足人眼對于流暢體驗畫面每秒最少刷新24幀要求。所以系統(tǒng)將離散的位置坐標(biāo)進行擬合，形成曲線軌跡，豐富氣動數(shù)據(jù)，為飛行器運動控制提供數(shù)據(jù)支持。

系統(tǒng)以氣動數(shù)據(jù)為基礎(chǔ)，利用路徑類方法生成飛行軌跡，以供后續(xù)過程中改變飛行器位置使用，氣動數(shù)據(jù)處理過程如圖2所示。首先，利用THREE.FileLoader對象提供的load方法將氣動數(shù)據(jù)文檔加載得到數(shù)據(jù)集；然后，通過字符替換、分割等處理過程，將該數(shù)據(jù)集解析轉(zhuǎn)化為便于操作的數(shù)值數(shù)組并提取三維坐標(biāo)，構(gòu)建飛行曲線的頂點坐標(biāo)；最后，利用路徑類THREE.Path連接各頂點，生成飛行曲線，完成飛行軌跡在三維空間中的繪制。在繪制過程中，由于WebGL采用右手坐標(biāo)系，三維坐標(biāo)轉(zhuǎn)換為頂點坐標(biāo)時，y值對應(yīng)飛行高度，影響曲線起伏。

圖2 飛行軌跡生成過程

分析生成的飛行軌跡，根據(jù)飛行軌跡與水平面之間所形成的路徑角θ的大小，可以將飛行軌跡分為三個階段：

1)θ>0,飛行器處于爬升狀態(tài)，直到拉升高度達到一定值后，才逐漸將機身改平，夾角逐漸變?。?/p>

2)θ<0,飛行器處于下降狀態(tài)，其變化過程與爬升段相反；

3)θ=0,飛行器處于爬升段和下降段之間的過渡階段，對于巡航飛行器而言，該階段飛行器以穩(wěn)定的高度進行勻速水平飛行。

在仿真過程中，幀與幀之間的刷新間隔較短，相鄰兩幀間的飛行器位置連線可近似于兩幀間飛行器的飛行軌跡。根據(jù)右手坐標(biāo)系，如圖3所示，設(shè)P1(px1,py1,pz1)和P2(px2,py2,pz2)分別對應(yīng)相鄰兩幀畫面中飛行器坐標(biāo)，路徑角θ求解公式如下：

(1)

圖3 路徑角求解示意圖

3.3 飛行器模型構(gòu)建

飛行器模型較為復(fù)雜，由多個幾何體組合而成，采用不規(guī)則三角網(wǎng)的建模方法能夠構(gòu)建更為逼真的仿真模型，應(yīng)用Three.js構(gòu)建飛行器模型過程如圖4所示。

圖4 三維模型加載流程

詳細(xì)過程如下：

1)建模數(shù)據(jù)預(yù)處理：向系統(tǒng)中傳入一個.net格式的建模數(shù)據(jù)文件，該文件的解析過程同氣動數(shù)據(jù)文檔處理過程類似，通過文件加載和數(shù)據(jù)預(yù)處理，將其轉(zhuǎn)化為數(shù)組格式，易于后續(xù)操作；

2)構(gòu)建模型頂點坐標(biāo)：利用數(shù)據(jù)中的頂點信息，結(jié)合THREE.Vector3方法，生成相應(yīng)矢量點，并將這些矢量點保存到vertices數(shù)組元素中，由此組成飛行器模型的頂點坐標(biāo)；

3)生成飛行器網(wǎng)格模型：以每個頂點在vertices數(shù)組中的序號作為索引，使用THREE.Face3生成不規(guī)則三角單元，進而生成不規(guī)則三角網(wǎng)，生成飛行器的網(wǎng)格模型；

4)添加模型材質(zhì)：飛行器外形均為金屬構(gòu)造，因此系統(tǒng)選擇適合金屬、鏡面表現(xiàn)物體的Phong材質(zhì)作為模型材質(zhì)，并利用THREE.Mesh方法，將飛行器網(wǎng)格模型與模型材質(zhì)相結(jié)合，生成飛行器模型。

3.4 尾焰特效模擬

飛行器在產(chǎn)生動力的時候，尾部會噴射火焰?；鹧娴淖兓且环N不規(guī)則運動，具有動態(tài)性和隨機性，不能精確描述，很難使用三維建模方法進行模擬。根據(jù)粒子系統(tǒng)方法[12]，創(chuàng)建粒子集，通過粒子集的動態(tài)變化來模擬尾焰的總體形態(tài)和特征，實現(xiàn)過程如圖5所示。當(dāng)飛行器在自身動力推動下進行飛行時，系統(tǒng)通過THREE.Vector3構(gòu)造火焰粒子集，將粒子集的初始化位置設(shè)置為飛行器尾部噴口處，顏色設(shè)置為火焰顏色，并使其沿飛行器機身延展方向運動。隨著飛行器和火焰粒子的運動，飛行器尾部噴口處不斷產(chǎn)生新粒子，所有粒子沿著原來的運動方向移動。當(dāng)火焰粒子與飛行器之間的距離超過模擬的火焰范圍，則刪除該粒子，否則將該粒子渲染到瀏覽器上，如此往復(fù)循環(huán)，直到飛行器進入無動力滑翔階段。

圖5 粒子系統(tǒng)流程

3.5 攝像機漫游

在各飛行階段中，飛行器飛行特征均不相同，對于拍攝手法、場景氛圍的要求存在差異。根據(jù)飛行器運動過程，對攝像機運動進行軌跡規(guī)劃，合理地調(diào)整攝像機的位置和視線，使系統(tǒng)能夠多角度地展現(xiàn)飛行器飛行過程，豐富場景表達，仿真效果也更為直觀有效。因此，結(jié)合現(xiàn)代運動拍攝的知識，在氣動數(shù)據(jù)處理的基礎(chǔ)上，根據(jù)3.2中飛行軌跡的分段處理，為不同飛行階段設(shè)置相應(yīng)拍攝手法，以呈現(xiàn)不同的畫面效果，攝像機運動控制如表1所示。

表1 攝像機運動控制

系統(tǒng)對于攝像機的整體流程如圖6所示。當(dāng)飛行器位置改變時，首先調(diào)整攝像機視線，使其焦點始終對準(zhǔn)飛行器模型，確保飛行器存在于畫面之中[11]；其次，判斷飛行階段是否發(fā)生變化，如果發(fā)生變化，則根據(jù)表1中設(shè)定的拍攝手法的移動規(guī)則，對該飛行階段上攝像機的移動路徑進行規(guī)劃，否則，判斷當(dāng)前狀態(tài)是否滿足系統(tǒng)設(shè)置的過渡條件，若滿足，則設(shè)置相機路徑為通過該點與下一飛行階段的攝像機路徑初始點之間的弧線，若不滿足，則沿上一路徑規(guī)劃進行移動。其中，由表1指定的拍攝手法來調(diào)整攝像機設(shè)置的詳細(xì)介紹如下：

1)θ>0,飛行器逐漸飛向高空，此時固定攝像機位置，即可實現(xiàn)拉鏡頭的拍攝手法，畫面效果從近景變?yōu)檫h(yuǎn)景，仿真呈現(xiàn)仰視效果；

2)θ<0,飛行器處于下降狀態(tài)，為了穩(wěn)定呈現(xiàn)飛行器運動過程，攝像機采用跟鏡頭，此時攝像機與飛行器保持同步運動；

3)θ=0,飛行器機身處于水平狀態(tài)，采用移鏡頭營造一個開闊的視覺效果，該拍攝手法攝像機操作自由，不受限制，系統(tǒng)通過選擇二次貝塞爾曲線進行攝像機路徑規(guī)劃。

圖6 攝像機規(guī)劃流程

3.6 場景更新

在完成飛行仿真靜態(tài)場景的構(gòu)造以及各個仿真要素的運動控制后，需要持續(xù)不斷地進行循環(huán)渲染，才能使靜態(tài)的仿真畫面“動”起來。系統(tǒng)通過requestAnimationFrame循環(huán)調(diào)用仿真程序驅(qū)動場景更新。requestAnimationFrame每調(diào)用一次，程序就更新一次飛行器在飛行軌跡中的當(dāng)前位置、火焰粒子的運動狀態(tài)以及攝像機視線和位置，并結(jié)合渲染器重新渲染瀏覽器畫布內(nèi)容，進行場景更新。

4 仿真實例

本文以匕首導(dǎo)彈的飛行過程為例進行飛行仿真，實現(xiàn)飛行過程的三維可視化。仿真的硬件平臺為PC機，處理器是Intel(R) Celeron(R) CPU 1005M @ 1.90 GHz 1.90 GHz，8 G內(nèi)存；軟件平臺是GoogleChrome 71.0.3578.80。借助stat.js監(jiān)控該仿真結(jié)果的FPS信息如圖7所示。由此可知，除剛開始時的系統(tǒng)進行飛行場景建立的初始化時間外，整個仿真過程中，畫面每秒傳輸幀數(shù)均大于30，保證了仿真系統(tǒng)的穩(wěn)定性和流暢性，能夠滿足設(shè)計人員的日常需求。

圖7 飛行仿真系統(tǒng)的FPS監(jiān)測結(jié)果

圖8～10是匕首導(dǎo)彈飛行軌跡的仿真結(jié)果截圖。圖8是上升段畫面，可以看見匕首導(dǎo)彈產(chǎn)生動力，產(chǎn)生尾焰，而后在自身動力推動下開始爬升，逐漸飛向高空；圖9飛行器處于上升段和下降段之間過渡過程，仿真畫面從多個視角對飛行器狀態(tài)進行展示，畫面內(nèi)容豐富；圖10是下降段畫面，該階段中整體畫面穩(wěn)定清晰，效果良好。

圖8 爬升段仰視視角畫面

圖9 過渡段多視角畫面

圖10 下降段跟隨視角畫面

5 結(jié)束語

針對飛行仿真系統(tǒng)受到應(yīng)用程序和硬件設(shè)備的限制，系統(tǒng)開放性、兼容性、可移植性較差，無法滿足用戶更高的體驗需求的實際問題，本文研究HTML5和WebGL技術(shù)，利用Three.js圖形庫，實現(xiàn)了基于Web端的飛行仿真系統(tǒng)。該系統(tǒng)模擬了飛行器模型和天空效果，通過對飛行軌跡數(shù)據(jù)進行曲線擬合，在數(shù)據(jù)的驅(qū)動下，控制飛行器模型運動、尾焰特效變化以及攝像機漫游，對飛行過程進行動態(tài)呈現(xiàn)。系統(tǒng)運行流暢，效果良好，支持用戶的便捷訪問，基本可以滿足軌跡數(shù)據(jù)在各個操作系統(tǒng)平臺上快速且直觀的展示需求，對于三維場景在瀏覽器端的模擬實現(xiàn)，具有一定的實際實用價值。