基于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.