基于WebGL 的船舶分段信息模型看板系統(tǒng)設(shè)計(jì)

葉統(tǒng)

（江蘇科技大學(xué)船舶與海洋工程學(xué)院，江蘇 鎮(zhèn)江 212003）

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

1 核心技術(shù)簡介

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

為實(shí)現(xiàn)此目標(biāo)，首先需要為三維模型屬性提供機(jī)制，使其在Web 端實(shí)現(xiàn)可視化。然后將屬性信息嵌入HTML 和JS 文件中，通過WebGL 內(nèi)置的著色器語言進(jìn)行渲染和可視化。

如圖1 所示。

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

2 基于WebGL 的三維模型數(shù)據(jù)格式設(shè)計(jì)

2.1 三維模型數(shù)據(jù)需求分析

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

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

2.2 OBJ 格式文件解析

OBJ 文件主要由頂點(diǎn)、紋理坐標(biāo)、法線、三角索引和材質(zhì)信息組成。材質(zhì)信息保存在相應(yīng)的MTL 文件中，OBJ 文件使用關(guān)鍵字"mtllib"指定MTL 文件。OBJ 文件可以由多個(gè)子模型（網(wǎng)格）組成，每個(gè)網(wǎng)格由object、v、vn、vt 和f 等數(shù)據(jù)組成。其中包含數(shù)據(jù)如圖2 所示。

圖2 OBJ 文件解析

2.3 MTL 格式文件解析

MTL 格式文件是OBJ 文件的附屬文件，用于存儲(chǔ)材料相關(guān)信息。每個(gè)OBJ 文件都會(huì)附帶一個(gè)MTL 文件，其中包含數(shù)據(jù)如圖3 所示。

圖3 MTL 文件解析

2.4 三維模型格式設(shè)計(jì)

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

圖4 OBJ 格式三維模型文件與新數(shù)據(jù)交換格式映射關(guān)系

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

3.1 分段信息模型可視化

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

圖5 三維模型可視化過程

其中頂點(diǎn)著色器對(duì)單個(gè)頂點(diǎn)對(duì)象進(jìn)行操作，通過用戶定義的屬性（如頂點(diǎn)位置坐標(biāo)、法線向量坐標(biāo)和紋理坐標(biāo)）對(duì)頂點(diǎn)進(jìn)行處理；片元著色器的主要功能是對(duì)三維模型進(jìn)行光柵化，生成片元，并對(duì)每個(gè)片元進(jìn)行處理；事件響應(yīng)函數(shù)可以異步響應(yīng)用戶在網(wǎng)頁上進(jìn)行的操作；模型的移動(dòng)、旋轉(zhuǎn)變換主要通過改變視圖矩陣實(shí)現(xiàn)。

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

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

（1）在 WebGL 中，通 過 JavaScript 的initVertexBuffers()方法創(chuàng)建空的緩沖區(qū)對(duì)象，用于存儲(chǔ)三維模型的頂點(diǎn)坐標(biāo)、顏色、法線、紋理和索引等屬性。

（2）針對(duì)OBJ 格式的三維模型文件進(jìn)行解析，將其轉(zhuǎn)換為JavaScript 支持的文本格式。

（3）創(chuàng)建XMLHttpRequest 對(duì)象，用于與Web 服務(wù)器或本地代理服務(wù)器進(jìn)行數(shù)據(jù)交互。

（4）將三維模型的屬性信息寫入緩沖區(qū)對(duì)象中。

4 系統(tǒng)技術(shù)實(shí)現(xiàn)及運(yùn)行實(shí)例

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

為了使用戶能夠更好的瀏覽到船舶分段模型及相關(guān)信息，將該系統(tǒng)分為三層：用戶層、中間層和基礎(chǔ)層。用戶層實(shí)現(xiàn)人機(jī)交互功能，是應(yīng)用接口模塊在用戶界面的集成。基礎(chǔ)層為開源數(shù)據(jù)庫，存儲(chǔ)船舶分段模型和相關(guān)數(shù)據(jù)。中間層是服務(wù)器層，處理用戶界面?zhèn)鱽淼恼?qǐng)求，根據(jù)分析結(jié)果連接不同功能模塊做出響應(yīng)。如圖6 所示。

圖6 船舶分段三維模型可視化系統(tǒng)架構(gòu)

4.2 運(yùn)行實(shí)例

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

圖7 船舶分段三維模型可視化系統(tǒng)運(yùn)行實(shí)例

圖8 Web 端三維模型的旋轉(zhuǎn)放縮功能演示

5 結(jié)語

針對(duì)船舶分段制造車間紙質(zhì)圖紙數(shù)量多、數(shù)據(jù)繁雜的問題，綜合考慮了三維模型格式的數(shù)據(jù)結(jié)構(gòu)、兼容性、功能性和數(shù)據(jù)存儲(chǔ)大小等因素，選擇了OBJ 格式作為系統(tǒng)基本文件。利用HTML5、Three.js、jQuery 等技術(shù)開發(fā)基于WebGL 的船舶分段三維模型可視化系統(tǒng)，實(shí)現(xiàn)了分段三維模型的可視化。該系統(tǒng)提高了生產(chǎn)加工數(shù)據(jù)信息的流動(dòng)速度，減少了數(shù)據(jù)流失和傳輸錯(cuò)誤的風(fēng)險(xiǎn)，推動(dòng)了無紙化生產(chǎn)車間的建設(shè)，提高了船舶生產(chǎn)企業(yè)的精益化水平。