基于Three.js的飛行仿真系統設計

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

0 引言

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

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

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

1 WebGL和Three.js技術

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

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

2 系統總體設計

基于Three.js的飛行仿真系統主要用于飛行器飛行過程的三維動態演示，要求兼具實時性和逼真性，即在實時展示飛行過程的同時，還需生動呈現仿真環境。因此，結合氣動數據和建模數據，構建飛行仿真系統，總體設計如圖1所示。

圖1 仿真系統總體設計

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

3 系統實現過程

3.1 飛行環境模擬

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

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

3.2 氣動數據處理

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

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

圖2 飛行軌跡生成過程

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

1)θ>0,飛行器處于爬升狀態，直到拉升高度達到一定值后，才逐漸將機身改平，夾角逐漸變小；

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

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

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

(1)

圖3 路徑角求解示意圖

3.3 飛行器模型構建

飛行器模型較為復雜，由多個幾何體組合而成，采用不規則三角網的建模方法能夠構建更為逼真的仿真模型，應用Three.js構建飛行器模型過程如圖4所示。

圖4 三維模型加載流程

詳細過程如下：

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

2)構建模型頂點坐標：利用數據中的頂點信息，結合THREE.Vector3方法，生成相應矢量點，并將這些矢量點保存到vertices數組元素中，由此組成飛行器模型的頂點坐標；

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

4)添加模型材質：飛行器外形均為金屬構造，因此系統選擇適合金屬、鏡面表現物體的Phong材質作為模型材質，并利用THREE.Mesh方法，將飛行器網格模型與模型材質相結合，生成飛行器模型。

3.4 尾焰特效模擬

飛行器在產生動力的時候，尾部會噴射火焰。火焰的變化是一種不規則運動，具有動態性和隨機性，不能精確描述，很難使用三維建模方法進行模擬。根據粒子系統方法[12]，創建粒子集，通過粒子集的動態變化來模擬尾焰的總體形態和特征，實現過程如圖5所示。當飛行器在自身動力推動下進行飛行時，系統通過THREE.Vector3構造火焰粒子集，將粒子集的初始化位置設置為飛行器尾部噴口處，顏色設置為火焰顏色，并使其沿飛行器機身延展方向運動。隨著飛行器和火焰粒子的運動，飛行器尾部噴口處不斷產生新粒子，所有粒子沿著原來的運動方向移動。當火焰粒子與飛行器之間的距離超過模擬的火焰范圍，則刪除該粒子，否則將該粒子渲染到瀏覽器上，如此往復循環，直到飛行器進入無動力滑翔階段。

圖5 粒子系統流程

3.5 攝像機漫游

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

表1 攝像機運動控制

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

1)θ>0,飛行器逐漸飛向高空，此時固定攝像機位置，即可實現拉鏡頭的拍攝手法，畫面效果從近景變為遠景，仿真呈現仰視效果；

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

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

圖6 攝像機規劃流程

3.6 場景更新

在完成飛行仿真靜態場景的構造以及各個仿真要素的運動控制后，需要持續不斷地進行循環渲染，才能使靜態的仿真畫面“動”起來。系統通過requestAnimationFrame循環調用仿真程序驅動場景更新。requestAnimationFrame每調用一次，程序就更新一次飛行器在飛行軌跡中的當前位置、火焰粒子的運動狀態以及攝像機視線和位置，并結合渲染器重新渲染瀏覽器畫布內容，進行場景更新。

4 仿真實例

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

圖7 飛行仿真系統的FPS監測結果

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

圖8 爬升段仰視視角畫面

圖9 過渡段多視角畫面

圖10 下降段跟隨視角畫面

5 結束語

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