李燦毅　張沙清

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

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

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）19-0183-02

1 WebGL渲染流程

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

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

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

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

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

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

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

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

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

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

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

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

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

具體算法顯示步驟如下：

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

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

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

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

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

其中，

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

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

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

Step6：在方法中利用公式：

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

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

生成貨物立方體，利用svg的方法將坐標(biāo)點(diǎn)設(shè)置進(jìn)去。使用填充貨物顏色。

3 系統(tǒng)仿真

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

4 結(jié)論

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

參考文獻(xiàn)：

[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]. 科技廣場(chǎng)，2010（5）：81-86.