基于WebGL的動車部件模型三維可視化技術(shù)的研究與應(yīng)用

王川 牟琳 張珍文 安帥

摘要：基于WebGL的動車部件模型的三維可視化技術(shù)的研究涉及WebGL技術(shù)、Html+JS+CSS技術(shù)、AJAX技術(shù)、JSON技術(shù)等，本文綜合運用上述技術(shù)提出了一套動車部件的三維立體展示、部件搜索及定位系統(tǒng)、關(guān)聯(lián)信息呈現(xiàn)的解決方案，并給出整套構(gòu)建方案的代碼實現(xiàn)，論證了該方案的可行性。

關(guān)鍵詞：WebGL;AJAX;JSON;動車部件模型;三維數(shù)據(jù)可視化

中圖分類號：TP311? ? ? ? 文獻(xiàn)標(biāo)識碼：A? ? ? ? 文章編號：1009-3044（2018）31-0208-02

動車部件構(gòu)成復(fù)雜，數(shù)據(jù)量大、部件之間的關(guān)聯(lián)關(guān)系復(fù)雜并涉及大量的工業(yè)數(shù)據(jù)。采用三維模型建模展示比傳統(tǒng)的可視化技術(shù)可以更加直觀有效地獲得部件的相關(guān)信息。

基于WebGL的動車部件模型三維可視化技術(shù)是將3D可視化技術(shù)和信息管理技術(shù)相結(jié)合，渲染出動車部件的整體三維模型場景，并提供簡潔直觀的UI讓用戶能快速搜索，定位模型并查看模型的重要信息。

1? 核心技術(shù)簡介

1.1WebGL技術(shù)

WebGL基于OpenGL ES 2.0，是一個Javascript 的 API，用于在瀏覽器里渲染交互式3D圖形，無須任何插件。

WebGL 分為兩大部分：控制端部分和著色器部分。控制端部分由Javascript 實現(xiàn)，著色器部分由 GLSL 實現(xiàn)。

使用WebGL的web應(yīng)用程序工作模式如圖1所示。

1.2 HTML5+ JavaScript +CSS技術(shù)

HTML5 主要有三大特點：第一，增加了本地數(shù)據(jù)庫等 Web 功能;第二，強(qiáng)化了Web 頁面的展示性能;第三，實現(xiàn)了對離線應(yīng)用的支持。HTML5 使得開發(fā)人員可以基于 HTML5 原生方法為用戶提供更多更好的交互功能。

JavaScript是一種廣泛用于客戶端網(wǎng)頁開發(fā)的腳本語言，通常不能直接像普通程序那樣運行，只能通過 Web 瀏覽器進(jìn)行解譯和執(zhí)行。

CSS技術(shù)層疊樣式表是一種用來表現(xiàn)HTML或XML等文件樣式的計算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。

1.3 AJAX技術(shù)

AJAX可以創(chuàng)建更好、更快且交互性更強(qiáng)的

web 應(yīng)用程序。AJAX 使用 JavaScript 在幕后與 web 瀏覽器與 web 服務(wù)器之間來發(fā)送和接收數(shù)據(jù)，而不是每當(dāng)用戶做出改變時重載整個 web 頁面，可以使網(wǎng)頁更迅速地響應(yīng)。

1.4 JSON

JSON是一種輕量級的數(shù)據(jù)交換格式。它用于表示簡單的數(shù)據(jù)結(jié)構(gòu)和對象。JSON 是基于文本的，容易被人閱讀、理解和編寫，同時也容易被計算機(jī)解譯和生成。

2 系統(tǒng)架構(gòu)與技術(shù)實現(xiàn)

2.1系統(tǒng)架構(gòu)

系統(tǒng)采用三層結(jié)構(gòu)，應(yīng)用服務(wù)器提供用于與其他系統(tǒng)關(guān)聯(lián)信息獲取的數(shù)據(jù)接口，并將客戶端發(fā)出的請求的結(jié)果以Json等數(shù)據(jù)方式返回給客戶端。系統(tǒng)架構(gòu)圖如圖2所示：

2.2 技術(shù)實現(xiàn)

2.2.1三維場景呈現(xiàn)

系統(tǒng)通過Json格式配置文件描述模型的名稱、類型等屬性信息及模型間的上下級關(guān)系，前端使用JS方式Json配置文件，并根據(jù)配置文件生成樹狀元素，該樹形元素通過解析配置文件直觀呈現(xiàn)模型之間的父子關(guān)系，顯示模型的名稱并通過圖標(biāo)區(qū)分不同類型的模型，同時基于WebGL將整個三維場景渲染在前端頁面中。

2.2.2部件雙向定位

提供模糊搜索用戶接口，通過輸入關(guān)鍵詞，進(jìn)行模糊搜索匹配并定位到模型樹中的相關(guān)模型，通過JS操作樹形結(jié)構(gòu)展開并高亮顯示匹配模型，同時三維場景中的相應(yīng)模型通過模型產(chǎn)生高亮顯示效果，實現(xiàn)從模型樹到三維模型的定位。

用戶也可直接點擊部件模型，后臺通過響應(yīng)事件定位該模型，展開樹形結(jié)構(gòu)并高亮顯示模型名稱，實現(xiàn)從模型到模型樹的定位。

2.2.3信息展示

系統(tǒng)支持對模型的固有屬性信息和擴(kuò)展信息的展示。

所謂固有屬性信息是指模型的名稱、尺寸信息、廠家、出廠日期等自帶的屬性信息。這些信息被組織在模型描述的Json文件中，當(dāng)模型被選中時，利用JS的響應(yīng)事件調(diào)取相關(guān)的信息進(jìn)行呈現(xiàn)。

所謂擴(kuò)展信息是指非模型本身屬性，而是在生產(chǎn)運用過程中的業(yè)務(wù)數(shù)據(jù)。系統(tǒng)采用webservice數(shù)據(jù)接口按照指定的形式進(jìn)行數(shù)據(jù)的組織，并通過Web傳輸或者AJAX異步傳輸?shù)姆绞浇o予響應(yīng)，從而展示在前端。

3 系統(tǒng)運行實例

進(jìn)入系統(tǒng)后，首先可以看到基于WebGL渲染的整個三維場景。

界面左側(cè)是三維場景對應(yīng)的模型組織關(guān)系樹。

輸入模糊匹配關(guān)鍵詞，可以看到高亮顯示的模糊匹配結(jié)果，點擊選中一項，則三維模型場景中的響應(yīng)模型被高亮居中顯示。同時下方的信息欄目展示了模型的固有屬性和擴(kuò)展屬性信息。

系統(tǒng)運行示例圖如圖3所示：

4 結(jié)語

本文所設(shè)計的基于WebGL的動車部件模型三維可視化系統(tǒng)充分利用了三維模型的直觀、準(zhǔn)確的優(yōu)勢和信息管理系統(tǒng)對數(shù)據(jù)組織、擴(kuò)展、管理的優(yōu)勢將動車部件三維模型通過WebGL渲染出來，并使用Html、Javascript、CSS、AJAX、JSON等技術(shù)構(gòu)造出模型的組織關(guān)系樹使得系統(tǒng)更直觀的呈現(xiàn)模型間的架構(gòu)關(guān)系，同時支持雙向選擇定位模型，支持模型的固有屬性和拓展屬性的呈現(xiàn)，為三維工業(yè)數(shù)據(jù)可視化的實際應(yīng)用提供解決方案和示范參考。

參考文獻(xiàn)：

[1] 牛藝博. 基于WebGL的地理信息三維可視化技術(shù)研究[D].蘭州交通大學(xué)，2015.

[2] 孔靜. 基于WebGL技術(shù)的物聯(lián)展示系統(tǒng)的設(shè)計與實現(xiàn)[D].電子科技大學(xué)，2014.

[3] 王維敏. Web3D技術(shù)探索及幾種Web3D技術(shù)的比較選擇[D].武漢大學(xué)，2004.