基于WebGL的3D立库可视化系统设计与实现

信息技术

XINXUISHU

2021

年第

3

期

基于

WebGL

的

3D

立库可视化

系统设计与实现

尹千慧

-

贺鹏飞"

，

王玺联

S

孟令增

J

王海洋

I

(1.

烟台大学光电信息科学技术学院

，

山东烟台

264005

；

2.

烟台中科新智有限公司

，

山东烟台

264006)

摘

要

：

针对当前扩大化和普及化的仓储物流

，

提出了一种

3D

自动化立体仓库可视化系统的实现方

案

，

用以解决仓储系统中遇到的数据不直观的问题

。

该系统采用

JavaScript

编程语言

，

以

Three,

js

引

擎为基础

，

构建了基于

WebGL

的三维自动化立体仓库的可视化系统

，

该系统能有效直观的进行仓储

管理

，

适合现代化仓储企业的管理需求

。

关键词

：

WebGL

；

自动化立体仓库

；

Three,

js

；

三维模拟

中图分类号

：

TP311.

11

文献标识码

：

A

文章编号

：1009

-2552(2021)03

-0084-05

DOI

：

10.

13274/j.

cnki.

hdzj.

2021.03.

016

Design

and

implementation

of

3D

AS/RS

visualization

system

based

on

WebGL

YIN

Qian-hui

1

,

HE

Peng-fei

1

,

WANG

Xi-lian

2

,

MENG

Ling-zeng

1

,

WANG

Hai-yang

1

(1.

School

of

Opto-electronic

Information

Science

and

Technology

Yantai

University,

Yantai

264005,

Shandong

Province

,

China

；

2.

Yantai

Zhongkexinzhi

Software

Co.

,

Ltd

・

,

Yantai

264006,

Shandong

Prov

­

ince

,

China)

Abstract

:

In

view

of

the

expanding

and

popular

warehousing

logistics

,

a

3D

Automated

Storage

and

Re

­

trieval

System

(AS/RS)

visualization

design

method

is

proposed

,

it

is

used

to

solve

the

problem

of

unintui

­

tive

data

encountered

in

the

AS/RS

・

The

system

uses

JavaScript

and

Three,

js

technology

to

build

3D

AS/

RS

visualization

system

based

on

WebGL

・

It

makes

the

warehouse

management

intuitively

and

effectively.

Therefore

,

it

'

s

suitable

for

the

management

needs

of

modern

warehousing

enterprises

・

Key

words

:

WebGL

；

AS/RS

；

Three,

js

；

3D

simulation

o

引言

随着经济发展

，

物资种类的不断增加对现代

化仓储管理提岀了新的要求

，

构造一个实时

、

直

观

、

跨平台的三维可视化管理系统的需求越发迫

研究人员就不同技术进行了探讨

。

比如

，

杨迎春

使用

Unity3D

技术搭建了仓储町视化编辑器

，

满

足了用户搭建不同三维仓库的需求⑴

。

王矗使

用

OSG

技术对电力设备仓库进行了三维可视化

研究

，

实现了自动布局

、

路径规划和漫游等功

能⑵

。

任铜擘使用

RSTestStand

软件和组态软件

切

。

目前针对三维自动化立体仓库系统的开发,

作者简介

：

尹千慧

(

1997

-

),

女

，

在读硕士研究生

，

研究方向为

系统开发

。

*

通讯作者

：

贺鹏飞

(

1980

-

),

男

，

博士

，

研究方向为工业互联

网

、

无线体域网

、

短距离无线通信

、

宽带接入网和电

实现了立体仓库的三维监控和管理功能⑶

。

但

以上仓储系统需要下载插件或对设备要求较高

，

具有一定的局限性

。

本文在现有仓储管理系统的基础上

，

结合

磁兼容

。

—

84

—

基于

WebGL

的

3D

立库可视化系统设计与实现

—

—

尹千慧

等

WebGL

技术⑷

,

利用轻量型的

Three,

js

库

，

无需

安装插件即可实现三维可视化的立体仓库系统

。

染的物体加载到网页中

，

可以在网页中展示一个

精美的三维场景

。

Three,

js

的各组件之间的关系

本系统拟提供一种实时直观的自动化立体仓库的

动态管理方案

，

将自动化立体仓库与

WebGL

等技

术结合

，

使仓库作业在

Web

端进行

3D

的动态可

视化展示

。

1

相关技术介绍

1.1

自动化立体仓库

自动化立体仓库

(

Automated

Storage

and

Re

­

trieval

System

,

简称

AS/RS)

⑸是指以计算机控制

技术为核心,采用高层立体货架来对物资实现存

储,用自动控制的堆垛机来进行存取作业的仓

库⑹

。

2

三维立库可视化系统设计

自动化立体仓库由货物识别系统

、

计算机管

理系统

、

立体式存储货架

、

输送机

、

AGV

(

Automa

­

2.1

系统架构

系统采用

B/S

(

Browser/Server)

模式的三层

架构

［

⑹

。

在

B/S

模式中

，

大部分的业务逻辑和数

ted

Guided

Vehicle)

、

堆垛机等部分组成

"

」

。

货物

识别系统主要是对进岀库货物进行信息识别

，

计

算机管理系统对识别后的货物进行数据管理

，输

据操作都在服务器中实现,浏览器端主要负责接

收用户指令以及显示服务器针对用户指令的处理

送机和

AGV

则把货物送到指定位置

，

堆垛机将货

物从指定位置运至指定仓位

。

自动化立体仓库具

结果

。

该模式的使用范围广

、

可移植性强

、

维护成

本低

，

具有广阔的前景

。

三层架构将系统划分为三个层次

，

即表示层

、

业务逻辑层和数据访问层⑴

〕

。

表示层负责三维

有空间利用率高

、

仓储速度快

、

可靠性强

、

储存量

大等特征

。

1

.

2

WebGL

三维可视化技术

在互联网上建立三维场景

，

实现三维展示的

立体仓库的展示

、

接收用户的请求以及返回用户

请求的处理结果;业务逻辑层是整个系统的核心

部分

，

负责实现业务的具休的逻辑功能

，

其中包含

技术统称为

Web3D

技术⑻

。

目前,常见的

Web3D

技术有

：

WebGL

、

VRML

、

Java3

D

、

Virtools

、

Flash3

D

、

Converse3D

和

Unity3D

等

。

本系统使用

WebGL

三维绘图规范来实现自动化立体仓库的三维可

系统的功能模块和三维可视化模块

；

数据访问层

则负责对数据库进行查询

、

添加

、更新和删除等操

作

。

具体部署如图

2

所示

。

请求

/

应答

视化

。

WebGL

是一种

3D

绘图标准

，

具有开源

、

跨平

台

、

跨浏览器的特性

。

WebGL

为

HTML5

Canvas

表示层

提供硬件

3D

加速渲染

，

借助客户端的系统显卡

在浏览器中展示

3D

场景

，

避免了网页开发时使

¥

业务逻辑层

用户

用渲染插件的麻烦

，

可被用于创建具有复杂

3D

结构的网站页面

。

其中的

Three,

js

开发引擎

，

对

WebGL

的底层的

API

进行了封装,在保证效果的

¥

数据访问层

查询

、

添加

更新

、

删除

数据库

图

2

系统架构

前提下

，

降低了

WebGL

的使用难度

，

提升了开发

效率

。

Three,

js

库提供了大量封装好的功能

，

通过

将相机

、

渲染器和场景这三个组件⑼以及需要渲

—

85

—

基于

WebGL

的

3D

立库可视化系统设计与实现

—

—

尹千慧

等

2.2

系统功能设计

②

场景

、

相机

、

灯光等组件实例化与配置:场

以自动化立体仓库的硬件设备为基础

，

结合

景是一个容器

,

主要用来添加用于保存

、

跟踪所要

渲染的物体和使用的光源以及需要呈现的对象

WebGL

技术构建

3D

自动化立体仓库可视化系

统

。

系统采用模块化设计的方法

，

以便于对于模

等

。

Three,

js

中提供了两种相机

：

正交投影摄像

机和透视投影摄像机

。

在同一场景中

，

透视投影

块化功能的组合和维护

。

为给用户提供直观的展示方式和沉浸式的管

相机可以模拟出人眼的近大远小的自然效果

，

而

使用正交投影相机时

，

模型被渲染出来的尺寸都

理方式

,

3D

立库可视化系统在功能上可分为场景

展示部分和业务管控部分

。

本文主要介绍场景展

是一样的

,

对渲染效果没有影响

，

因此在可视化的

研究中一般使用透视投影相机

。

Three,

js

中提供

了四种基础光源:环境光

、

点光源

、

聚光灯和平行

示部分

，

具体如图

3

所示

。

灯

。

为了达到更加逼真的效果

，

针对不同的模型

可以选择不同类型光源的不同组合

。

③

载入模型

、

贴图:Three,

js

屮有很多基础的

几何体和材质

，

此外

Three,

js

针对

OBJ

、

JSON

、

Collada

等不同的三维模型格式

，

提供了相对应的

模型加载器

，

同时为了使场景效果更佳真实

，

Three,

js

允许多种格式的图片通过贴图方式作为

模型材质

,

根据模型的格式来选择加载器

,

使用模

型的

URL

来加载模型并使用冋调函数对模型进

行相对应的配置和渲染

。

④

渲染:通过渲染可以使三维模型映射在二

维平面上

［

⑶

，

使之可以在电脑屏幕上展示

。

在渲

图

3

系统功能设计

染函数

renclei'

()

中调用

requestAnimationFrame

()

方法对场景进行循环渲染

，

为了获得更好的渲染

场景展示部分是以

Web

网页的形式通过文

字

、

图片

、

动画

、

3D

模型等向用户展示自动化立体

仓库

。

该部分以自动化立体仓库设备为模板

，

通

效果和更少地消耗

CPU

资源

，

在此使用

WebGL-

Renderer

来对场景进行渲染

。

三维场景实现的具

体过程如图

4

所示

。

过

Blender,3ds

MAX

等模型绘制软件将货架

、

堆

垛机

、

AGV

、

输送带等设备模型化

，

然后加载到

Three,

js

中使用

WebGL

渲染器对

3D

图形和动画

进行渲染,最终以

Web

网页的形式展示给用户

。

3

三维立库可视化系统实现

3.1

自动化立体仓库三维场景

3.1.1

三维场景的实现

通过

Three,

js

搭建的三维页面中有四个基本

组件:场景

、

渲染器

、

摄像机和模型对象

。

Three,

js

搭建三维页面的具体步骤如下

：

①

入库

：

在

＜

body

＞

部分的

＜

script

＞

标签

引

中导入

Three,

js

库

［

⑵以及程序需要的

JS

文件,

同时在

＜

body

＞

部分创建

＜

div

〉

标签存放渲染

器的输出

。

图

4

场景实现流程图

—

86

—

基于

WebGL

的

3D

立库可视化系统设计与实现

—

—

尹千慧

等

3.1.2

场景平移

、

旋转和缩放

Three,

js

中可以通过使用相机控件或添加事

件监听器的方法来实现场景的平移

、

旋转和缩放

。

信息不一致时报错

，

货物原路返回至原库位

。

出

入库的流程如图

5

所示

。

本系统中使用

Three,

js

中提供的相机控件

［

⑷

，

利

用键盘或鼠标来控制场景中的摄像机

，

使摄像机

能够平稳地移动或旋转

，

从而使场景具有更加逼

真的动画效果

。

本系统使用轨迹球控制器和循环渲染的方

法,通过对鼠标的操纵来实现三维场景的平移

、

旋

转和缩放等一系列效果

。

其实现的过程如下

：

①

在

＜

head

〉

标签中引入

TrackballControls.

JS

文件

。

②

定义变量

，

创建控制器将其绑在摄像

机上

。

③

设置平移

、

旋转和缩放的速度

。

④

循环渲染更新

。

在渲染函数中更新页面状态

，

然后调用时钟

图

5

出入库流程

对象的

getDelta(

)

方法来获得调用的时间间隔

，

即一个渲染循环需要的时间

，

该时间间隔作为参

3.2.2

岀入库动画创建

当使用外部软件创建动画时

，

通常会有变形

动画和骨骼动画两种动画定义方法

。

数对控制器进行更新

,

最终引用

requestAnimation-

Frame(

)

方法并对场景和相机进行循环渲染

。

此

使用变形动画时

,

对于变形目标

,

所有顶点的

关键位置都会被存储下来,将所有的顶点从一个

关键位置移动到另外一个定义好的关键位置

，

并

外

，

为了在页面中显示帧数

，

在

＜

head＞

标签中引

入初始化帧统计模块

。

3.2

自动化立体仓库的出入库

重复这一过程

。

变形动画很容易获取良好的工作

3.2.

1

出入库流程

在自动化立体仓库作业中

,

出入库

「

⑸是主要

的作业活动

。

本系统按照堆垛机单出入库模

式

［

⑹进行作业

，

即:堆垛机从入口处将货物送至

指定库位

、

堆垛机从指定货位将货物运送至入口

模型

,

但由于需要重复存储顶点的位置

,

对于大型

网格和大型动画来说

，

模型文件会变得非常大

。

使用骨骼动画

〔

⑻时需要定义骨骼

，

并将顶点

绑定到特定的骨头上

。

当移动一块骨头时

，

任何

与之相连的骨头都会做相应的移动

，

同时骨头上

处依次进行

。

当有货物入库时

，

货物依次进行质量抽检

、

数

绑定的顶点也会随之移动,但骨骼动画面临着如

何从三维程序中较好地导出数据的问题

。

本系统使用

Blender

创建骨骼动画来实现出

量清点

，

完成后将货物置于空托盘中

，

通过输送设

备(输送机

、

AGV)

送至货物识别处

，

对货物的信

入库,并将其在放松状态时导岀为

Collada

格式的

模式

,

使用

ColladaLoader

来将动画模型加载到

Three,

js

中

。

为了使动画动起来

，

共同使用

息进行扫描识别后将结果送至计算机管理系统,

计算机根据结果进行库位分配同时控制堆垛机将

货物放至相应库位⑴

］

。

THREE.

.

AnimationClip

和

THREE.

ClipAction

来告诉

Three,

js

如何运行导入

的动画，

然后在渲染循环中调用

mixer,

update

()

当有货物出库时

，

计算机通过出库单确定货

物库位

，

同时控制堆垛机将相应库位的货物取出

送至输送机

，

经过货物识别确认信息无误后由

AGV

将货物输送至拣货处

，

若识别信息与出库单

函数

，

最后在渲染循环中调用

requestAnimation-

Frame(

)

函数向浏览器提供一个回调函数

render

,

—

87

—

基于

WebGL

的

3D

立库可视化系统设计与实现

—

—

尹千慧

等

在这个回调函数中完成一帧的绘制操作

。

其中

实现

[D].

沈阳

：

中国科学院研究生院(沈阳计算技

术研究所

),2016.

[2]

王矗•电力设备仓库三维可视化系统的研究与实现

Collada

格式文件不仅包含模型

，

还包含相机

、

光

源

、

材质和动画等场景

。

3.3

效果展示

[D].

北京:华北电力大学(北京

),2018.

[3]

任铜擘.自动化立体仓库三维可视化监控系统设计

系统的实验环境为

AMD

A8-5600K

APU

with

Radeon

(

tm

)

HD

Graphics

3.

60

GHz

的处理器

，

运

[D].

保定:河北大学

,2013.

[4]

聂帅

，

秦爽

，

麦文.基于

WebGL

技术三维模型呈现研

行内存为

4.

00GB

的

64

位操作系统的

PC机

，选

究

[J]

•计算机产品与流通

,2019(7)

=87

-89.

[5]

周奇才.基于现代物流的自动化立体仓库系统

(

AS/

RS)

管理及控制技术研究

[D].

成都:西南交通大学

，

用

WebStorm

2017

开发工具

，

运行环境为

Win­

dows

7

平台下的

Coogle

Chrome

84.

0.4147.

105

o

系统能较好地展示自动化立体仓库场景

，

可

2002.

[6]

张欢欢.自动化立体仓库的若干关键技术与仿真

以从数据库中获取库位使用情况,还可以通过查

询按钮查询货物库存信息

，

同时可以通过出库

、

入

库按钮来设置订单信息对出入库进行控制

，

并且

成功借助性能检测库

Stats

对动画运行时的帧数

[D].

杭州

：

浙江大学

,200&

[7]

李西刚.自动化立体仓库中堆垛机结构设计与控制

技术研究

[

D]

.

沈阳:沈阳理工大学

,2014.

[8]

韩义.

Web3D

及

Web

三维可视化新发展-以

WebGL

进行监测

。

实验结果如图

6

所示

。

和

03

D

为例

[J].

科技广场

,2010,102(5):81

-86.

[

9

]

刘冬林

，

樊留群,刘广杰

，

等.基于

Three,

js

的

COLLA

­

DA

机器人模型在线运动学仿真

[J].

制造业自动化

，

2020,42(2)

：

82

-85.

[10]

李书杰

，

李志刚.

B/S

三层体系结构模式

[J].

河北理

工学院学报

,2002(

S1)

：

25

-28,34.

[11]

王进

.B/S

模式下的三层架构模式

[J].

软件导刊

，

2011,10(3)

：

30

-31.

[12]

韩成.基于

WebGL

的三维建筑模型町视化系统的设

计与实现

[D].

南京:东南大学

,2019.

[13]

张文娟

，

吴琼

，

曹欣然•基于

WebGL

的三维落叶场景

图

6

三维立库系统效果图

仿真

[J].

计算机技术与发展

,2018,28(6):165

-

169.

[14]

王鹏飞.面向虚拟实验的

WebGL

开发框架的研究

4

结束语

本文根据自动化立体仓库的结构特点及硬件

设施

，

结合

WebGL

三维绘图标准

，

运用

Three,

js

[D].

北京:北京邮电大学

,2019.

[15]

于新平.自动化立体仓库系统与控制分析

[J]

•中国

搭建自动化立体仓库的三维可视化网页平台

，

研

储运

,2019,227(8)

：

127-129.

[16]

韩东亚

，

陈然

，

余玉刚

，

等.自动化立体仓库中出入

究分析了三维场景的搭建

，

阐述了实现自动化立

体仓库三维出入库动画的技术和方法

。

设计实现

库任务顺序与出库位置选择集成优化研究

[J].

中

国管理科学

,2020

：

1

-11.

[17]

陈玉林

，

粟敏

，

杨川福

，

等.自动化立体仓库的三维

的系统与传统

3D

客户端相比

，

具有跨平台

、

无需

插件等优势

，

解决了传统仓储管理形式单一

、

数据

建模设计

[

J

]

•

科技视界

,2016(18):130.

[18]

王军,禹东川

•

3D

骨骼动画的算法分析与

WebGL

实

繁琐和仓储管理系统易用性弱的问题

，

实现了网

页

3D

的数据可视化

，

既方便了仓储管理员的丁作,

又提高了仓储作业的效率和仓储管理的直观性

。

现

[J].

自动化与仪器仪表

,2015(4)

：

199

-

201,

204.

参考文献

：

[1]

杨迎春•基于

Unity3D

的仓储可视化编辑器的设计与

(责任编辑

：

丁一元)

—

88

—