基于WebGL的零部件信息網絡發布系統設計

王 岳，張國慶，蔣志勇

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

0 引 言

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

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

1 技術需求分析

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

圖1 船體平面分段爆炸圖

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

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

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

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

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

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

表2 4種Web3D技術特征對比

2 模型格式數據分析

2.1 模型格式設計

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

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

2) 瀏覽實體模型格式需使用建模時所用的或格式兼容的CAD系統，易出現數據丟失的問題。

3) 擁有復雜數據結構的實體模型格式，文件數據量巨大，不適合模型的網絡瀏覽交流。

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

綜合考慮文件格式的通用性、模型顯示精度和數據內存大小等因素，選取OBJ格式作為本文發布系統的模型格式。

2.2 屬性信息設計

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

圖2 某船體零件

2.3 零部件裝配結構樹設計

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

3 系統整體框架

3.1 關鍵技術

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

圖3 WebGL的Web應用程序工作原理

3.2 系統整體框架設計

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

圖4 船體分段模型可視化系統整體結構框架

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

4.1 模型網絡顯示方法

為實現船體分段三維模型網絡顯示，除了采用WebGL進行渲染以外，至少還需完成以下幾個關鍵步驟：

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

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

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

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

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

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

4.2 系統技術實現

在服務器端的功能開發框架下，根據功能的不同劃分成不同的模塊，其中：

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

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

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

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

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

4.3 系統運行實例

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

5 結 語

面向船舶數字化車間升級改造需求，應用基于WebGL的零部件信息網絡發布系統，有利于便捷準確地將零部件屬性和生產設計信息向制造工位傳輸發布，減少中間過程的數據流失或傳輸錯誤，大幅提升船舶設計、制造和管理的一體化水平。