基于WebGL的動車部件模型三維可視化技術的研究與應用

王川 牟琳 張珍文 安帥

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

關鍵詞：WebGL;AJAX;JSON;動車部件模型;三維數據可視化

中圖分類號：TP311? ? ? ? 文獻標識碼：A? ? ? ? 文章編號：1009-3044（2018）31-0208-02

動車部件構成復雜，數據量大、部件之間的關聯關系復雜并涉及大量的工業數據。采用三維模型建模展示比傳統的可視化技術可以更加直觀有效地獲得部件的相關信息。

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

1? 核心技術簡介

1.1WebGL技術

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

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

使用WebGL的web應用程序工作模式如圖1所示。

1.2 HTML5+ JavaScript +CSS技術

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

JavaScript是一種廣泛用于客戶端網頁開發的腳本語言，通常不能直接像普通程序那樣運行，只能通過 Web 瀏覽器進行解譯和執行。

CSS技術層疊樣式表是一種用來表現HTML或XML等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。

1.3 AJAX技術

AJAX可以創建更好、更快且交互性更強的

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

1.4 JSON

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

2 系統架構與技術實現

2.1系統架構

系統采用三層結構，應用服務器提供用于與其他系統關聯信息獲取的數據接口，并將客戶端發出的請求的結果以Json等數據方式返回給客戶端。系統架構圖如圖2所示：

2.2 技術實現

2.2.1三維場景呈現

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

2.2.2部件雙向定位

提供模糊搜索用戶接口，通過輸入關鍵詞，進行模糊搜索匹配并定位到模型樹中的相關模型，通過JS操作樹形結構展開并高亮顯示匹配模型，同時三維場景中的相應模型通過模型產生高亮顯示效果，實現從模型樹到三維模型的定位。

用戶也可直接點擊部件模型，后臺通過響應事件定位該模型，展開樹形結構并高亮顯示模型名稱，實現從模型到模型樹的定位。

2.2.3信息展示

系統支持對模型的固有屬性信息和擴展信息的展示。

所謂固有屬性信息是指模型的名稱、尺寸信息、廠家、出廠日期等自帶的屬性信息。這些信息被組織在模型描述的Json文件中，當模型被選中時，利用JS的響應事件調取相關的信息進行呈現。

所謂擴展信息是指非模型本身屬性，而是在生產運用過程中的業務數據。系統采用webservice數據接口按照指定的形式進行數據的組織，并通過Web傳輸或者AJAX異步傳輸的方式給予響應，從而展示在前端。

3 系統運行實例

進入系統后，首先可以看到基于WebGL渲染的整個三維場景。

界面左側是三維場景對應的模型組織關系樹。

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

系統運行示例圖如圖3所示：

4 結語

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

參考文獻：

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

[2] 孔靜. 基于WebGL技術的物聯展示系統的設計與實現[D].電子科技大學，2014.

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