基于WebGL的零部件信息網(wǎng)絡(luò)發(fā)布系統(tǒng)設(shè)計

王 岳，張國慶，蔣志勇

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

0 引 言

船體零部件裝配是船舶建造的關(guān)鍵環(huán)節(jié)之一，由于信息集成度不高，該環(huán)節(jié)普遍存在出圖量大、加工圖生產(chǎn)信息缺失、裝配過程表達效果差和物流信息匱乏等問題，導(dǎo)致耗工耗時嚴重，進而影響全船的建造周期。

當前三維計算機輔助設(shè)計（Computer Aided Design, CAD）系統(tǒng)已在造船業(yè)得到廣泛應(yīng)用，若能面向制造過程，對船舶設(shè)計模型進行生產(chǎn)信息集成并將其快速、準確地發(fā)布給作業(yè)工位，必將改變船體零部件加工裝配現(xiàn)狀，大幅提升作業(yè)質(zhì)量和作業(yè)效率。然而，商用CAD軟件具有多樣性，這使得模型文件格式多樣，文件格式兼容問題較為嚴重；同時，CAD軟件不具有便攜的特點，船舶設(shè)計、建造的并行協(xié)同難以實現(xiàn)。對此，本文提出基于Web 圖形庫（Web Graphics Library，WebGL）技術(shù)設(shè)計開發(fā)船體零部件模型信息網(wǎng)絡(luò)發(fā)布系統(tǒng)，實現(xiàn)在不同瀏覽器上對零部件三維模型與相關(guān)生產(chǎn)屬性信息的高度集成。

1 技術(shù)需求分析

在競爭日趨激烈的船舶市場環(huán)境下，推動計算機信息技術(shù)與船舶制造技術(shù)相融合已成為一種必然趨勢。船體分段由零部件裝配而成（見圖1），清楚地了解這些零部件的名稱、編號、總體尺寸和功能等屬性信息對于整體的船舶建造而言尤為重要。

圖1 船體平面分段爆炸圖

目前CAD軟件中的三維模型網(wǎng)絡(luò)信息發(fā)布功能通常局限在特定的瀏覽器上實現(xiàn)，或以郵件的方式實現(xiàn)，表1為4種熱門CAD實現(xiàn)三維模型信息共享的方式。

表1 4種熱門CAD實現(xiàn)三維模型信息共享的方式

信息共享的單一性給工作人員的交流帶來了諸多不便。在此情況下，X3D、Java3D、Viewpoint和VRML等三維模型網(wǎng)絡(luò)顯示技術(shù)應(yīng)運而生，當前這些技術(shù)在應(yīng)用過程中仍存在一些問題，主要如下：

1) 需要特定的插件?，F(xiàn)有的三維模型瀏覽器信息發(fā)布技術(shù)基本上全部依賴特定的插件，插件內(nèi)存大小在一定程度上影響著三維模型在瀏覽器上的顯示精度，而不同類型的瀏覽器需要不同的插件，運行操作比較繁瑣。

2) 不存在統(tǒng)一的標準?，F(xiàn)有的三維模型顯示技術(shù)僅支持特定的三維模型格式，沒有建立統(tǒng)一的格式標準，不利于實現(xiàn)三維模型瀏覽器信息資源共享。

本文采用WebGL技術(shù)，無需插件就可實現(xiàn)在不同瀏覽器上進行三維模型瀏覽操作。WebGL中的Canvas提供的硬件3D可加速模型渲染。表2為4種Web3D技術(shù)特征對比。

表2 4種Web3D技術(shù)特征對比

2 模型格式數(shù)據(jù)分析

2.1 模型格式設(shè)計

船舶CAD模型格式主要分為實體模型格式和網(wǎng)格模型格式2種，其中實體模型格式發(fā)布傳輸時存在以下不足：

1) 實體模型格式中沒有三角面片的相關(guān)信息，在顯示船舶分段模型之前需進行大量的計算工作，而船舶分段是一個復(fù)雜的三維模型，計算所需時間會更多。

2) 瀏覽實體模型格式需使用建模時所用的或格式兼容的CAD系統(tǒng)，易出現(xiàn)數(shù)據(jù)丟失的問題。

3) 擁有復(fù)雜數(shù)據(jù)結(jié)構(gòu)的實體模型格式，文件數(shù)據(jù)量巨大，不適合模型的網(wǎng)絡(luò)瀏覽交流。

由此可知，實體模型格式不符合船體分段模型可視化的基本要求。網(wǎng)格模型格式采用多邊形面片近似模擬三維模型的幾何形狀，最常見的是STL、OBJ和VRML等3種網(wǎng)格模型格式，其中：VRML格式文件在瀏覽時，必須安裝VRML插件；STL格式和OBJ格式?jīng)]有任何專利限制，很多船舶CAD軟件都可導(dǎo)出這2種格式的模型，文本數(shù)據(jù)格式比較簡單，有利于實現(xiàn)網(wǎng)絡(luò)資源信息共享。三維模型的OBJ格式是應(yīng)用最廣泛的船舶零部件模型數(shù)據(jù)交換格式，業(yè)內(nèi)幾乎所有主流CAD建模軟件都可直接導(dǎo)出OBJ格式的文件，或間接通過第三方軟件轉(zhuǎn)換導(dǎo)出OBJ格式的文件。每個OBJ格式都會附帶一個MTL文件，其主要作用是對三維模型的材質(zhì)信息、光照和紋理進行描述。

綜合考慮文件格式的通用性、模型顯示精度和數(shù)據(jù)內(nèi)存大小等因素，選取OBJ格式作為本文發(fā)布系統(tǒng)的模型格式。

2.2 屬性信息設(shè)計

屬性信息包括零部件的名稱、重量、厚度、數(shù)量、長度和所屬層次等，以文本的形式保存在設(shè)計系統(tǒng)的網(wǎng)頁上，并以表格的形式在網(wǎng)頁上顯示占用的存儲空間比較小。屬性信息是零部件的標簽，是了解零部件的關(guān)鍵，對保證船體零部件裝配的順利進行有著至關(guān)重要的作用。掌握零部件的屬性信息和形狀是加工裝配的前提，圖2為某船體零件，其屬性信息代碼如下：

圖2 某船體零件

2.3 零部件裝配結(jié)構(gòu)樹設(shè)計

零部件裝配結(jié)構(gòu)樹是描述裝配加工順序的樹狀圖。若將船體分段作為裝配結(jié)構(gòu)樹的根節(jié)點，則向下分別為大組立、中組立和小組立。用戶可在瀏覽器系統(tǒng)中點擊相應(yīng)的構(gòu)件，了解裝配關(guān)系，結(jié)構(gòu)樹代碼如下：

3 系統(tǒng)整體框架

3.1 關(guān)鍵技術(shù)

WebGL其實是一種3D繪圖協(xié)議，不需要專門的渲染插件便可在網(wǎng)頁上瀏覽三維模型，其圖形渲染主要利用標準、統(tǒng)一、跨平臺的開放圖形庫（Open Graphics Library, OpenGL）接口實現(xiàn)。WebGL的Web應(yīng)用程序工作原理見圖3。

圖3 WebGL的Web應(yīng)用程序工作原理

3.2 系統(tǒng)整體框架設(shè)計

為使用戶能快速、直觀地了解到船體分段零部件的相關(guān)信息，在構(gòu)建船體分段模型三維可視化系統(tǒng)架構(gòu)時，前端頁面采用Ant Design框架，后臺操作使用React組件，三維模型顯示依托Three.js引擎，最后應(yīng)用Webpack打包。設(shè)計的船體分段模型可視化系統(tǒng)整體結(jié)構(gòu)框架見圖4。HTML5用于解決新舊版本瀏覽器之間的兼容性問題，可在移動設(shè)備上支持多媒體，同時不需要任何額外的插件。Three.js作為JavaScript編寫的WebGL第三方庫，是瀏覽器中的3D引擎，提供點、線、面和矩形等基本元素，結(jié)合物體、渲染器、場景和相機等實現(xiàn)三維模型瀏覽器瀏覽。React虛擬文件對象模型（Document Object Model, DOM）操作運用組件化開發(fā)思路，使開發(fā)效率和系統(tǒng)的運行性能得到大幅提升。Ant Design技術(shù)能屏蔽不必要的設(shè)計差異和降低成本，節(jié)省設(shè)計和前端的研發(fā)資源。Webpack用來分析項目結(jié)構(gòu)，尋找JavaScript模塊和部分瀏覽器不能直接運行的拓展語言（例如TypeScript和Scss等），將其打包為瀏覽器能識別的JavaScript格式。

圖4 船體分段模型可視化系統(tǒng)整體結(jié)構(gòu)框架

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

4.1 模型網(wǎng)絡(luò)顯示方法

為實現(xiàn)船體分段三維模型網(wǎng)絡(luò)顯示，除了采用WebGL進行渲染以外，至少還需完成以下幾個關(guān)鍵步驟：

1) 在HTML5中創(chuàng)建Canvas元素標簽，顯示船體分段三維模型。

2) 獲取Canvas元素標簽上下文。先用圖形庫（Graphics Library，GL）調(diào)用WebGL的應(yīng)用程序接口（Application Programming Interface, API），然后采用WebGL技術(shù)在Canvas中實現(xiàn)船體分段模型渲染。

3) 初始化三維模型場景視口，設(shè)置模型視口的大小。系統(tǒng)用戶通過場景視口瀏覽船體分段三維模型，在獲取Canvas元素標簽的上下文之后，對船體分段三維模型網(wǎng)頁顯示視口進行設(shè)置。

4) 設(shè)置緩沖區(qū)存放船體三維模型基本屬性信息。船體分段三維模型文件大多數(shù)由多個頂點信息組成，包括三角面片的頂點坐標、頂點索引、頂點的法矢向量和紋理坐標等模型數(shù)據(jù)。設(shè)置緩沖區(qū)存放船體分段模型的相關(guān)數(shù)據(jù)。分別設(shè)置頂點緩沖區(qū)、頂點法矢緩沖區(qū)、頂點紋理緩沖區(qū)和頂點索引緩沖區(qū)存放船體分段模型的相關(guān)數(shù)據(jù)，同時分別將這4種緩沖區(qū)的屬性分別設(shè)置為1、2、3、4。在讀取數(shù)據(jù)時，根據(jù)屬性設(shè)置的序號獲取船體分段模型的數(shù)據(jù)。

5) 設(shè)置矩陣定義，實現(xiàn)頂點緩沖轉(zhuǎn)換到屏幕空間。實現(xiàn)頂點緩沖轉(zhuǎn)換到屏幕空間和船體分段模型的平移、旋轉(zhuǎn)和縮放功能，首先要對船體分段模型矩陣進行計算，然后對船體分段模型頂點的數(shù)據(jù)進行處理。

6) 設(shè)置頂點著色器和片元著色器實現(xiàn)算法。在瀏覽器網(wǎng)絡(luò)顯示中，船體分段模型大多數(shù)是由頂點連接構(gòu)成三角面片進行渲染。頂點著色器的主要功能是處理船體分段模型的頂點數(shù)據(jù)；片元著色器的主要功能是對船體分段模型三角面片的3個頂點進行插值，處理三角面片中非頂點的數(shù)據(jù)。7) 初始化2個著色器的參數(shù)。初始化頂點著色器和片元著色器。8) 后臺導(dǎo)入船體分段模型，實現(xiàn)瀏覽器網(wǎng)絡(luò)顯示。

4.2 系統(tǒng)技術(shù)實現(xiàn)

在服務(wù)器端的功能開發(fā)框架下，根據(jù)功能的不同劃分成不同的模塊，其中：

1) 初始化模塊對每個運行平臺進行初始化設(shè)置，包括判斷瀏覽器是否支持WebGL技術(shù)、創(chuàng)建Canvas和初始化設(shè)置網(wǎng)頁視口的大小等；

2) 渲染顯示模塊獲取原始船體分段三維模型數(shù)據(jù)，并將其傳輸給瀏覽器端，WebGL調(diào)用瀏覽器中的圖形處理器（Graphics Processing Unit, GPU），加速船體分段三維模型渲染；

3) 零部件圖片顯示模塊保證用戶能在瀏覽器上了解到船體零件的形狀，同時該零部件的生產(chǎn)屬性信息也會在同一界面內(nèi)顯示；

4) 攝像機控制模塊實現(xiàn)將三維模型加入3D場景中之后，用戶可從不同角度瀏覽三維模型，通過點擊鼠標便可對模型進行平移、旋轉(zhuǎn)、放大和縮小等操作；

5) 模型組織關(guān)系樹模塊讓用戶了解船體零部件與船體分段之間的構(gòu)架關(guān)系，清楚零部件在船體分段上的空間位置。

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

該系統(tǒng)實現(xiàn)了在主流瀏覽器上瀏覽船體分段三維模型及其結(jié)構(gòu)樹。將船體分段模型零部件信息網(wǎng)絡(luò)發(fā)布系統(tǒng)應(yīng)用于船體零部件加工車間，用戶通過瀏覽器了解每個零部件的屬性信息、構(gòu)建層次和形狀，可迅速準確地進行物料追蹤，減少零部件加工裝配時失誤。在后臺將某船207分段模型導(dǎo)入系統(tǒng)中，命令執(zhí)行窗口cmd自動生成一個網(wǎng)站鏈接，用戶復(fù)制該網(wǎng)站鏈接即可在不同類型的瀏覽器上打開零部件信息網(wǎng)絡(luò)發(fā)布系統(tǒng)。系統(tǒng)首頁主要包含4個模型信息展示區(qū)，分別為結(jié)構(gòu)樹區(qū)、三維模型視圖區(qū)、構(gòu)件視圖區(qū)和構(gòu)件屬性及加工信息區(qū)。點擊結(jié)構(gòu)樹區(qū)某個零部件的名稱或三維模型視圖區(qū)零部件，相應(yīng)的零部件圖和發(fā)布的信息便會出現(xiàn)在系統(tǒng)中的網(wǎng)頁界面上，用于指導(dǎo)生產(chǎn)。

5 結(jié) 語

面向船舶數(shù)字化車間升級改造需求，應(yīng)用基于WebGL的零部件信息網(wǎng)絡(luò)發(fā)布系統(tǒng)，有利于便捷準確地將零部件屬性和生產(chǎn)設(shè)計信息向制造工位傳輸發(fā)布，減少中間過程的數(shù)據(jù)流失或傳輸錯誤，大幅提升船舶設(shè)計、制造和管理的一體化水平。