首先介绍一下什么是WMS。WMS是仓库管理系统(Warehouse Management System) 的缩写，仓库管理系统是通过入库业务、出库业务、仓库调拨、库存调拨和虚仓管理等功能，对批次管理、物料对应、库存盘点、质检管理、虚仓管理和即时库存管理等功能综合运用的管理系统，有效控制并跟踪仓库业务的物流和成本管理全过程，实现或完善的企业仓储信息管理。该系统可以独立执行库存操作，也可与其他系统的单据和凭证等结合使用，可为企业提供更为完整企业物流管理流程和财务管理信息。
目前主流的 WMS 仓库管理系统大都采用了 B/S 模式，但数据可视化技术上仍采用的是传统图表显示方式。本文从数据可视化的角度介绍了一种基于 WEB 的 3D 可视化实现方案，底层基于标准的 HTML5 WebGL 技术，以 3D 的方式显示仓库立体场景，包括货架、货物、堆垛机、穿梭车、输送机等。相对于传统图表显示方式，三维的仓库管理可视化显示方式，显得更加直观和立体化，无论是用户体验还是产品质量都得到了巨大提升。 
一、WebGL 介绍以及 3D 引擎的选择
WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和 OpenGL ES 2.0 结合在一起，通过增加 OpenGL ES 2. 0的一个 JavaScript 绑定，WebGL 可以为HTML5 Canvas 提供硬件 3D 加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL 技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计 3D 网页游戏等等。
由于 WebGL 是一种偏底层的技术，为了降低开发难度和节省开发成本，不建议直接基于 WebGL进行开发。目前业内大都采用基于 WebGL 实现的 3D 引擎进行开发。Web 3D 引擎比较多，很多是面向不同行业和不同的应用场景的，下面我们介绍几个常见的且有代表性的 3D 引擎，并选择一个适合来用来构建 WMS 3D 可视化仓库管理系统。
1. Three.js
Three.js 是纯渲染引擎，而且代码易读，容易作为学习WebGL、3D图形、3D数学应用的平台，也可以做中小型的重表现的Web项目。但如果要做中大型项目，尤其是多种媒体混杂的或者是游戏项目VR体验项目，Three.js必须要配合更多扩展库才能完成。
2. Babylon.js
Babylon.js 是微软发布的开源的 Web 3D 引擎。最初设计作为一个Silverlight游戏引擎，Babylon.js 的维护倾向于基于 Web 的游戏开发与碰撞检测和抗锯齿等特性。在其官网上可以看到很多例子：http://www.babylonjs.com/。
3. HT for Web
HT for Web 是基于HTML5标准的企业应用图形界面一站式解决方案，其包含通用组件、拓扑组件和3D渲染引擎等丰富的图形界面开发类库。虽然 HT for Web 是商业软件但其提供的一站式解决方案可以极大缩短产品开发周期、减少研发成本、补齐我们在 Web 图形界面可视化技术上的短板。
我们选择的 3D 引擎是 HT for Web，虽然需要一定的授权费，但总体上来看是有价值的，我们在很短的时间内就可以开发出一套定制化的 WMS 3D 可视化仓库管理系统。由于是商用软件，对方提供了很好的技术支持，官网有完善的文档手册，开发包的使用也很容易上手。
二、功能实现
WMS 数据可视化主要包括以下几部分功能：
1. 状态管理
用于显示WMS通讯状态、堆垛机状态，包括是否故障、通讯状态、故障信息。
显示状态面板只需要引用 HT 的图纸文件：
1 const g2d = new ht.graph.GraphView()
2 g2d.setPannable(false)
3 g2d.setRectSelectable(false)
4 g2d.handleScroll = function () {}
5 g2d.setScrollBarVisible(false)
6
7 ht.Default.xhrLoad('displays/状态面板.json', function (json) {
8 g2d.dm().deserialize(json)
9 })
2. 任务管理
显示当前出库入库任务列表
出库入库任务列表也可以用 HT 图纸进行显示：
1 const g2d = new ht.graph.GraphView()
2
3 g2d.setPannable(false)
4 g2d.setRectSelectable(false)
5 g2d.handleScroll = function () {}
6 g2d.setScrollBarVisible(false)
7 ht.Default.xhrLoad('displays/任务列表.json', function (json) {
8 g2d.dm().deserialize(json)
9 })
3. 故障管理
显示当前的故障信息列表。
故障信息页面为 HT 图纸，代码实现如下：
1 const g2d = new ht.graph.GraphView()
2 g2d.setPannable(false)
3 g2d.setRectSelectable(false)
4 g2d.handleScroll = function () {}
5 g2d.setScrollBarVisible(false)
6
7 ht.Default.xhrLoad('displays/故障信息.json', function (json) {
8 g2d.dm().deserialize(json);
9 });
4. 单机管理
提前信息后WMS实现货物入库或出库。
入库逻辑和出库逻辑需要分别实现，整个过程涉及货物在输送出上的移动动画、堆垛机的移动动画、堆垛机的取货放货动画。
货物入库核心代码：
1 // 货物入库
2 function goodsIn(code) {
3 var good = dataModel.getDataByTag(code)
4 if (!good) {
5 console.warn('货物编号不存在：', code)
6 return
7 }
8 ////////// 入库口移动至输入机 //////////////
9
10 var row = good.a('row')
11 var col = good.a('col')
12 var floor = good.a('floor')
13
14 if (col <= colSize / 2) { // 左侧
15 let goodP3 = dataModel.getDataByTag('入口1').p3()
16 goodP3[1] = floorBaseElevation
17 good.p3(goodP3)
18 } else { // 右侧
19 let goodP3 = dataModel.getDataByTag('入口2').p3()
20 goodP3[1] = floorBaseElevation
21 good.p3(goodP3)
22 }
23 good.s('3d.visible', true)
24 good.setHost(null)
25
26 if (col <= colSize / 2) { // 左侧
27 let refer = dataModel.getDataByTag('LeftFront')
28 moveZTo(good, refer.getY(), null, () => {
29 moveXTo(good, refer.getX(), null, () => { // 左移
30 // 后移至货架水平位置
31 let targetY = null
32 if (Math.floor(row % 2) === 0) { // 偶数列
33 targetY = good.a('p3')[2] + 300
34 } else {
35 targetY = good.a('p3')[2]
36 }
37 moveZTo(good, targetY, null, () => {
38 // 右移至货架边缘
39 moveXTo(good, dataModel.getDataByTag('升降机L' + row + ':底座').getX(), null, () => {
40 // 离开输送机移动至货架
41 goodToShelve(good)
42 })
43 })
44 })
45 })
46
47 } else { // 右侧
48 let refer = dataModel.getDataByTag('RightFront')
49 moveZTo(good, refer.getY(), null, () => {
50 moveXTo(good, refer.getX(), null, () => { // 右移
51 // 后移至货架水平位置
52 let targetY = null
53 if (Math.floor(row % 2) === 0) { // 偶数列
54 targetY = good.a('p3')[2] + 300
55 } else {
56 targetY = good.a('p3')[2]
57 }
58 moveZTo(good, targetY, null, () => {
59 // 左移至货架边缘
60 moveXTo(good, dataModel.getDataByTag('升降机R' + row + ':底座').getX(), null, () => {
61 // 离开输送机移动至货架
62 goodToShelve(good)
63 })
64 })
65 })
66 })
67 }
68 }
货物出库核心代码：
1 // 货物出库
2 function goodsOut(code) {
3 var good = dataModel.getDataByTag(code)
4 if (!good) {
5 console.warn('货物编号不存在：', code)
6 return
7 }
8
9 var row = good.a('row')
10 var col = good.a('col')
11 var floor = good.a('floor')
12
13 let elevatorRow = parseInt((row + 1) / 2)
14 let isLeft = col <= (colSize / 2)
15 let elevator = isLeft ? dataModel.getDataByTag("升降机L" + elevatorRow) : dataModel.getDataByTag("升降机R" + elevatorRow)
16
17 let elevatorX = elevator.getX()
18 let x = (good.getX() - elevatorX)
19 // 水平移动
20 ht.Default.startAnim({
21 duration: Math.abs(col - elevator.a('col')) * animationUnit, // 动画周期毫秒数，默认采用`ht.Default.animDuration`
22 action: function (v, t) {
23 elevator.setX(elevatorX + x * v)
24 },
25 finishFunc: function () {
26 elevator.a('col', col)
27
28 // 底座垂直移动
29 let base = dataModel.getDataByTag(elevator.getTag() + ":底座")
30 if (floor > 1) {
31 baseUp(base, good, floor, true, false)
32 } else {
33 // 取货，出货
34 startHandAnimation(base, good, floor, true, false)
35 }
36 }
37 });
38 }
堆垛机上升动画实现：
1 function elevatorIn(elevator, good) {
2 console.log('elevatorIn')
3 var row = good.a('row')
4 var col = good.a('col')
5 var floor = good.a('floor')
6
7 let elevatorX = elevator.getX()
8 let goodP3 = good.a('p3')
9 let x = (goodP3[0] - elevatorX)
10 // 水平移动
11 ht.Default.startAnim({
12 duration: Math.abs(col - elevator.a('col')) * animationUnit, // 动画周期毫秒数，默认采用`ht.Default.animDuration`
13 action: function (v, t) {
14 elevator.setX(elevatorX + x * v)
15 },
16 finishFunc: function () {
17 elevator.a('col', col)
18
19 // 底座垂直移动
20 let base = dataModel.getDataByTag(elevator.getTag() + ":底座")
21 if (floor > 1) {
22 baseUp(base, good, floor, false, true)
23 } else {
24 // 送货
25 startHandAnimation(base, good, floor, false, true)
26 }
27 }
28 });
29 }
堆垛机动画：
1 // 堆垛机出货
2 function elevatorOut(elevator, good, goodIn) {
3 console.log('elevatorOut')
4 let elevatorX = elevator.getX()
5 let isLeft = elevator.getTag().startsWith('升降机L')
6 let start = isLeft ? LeftElevatorX : RightElevatorX
7 let xOffset = (start - elevatorX)
8
9 let t = isLeft ? Math.abs(elevator.a('col')) : Math.abs(colSize - elevator.a('col') + 1)
10 // 水平移动
11 ht.Default.startAnim({
12 duration: t * animationUnit, // 动画周期毫秒数，默认采用`ht.Default.animDuration`
13 action: function (v, t) {
14 elevator.setX(elevatorX + xOffset * v)
15 },
16 finishFunc: function () {
17 elevator.a('col', isLeft ? 0 : (colSize + 1))
18 if (!goodIn) {
19 startHandAnimation(dataModel.getDataByTag(elevator.getTag() + ":底座"), good, 1, false, goodIn)
20 }
21 }
22 })
23 }
24
25 // 堆垛机取货
26 function elevatorIn(elevator, good) {
27 console.log('elevatorIn')
28 var row = good.a('row')
29 var col = good.a('col')
30 var floor = good.a('floor')
31
32 let elevatorX = elevator.getX()
33 let goodP3 = good.a('p3')
34 let x = (goodP3[0] - elevatorX)
35 // 水平移动
36 ht.Default.startAnim({
37 duration: Math.abs(col - elevator.a('col')) * animationUnit, // 动画周期毫秒数，默认采用`ht.Default.animDuration`
38 action: function (v, t) {
39 elevator.setX(elevatorX + x * v)
40 },
41 finishFunc: function () {
42 elevator.a('col', col)
43
44 // 底座垂直移动
45 let base = dataModel.getDataByTag(elevator.getTag() + ":底座")
46 if (floor > 1) {
47 baseUp(base, good, floor, false, true)
48 } else {
49 // 送货
50 startHandAnimation(base, good, floor, false, true)
51 }
52 }
53 });
54 }
堆垛机底座和抓手动画：
1 // 抓手动画
2 function startHandAnimation(baseNode, goodNode, floor, pick, goodIn) {
3 console.log('startHandAnimation:', floor, pick, goodIn)
4 let elevator = baseNode.getParent()
5 // 抓手移动的方向
6 let isBack = goodNode.a('row') === elevator.a('row') * 2
7 baseNode.eachChild(hand => {
8 var z = hand.getY()
9 // 抓手动画
10 ht.Default.startAnim({
11 duration: 4000, // 动画周期毫秒数，默认采用`ht.Default.animDuration`
12 easing: function (t) {
13 if (t < 0.5) {
14 return t * 2
15 } else {
16 return (1 - t) * 2
17 }
18 },
19 action: function (v, t) {
20 if (t >= 0.5) {
21 if (pick) {
22 goodNode.setHost(hand)
23 } else {
24 goodNode.setHost(null)
25 }
26 }
27 if (goodIn) {
28 if (pick) { // 取货
29 hand.setY(z + 150 * v)
30 } else { // 放货
31 if (isBack) {
32 hand.setY(z - 150 * v)
33 } else {
34 hand.setY(z + 150 * v)
35 }
36 }
37 } else {
38 if (pick) { // 取货
39 if (isBack) {
40 hand.setY(z - 150 * v)
41 } else {
42 hand.setY(z + 150 * v)
43 }
44 } else { // 放货
45 hand.setY(z - 150 * v)
46 }
47 }
48 },
49 finishFunc: function () {
50 if (baseNode.a('floor') > 1) {
51 baseDown(baseNode, goodNode, floor, pick, goodIn)
52 } else {
53 if (elevator.a('col') === 0 || elevator.a('col') === colSize + 1) {
54 if (goodIn) { // 入库: 已完成取货动作, 升降机进入货架
55 elevatorIn(elevator, goodNode)
56 } else { // 出库：已将货物放置到输送机
57 // 移动到小车位置
58 startGoodOutAnimation(goodNode)
59 }
60 } else { // 将升降机移到货架外
61 elevatorOut(elevator, goodNode, goodIn)
62 }
63 }
64 }
65 });
66 })
67 }
68
69 // 底座上升
70 function baseUp(baseNode, goodNode, floor, pick, goodIn) {
71 console.log('底座上升:', baseNode.getTag())
72
73 var baseElevation = baseNode.getElevation()
74
75 let goodP3 = goodNode.a('p3')
76 var elevationOffset = (goodP3[1] - baseElevation)
77 // 上升
78 ht.Default.startAnim({
79 duration: (floor - 1) * animationUnit,
80 action: function (v, t) {
81 baseNode.setElevation(baseElevation + elevationOffset * v)
82 },
83 finishFunc: function () {
84 baseNode.a('floor', floor)
85 startHandAnimation(baseNode, goodNode, floor, pick, goodIn)
86 }
87 });
88 }
5. 主3D场景
以 3D 的方式显示仓库立体场景，包括货架、货物、堆垛机、穿梭车、输送机等。支持常用视角切换，提供侧视、俯视、正视、斜视。当选中某个货物时。
视角切换图标是基于 HT for Web 交互功能定制的图标：
1 const g2d = new ht.graph.GraphView()
2 g2d.setPannable(false)
3 g2d.setRectSelectable(false)
4 g2d.handleScroll = function () {}
5
6 ht.Default.xhrLoad('displays/视角切换.json', function (json) {
7 g2d.dm().deserialize(json);
8 });
9
10 g2d.lookAtFront = function () {
11 eventbus.trigger('g3d.lookAtFront')
12 }
13 g2d.lookAtLean = function () {
14 eventbus.trigger('g3d.lookAtLean')
15 }
16 g2d.lookAtLeft = function () {
17 eventbus.trigger('g3d.lookAtLeft')
18 }
19 g2d.lookAtTop = function () {
20 eventbus.trigger('g3d.lookAtTop')
21 }
可显示货物的详细信息（托盘号、货位、批号、物料代码、物料名称、单位、数量、备注、堆垛机号、质量状态）：
借助 HT for Web 的数据驱动模型以及动画API，可以很容易地控制货物出库出库动作，并与后台数据绑定。可以模拟堆垛机入库取货，货物在输送机上移动并出库，货物经过检测门入库等动画效果。
http://www.cgpwyj.cn/
http://www.peacemind.com.cn/
http://www.tasknet.com.cn/
http://www.ownbar.cn/
http://www.shtarchao.net.cn/
http://www.metroworld.com.cn/
http://www.cngodo.cn/
http://www.gzrdbp.cn/
http://www.dnapt.cn/
http://www.ncxlk.cn/
http://www.zgxxyp.cn/
http://www.sjjdvr.cn/
http://www.sujinkeji.cn/
http://www.zsjxbd.cn/
http://www.yesgas.cn/
http://www.quickpass.sh.cn/
http://www.jspcrm.cn/
http://www.yjdwpt.cn/
http://www.henanwulian.cn/
http://www.hhrshh.cn/
http://www.gpgold.cn/
http://www.jingzhuiyou.cn/