李燦毅　張沙清

摘要：針對某衛(wèi)浴生產(chǎn)企業(yè)貨物裝箱中裝箱過程優(yōu)化場景，采用基于瀏覽器引擎的WebGL技術(shù)構(gòu)建了一個多容器多貨物的web裝箱系統(tǒng)。詳細分析了三維裝箱系統(tǒng)整體架構(gòu)以及WebGL的運行模式，利用解析幾何知識給出了裝箱仿真過程中矢量數(shù)據(jù)的渲染以及相關(guān)幾何變換算法。結(jié)合裝箱效果，證明了基于幾何的WebGL矢量裝箱數(shù)據(jù)三維渲染方法的可行性和有效性。

關(guān)鍵詞：3D可視化裝箱系統(tǒng)；B/S架構(gòu)；矢量數(shù)據(jù)渲染；WebGL

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2016）19-0183-02

1 WebGL渲染流程

WebGL是khronos協(xié)會于2011年發(fā)布的一種新的Web三維繪圖標準，是OpenGLES2.0的Web版，屬于HTML5標準的一部分，具有跨瀏覽器、快平臺、可訪問GPU加速等特點。利用WebGL做渲染的流程如圖1所示。

2 裝箱系統(tǒng)模塊劃分與實現(xiàn)

2.1 系統(tǒng)架構(gòu)功能

根據(jù)實際裝箱需求設(shè)計的多容器、多物品貨物裝箱系統(tǒng)的模塊設(shè)計圖，各個模塊的功能定義如圖2：

1）車箱管理：車箱既是貨物要裝入的立方體容器，由于在實際裝箱場景中裝箱容器是預(yù)先規(guī)定好的，因此系統(tǒng)要具備用于管理裝箱使用的容器類型的功能，需要自定義裝箱容器的信息包括：箱子的長、寬、高、型號信息。

2）貨物管理：貨物既是需要進行裝填的立方體單元，在實際裝箱場景中貨物有不同規(guī)格大小的類，因此系統(tǒng)要具備用于對裝箱測試的貨物信息進行管理的功能，管理的信息包括貨物的長、寬、高。除此之外由于不同類型貨物的方向約束也有約束因此要加上方向約束信息。

3）訂單管理：用于企業(yè)對不同客戶訂單進行裝箱測試，可以將不同貨物組成一張訂單，便于管理。

4）參數(shù)管理：用于設(shè)置裝箱算法中的各種參數(shù)便于生成不同裝箱效果。

5）裝箱與顯示：用于對訂單進行裝箱測試，生成三維裝箱圖及平面裝箱圖，利用WebGL能夠動態(tài)顯示裝箱順序以及回放裝箱過程。除此之外，系統(tǒng)還提供了裝箱單Excel導(dǎo)出，方便裝箱人員確定每個箱子中所裝的貨物。

6）用戶管理：用于管理使用系統(tǒng)的工作人員。

2.2 裝箱功能設(shè)計流程

裝箱功能設(shè)計流程根據(jù)實際生產(chǎn)需求來設(shè)計，首先需要定義好裝箱的容器車箱的規(guī)格大小，同時添加好需要裝箱的貨物的規(guī)格 大小以及裝箱約束條件。然后添加訂單，同時將貨物添加進訂單之中。完成以上步驟之后，進入裝箱條件選擇環(huán)節(jié)。先選擇好裝箱的容器類型和個數(shù)，然后選擇好同一種裝箱方式的訂單，如果裝箱方式不一致則不能進行裝箱。最后選擇裝箱優(yōu)化目標，包括：重量平衡、裝填率最優(yōu)。全部條件選好后進行裝箱優(yōu)化，此時使用混合遺傳算法進行優(yōu)化。最后，在瀏覽器中輸出3D裝箱效果圖。圖3為整個裝箱功能流程圖。

2.3裝箱矢量數(shù)據(jù)3D渲染算法

具體算法顯示步驟如下：

Step1：初始化四個svg的html標簽，分別作為原視圖、90°視圖、180°視圖、270°視圖的顯示區(qū)域。后臺ajax返回的容器和貨物信息傳給一個設(shè)置繪圖dom的格式的js方法：

Step2：根據(jù)傳入容器的長、寬、高以及容器ID獲取到該裝箱測試下該容器內(nèi)的貨物信息。循環(huán)貨物列表將信息拼接成：

格式，然后將全部的貨物信息放入一個數(shù)組：，將其轉(zhuǎn)為json格式數(shù)據(jù)然后傳入方法進行在svg內(nèi)的dom操作。

Step3：在方法中，對中的json數(shù)據(jù)進行遍歷，將貨物空間對角線的兩組坐標以及貨物的其他信息通過方法逐個顯示。

Step4：在方法中將對空間對角線的兩組坐標轉(zhuǎn)為自適應(yīng)屏幕的3D坐標：

其中，

為容器的長，為容器的寬。將生成的調(diào)整過的三維直角坐標系坐標傳入方法轉(zhuǎn)為相對于眼睛的立體直角坐標系的空間坐標。

Step5：在方法中構(gòu)造一個目視向量，定義一個眼睛所在的空間坐標，利用解析幾何公式：

可以計算出對于眼睛的立體直角坐標系的空間坐標：將其傳入方法從而把相對于眼睛的立體直角坐標系的坐標轉(zhuǎn)為平面直角坐標系坐標（在顯示器中其實就是平面坐標系）。

Step6：在方法中利用公式：

從而把相對于眼睛的立體直角坐標系的坐標轉(zhuǎn)為平面直角坐標系坐標。其中為html中svg的寬度，為html中svg的高度。

Step7：最后調(diào)用js的內(nèi)置方法：

生成貨物立方體，利用svg的方法將坐標點設(shè)置進去。使用填充貨物顏色。

3 系統(tǒng)仿真

為了驗證裝箱系統(tǒng)的可行性，采用了一個佛山市某衛(wèi)浴廠家的實際裝箱訂單進行實驗。分別對：全散裝、全托盤裝載、托盤+尾部散裝、托盤+頂部散裝這四種位置約束進行了10次共40次仿真實驗。這里選取全散裝位置約束裝箱結(jié)果進行展示，圖4～圖7展示了該次裝箱優(yōu)化后生成的Web三維裝箱顯示效果：

4 結(jié)論

本文針對物流配送的裝箱問題，分析了裝箱系統(tǒng)各功能板塊以及現(xiàn)階段web三維顯示技術(shù)，設(shè)計一款新型的基于混合遺傳算法和WebGL 3D物理引擎裝箱系統(tǒng)。該系統(tǒng)用混合遺傳算法算出裝箱方案后，得到矢量裝箱數(shù)據(jù)。通過WebGL引擎的幾何構(gòu)圖和角度變換生成三維裝箱示意圖。通過測試表明，該系統(tǒng)既能通過計算機高效計算出一套完整的裝箱方案，又能通過Web進行三維效果顯示，從而更加直觀讓裝箱操作人員看到裝箱過程的每個步驟，從而提高了裝箱系統(tǒng)的可用性。

參考文獻：

[1] 桂思怡. 基于DirectX的立體裝箱系統(tǒng)3D可視化技術(shù)研究[D].大連海事大學(xué)，2014.

[2] 王麗君. 基于Web模式的3D裝箱系統(tǒng)可視化關(guān)鍵技術(shù)及應(yīng)用研究[D].大連海事大學(xué)，2015.

[3] 韓義. Web3D及Web三維可視化新發(fā)展——以WebGL和O3D為例[J]. 科技廣場，2010（5）：81-86.