基于WEB的多容器多貨物三維裝箱系統構建研究

李燦毅　張沙清

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

關鍵詞：3D可視化裝箱系統；B/S架構；矢量數據渲染；WebGL

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

1 WebGL渲染流程

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

2 裝箱系統模塊劃分與實現

2.1 系統架構功能

根據實際裝箱需求設計的多容器、多物品貨物裝箱系統的模塊設計圖，各個模塊的功能定義如圖2：

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

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

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

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

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

6）用戶管理：用于管理使用系統的工作人員。

2.2 裝箱功能設計流程

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

2.3裝箱矢量數據3D渲染算法

具體算法顯示步驟如下：

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

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

格式，然后將全部的貨物信息放入一個數組：，將其轉為json格式數據然后傳入方法進行在svg內的dom操作。

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

Step4：在方法中將對空間對角線的兩組坐標轉為自適應屏幕的3D坐標：

其中，

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

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

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

Step6：在方法中利用公式：

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

Step7：最后調用js的內置方法：

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

3 系統仿真

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

4 結論

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

參考文獻：

[1] 桂思怡. 基于DirectX的立體裝箱系統3D可視化技術研究[D].大連海事大學，2014.

[2] 王麗君. 基于Web模式的3D裝箱系統可視化關鍵技術及應用研究[D].大連海事大學，2015.

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