基于WebGL 的船舶分段信息模型看板系統設計

葉統

（江蘇科技大學船舶與海洋工程學院，江蘇 鎮江 212003）

分段的建造過程是船舶建造過程中重要的一環，設計和制造緊密聯系是建造高質量船舶的關鍵，通過調研我國分段車間，目前分段車間工藝指導文件以紙質文件為主[1]，紙質圖紙中數據繁瑣且不易保存，各部分裝配關系也不能直觀展現，導致焊接裝配過程出現錯誤，從而造成大量時間浪費，降低了作業效率。為了改善船舶分段車間的生產效率和信息交流，提出了基于WebGL的分段信息模型看板系統。該系統使用OBJ 格式文件作為基本文件，并利用HTML5、Three.js 和jQuery 等技術開發分段三維模型的可視化看板[3]。通過三維模型的可視化展示，直觀展現各部分的裝配關系，使作業人員更容易理解和識別。

1 核心技術簡介

隨著船舶建造的信息化、數字化和智能化發展，紙質指導文件已經無法滿足生產管理需求。在船舶制造過程中，推動指導文件的三維化設計變得至關重要。然而，當前存在多種三維模型格式，缺乏統一標準。大部分三維模型瀏覽技術需要特定插件的支持，操作復雜且顯示精度各異[4]。為解決這些問題，可利用支持GPU 加速的瀏覽器中的WebGL 技術，通過JavaScript 應用API對船舶分段三維模型進行交互式渲染，提高數據利用率[5]。WebGL 能夠在Web 上渲染3D 模型和2D 場景，利用GPU 加速性能，使用戶能夠通過瀏覽器與三維模型進行交互操作，方便作業人員的溝通交流。

為實現此目標，首先需要為三維模型屬性提供機制，使其在Web 端實現可視化。然后將屬性信息嵌入HTML 和JS 文件中，通過WebGL 內置的著色器語言進行渲染和可視化。

如圖1 所示。

圖1 基于WebGL 的三維可視化過程

2 基于WebGL 的三維模型數據格式設計

2.1 三維模型數據需求分析

船舶分段建造涉及復雜的零部件和組件，數據龐大。為了在Web 上高效進行三維模型渲染顯示，需要簡易的模型格式。WebGL 結合OpenGL ES 2.0 和JavaScript，在Web 上顯示三維模型，其三維模型由三角面片組成，因此需要提供每個模型的三角面片信息。

目前主流的三維模型格式有STL、VRML、X3D、FBX 和OBJ。STL 格式簡單，用封閉的面和立方體構建模型，無屬性信息，常用于三維打印。VRML 和X3D是類C 語言的結構化數據，通過外觀屬性和幾何屬性構建模型，相較于STL，它們可定義模型的材質、顏色和光照，但兼容性較低，需要插件支持。FBX 和OBJ 是通用格式，在主流三維軟件中廣泛使用，FBX 支持動畫和骨骼動畫；OBJ 是字典結構的文本文件，可直接編輯，主要支持多邊形模型，支持面的三個點以上，便于后續處理。大部分三維軟件支持OBJ 文件導入導出，方便交流分享。綜合考慮兼容性、功能性和數據存儲等因素，選擇OBJ 作為三維看板系統的基本模型格式

2.2 OBJ 格式文件解析

OBJ 文件主要由頂點、紋理坐標、法線、三角索引和材質信息組成。材質信息保存在相應的MTL 文件中，OBJ 文件使用關鍵字"mtllib"指定MTL 文件。OBJ 文件可以由多個子模型（網格）組成，每個網格由object、v、vn、vt 和f 等數據組成。其中包含數據如圖2 所示。

圖2 OBJ 文件解析

2.3 MTL 格式文件解析

MTL 格式文件是OBJ 文件的附屬文件，用于存儲材料相關信息。每個OBJ 文件都會附帶一個MTL 文件，其中包含數據如圖3 所示。

圖3 MTL 文件解析

2.4 三維模型格式設計

為了更好地實現數據交互，減小瀏覽器用戶端的壓力，通過服務器端對OBJ 格式的三維模型文件進行解析重組。根據WebGL 的三維模型格式要求將模型幾何屬性及材料定義等信息重組，組成新的數據交換格式返回到服務器端，便于人的閱讀編寫和機器的解析生成。OBJ 格式三維模型文件與新數據交換格式的數據信息映射關系如圖4 所示。

圖4 OBJ 格式三維模型文件與新數據交換格式映射關系

3 基于WebGL 的分段信息模型可視化

3.1 分段信息模型可視化

在JavaScript 環境下，通過WebGL 技術可以實現分段模型的三維可視化。這主要依靠WebGL 函數庫中的頂點著色器和片元著色器來實現。如下圖5 所示。

圖5 三維模型可視化過程

其中頂點著色器對單個頂點對象進行操作，通過用戶定義的屬性（如頂點位置坐標、法線向量坐標和紋理坐標）對頂點進行處理；片元著色器的主要功能是對三維模型進行光柵化，生成片元，并對每個片元進行處理；事件響應函數可以異步響應用戶在網頁上進行的操作；模型的移動、旋轉變換主要通過改變視圖矩陣實現。

3.2 Web 中OBJ 格式三維模型顯示方法

OBJ 格式三維模型文件基于Web 的可視化主要分為以下四個步驟：

（1）在 WebGL 中，通 過 JavaScript 的initVertexBuffers()方法創建空的緩沖區對象，用于存儲三維模型的頂點坐標、顏色、法線、紋理和索引等屬性。

（2）針對OBJ 格式的三維模型文件進行解析，將其轉換為JavaScript 支持的文本格式。

（3）創建XMLHttpRequest 對象，用于與Web 服務器或本地代理服務器進行數據交互。

（4）將三維模型的屬性信息寫入緩沖區對象中。

4 系統技術實現及運行實例

4.1 系統架構及技術實現

為了使用戶能夠更好的瀏覽到船舶分段模型及相關信息，將該系統分為三層：用戶層、中間層和基礎層。用戶層實現人機交互功能，是應用接口模塊在用戶界面的集成。基礎層為開源數據庫，存儲船舶分段模型和相關數據。中間層是服務器層，處理用戶界面傳來的請求，根據分析結果連接不同功能模塊做出響應。如圖6 所示。

圖6 船舶分段三維模型可視化系統架構

4.2 運行實例

將符合要求的二維圖紙轉化為三維模型，并導出為OBJ 格式文件。通過HTML、JS 和WebGL 技術，如圖7。在用戶端實現模型的三維可視化，并使用模型視圖矩陣實現旋轉、放大和縮小等操作，如圖8。該系統無需插件，在主流瀏覽器中瀏覽船舶分段三維模型及相關信息。用戶能夠通過客戶端了解組件的屬性、形狀和加工信息，提高加工車間的無紙化程度。

圖7 船舶分段三維模型可視化系統運行實例

圖8 Web 端三維模型的旋轉放縮功能演示

5 結語

針對船舶分段制造車間紙質圖紙數量多、數據繁雜的問題，綜合考慮了三維模型格式的數據結構、兼容性、功能性和數據存儲大小等因素，選擇了OBJ 格式作為系統基本文件。利用HTML5、Three.js、jQuery 等技術開發基于WebGL 的船舶分段三維模型可視化系統，實現了分段三維模型的可視化。該系統提高了生產加工數據信息的流動速度，減少了數據流失和傳輸錯誤的風險，推動了無紙化生產車間的建設，提高了船舶生產企業的精益化水平。