信息技术XINXUISHU2021年第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/jki.hdzj.2021.03.016
Design and implementation of3D AS/RS visualization system based on WebGL
YIN Qian-hui1,HE Peng-fei1,WANG Xi-lian2,MENG Ling-zeng1,WANG Hai-yang1
(1.School of Opto-electronic Information Science and Technology Yantai University,Yantai264005, Shandong Province,China；2.Yantai Zhongkexinzhi Software Co.,Ltd・,Yantai264006,Shandong Prov­ince,China)
Abstract:In view of the expanding and popular warehousing logistics,a3D 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 build3D 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引言
随着经济发展，物资种类的不断增加对现代化仓储管理提岀了新的要求，构造一个实时、直观、跨平台的三维可视化管理系统的需求越发迫切。目前针对三维自动化立体仓库系统的开发,
作者简介：尹千慧(1997-)，女，在读硕士研究生，研究方向为MES.WMS系统开发。
*通讯作者：贺鹏飞(1980-)，男，博士，研究方向为工业互联网、无线体域网、短距离无线通信、宽带接入网和电
磁兼容。研究人员就不同技术进行了探讨。比如，杨迎春使用Unity3D技术搭建了仓储町视化编辑器，满足了用户搭建不同三维仓库的需求⑴。王矗使用OSG技术对电力设备仓库进行了三维可视化研究，实现了自动布局、路径规划和漫游等功能⑵。任铜擘使用RSTestStand软件和组态软件实现了立体仓库的三维监控和管理功能⑶。但以上仓储系统需要下载插件或对设备要求较高，具有一定的局限性。
本文在现有仓储管理系统的基础上，结合
基于WebGL的3D立库可视化系统设计与实现—
—尹千慧等
WebGL技术⑷，利用轻量型的Three,js库，无需安装插件即可实现三维可视化的立体仓库系统。本系
统拟提供一种实时直观的自动化立体仓库的动态管理方案，将自动化立体仓库与WebGL等技术结合，使仓库作业在Web端进行3D的动态可视化展示。
1相关技术介绍
1.1自动化立体仓库
自动化立体仓库(Automated Storage and Re­trieval System，简称AS/RS)⑸是指以计算机控制技术为核心，采用高层立体货架来对物资实现存储，用自动控制的堆垛机来进行存取作业的仓库⑹。
自动化立体仓库由货物识别系统、计算机管理系统、立体式存储货架、输送机、AGV(Automa­ted Guided Vehicle)、堆垛机等部分组成"」。货物识别系统主要是对进岀库货物进行信息识别，计算机管理系统对识别后的货物进行数据管理，输送机和AGV则把货物送到指定位置，堆垛机将货物从指定位置运至指定仓位。自动化立体仓库具有空间利用率高、仓储速度快、可靠性强、储存量大等特征。
1.2WebGL三维可视化技术
在互联网上建立三维场景，实现三维展示的技术统称为Web3D技术⑻。目前，常见的Web3D 技术有：WebGL、VRML、Java3D、Virtools、Flash3D、Converse3D和Unity3D等。本系统使用WebGL 三维绘图规范来实现自动化立体仓库的三维可视化。
WebGL是一种3D绘图标准，具有开源、跨平台、跨浏览器的特性。WebGL为HTML5Canvas 提供硬件3D加速渲染，借助客户端的系统显卡在浏览器中展示3D场景，避免了网页开发时使用渲染插件的麻烦，可被用于创建具有复杂3D 结构的网站页面。其中的Three,js开发引擎，对WebGL的底层的API进行了封装，在保证效果的前提下，降低了WebGL的使用难度，提升了开发效率。
Three,js库提供了大量封装好的功能，通过将相机、渲染器和场景这三个组件⑼以及需要渲染的物体加载到网页中，可以在网页中展示一个精美的三维场景。Three,js的各组件之间的关系
2三维立库可视化系统设计
2.1系统架构
系统采用B/S(Browser/Server)模式的三层架构［⑹。在B/S模式中，大部分的业务逻辑和数据操作都在服务器中实现，浏览器端主要负责接收用户指令以及显示服务器针对用户指令的处理结果。该模式的使用范围广、可移植性强、维护成本低，具有广阔的前景。
三层架构将系统划分为三个层次，即表示层、业务逻辑层和数据访问层⑴〕。表示层负责三维立体仓库的展示、接收用户的请求以及返回用户请求的处理结果；业务逻辑层是整个系统的核心部分，负责实现业务的具休的逻辑功能，其中包含系统的功能模块和三维可视化模块；数据访问层则负责对数据库进行查询、添加、更新和删除等操作。具体部署如图2所示。
表示层
请求/应答
¥用户业务逻辑层
¥
数据访问层
查询、添加
更新、删除
数据库
图2系统架构
基于WebGL的3D立库可视化系统设计与实现—
unity3d animation
—尹千慧等
2.2系统功能设计
以自动化立体仓库的硬件设备为基础，结合WebGL技术构建3D自动化立体仓库可视化系统。系统采用模块化设计的方法，以便于对于模块化功能的组合和维护。
为给用户提供直观的展示方式和沉浸式的管理方式,3D立库可视化系统在功能上可分为场景展示部分和业务管控部分。本文主要介绍场景展示部分，具体如图3所示。
图3系统功能设计
场景展示部分是以Web网页的形式通过文字、图片、动画、3D模型等向用户展示自动化立体仓库。该部分以自动化立体仓库设备为模板，通过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〉标签存放渲染器的输出。
②场景、相机、灯光等组件实例化与配置：场景是一个容器，主要用来添加用于保存、跟踪所要渲染
的物体和使用的光源以及需要呈现的对象等。Three,js中提供了两种相机：正交投影摄像机和透视投影摄像机。在同一场景中，透视投影相机可以模拟出人眼的近大远小的自然效果，而使用正交投影相机时，模型被渲染出来的尺寸都是一样的，对渲染效果没有影响，因此在可视化的研究中一般使用透视投影相机。Three,js中提供了四种基础光源：环境光、点光源、聚光灯和平行灯。为了达到更加逼真的效果，针对不同的模型可以选择不同类型光源的不同组合。
③载入模型、贴图:Three,js屮有很多基础的几何体和材质，此外Three,js针对OBJ、JSON、Collada等不同的三维模型格式，提供了相对应的模型加载器，同时为了使场景效果更佳真实，Three,js允许多种格式的图片通过贴图方式作为模型材质，根据模型的格式来选择加载器，使用模型的URL来加载模型并使用冋调函数对模型进行相对应的配置和渲染。
④渲染：通过渲染可以使三维模型映射在二维平面上［⑶，使之可以在电脑屏幕上展示。在渲
染函数renclei'()中调用requestAnimationFrame()方法对场景进行循环渲染，为了获得更好的渲染效果和更少地消耗CPU资源，在此使用WebGL- Renderer来对场景进行渲染。三维场景实现的具体过程如图4所示。
图4
场景实现流程图
基于WebGL的3D立库可视化系统设计与实现—
—尹千慧等
3.1.2场景平移、旋转和缩放
Three,js中可以通过使用相机控件或添加事件的方法来实现场景的平移、旋转和缩放。本系统中使用Three,js中提供的相机控件［⑷，利用键盘或鼠标来控制场景中的摄像机，使摄像机能够平稳地移动或旋转，从而使场景具有更加逼真的动画效果。
本系统使用轨迹球控制器和循环渲染的方法，通过对鼠标的操纵来实现三维场景的平移、旋转和缩放等一系列效果。其实现的过程如下：
①在＜head〉标签中引入TrackballControls. JS文件。
②定义变量，创建控制器将其绑在摄像机上。
③设置平移、旋转和缩放的速度。
④循环渲染更新。
在渲染函数中更新页面状态，然后调用时钟对象的getDelta()方法来获得调用的时间间隔，即一个渲染循环需要的时间，该时间间隔作为参数对控制器进行更新，最终引用requestAnimation-Frame()方法并对场景和相机进行循环渲染。此外，为了在页面中显示帧数，在＜head＞标签中引入初始化帧统计模块。
3.2自动化立体仓库的出入库
3.2.1出入库流程
在自动化立体仓库作业中，出入库「⑸是主要的作业活动。本系统按照堆垛机单出入库模式［⑹进行作业，即：堆垛机从入口处将货物送至指定库位、堆垛机从指定货位将货物运送至入口处依次进行。
当有货物入库时，货物依次进行质量抽检、数量清点，完成后将货物置于空托盘中，通过输送设备(输送机、AGV)送至货物识别处，对货物的信息进行扫描识别后将结果送至计算机管理系统，计算机根据结果进行库位分配同时控制堆垛机将货物放至相应库位⑴］。
当有货物出库时，计算机通过出库单确定货物库位，同时控制堆垛机将相应库位的货物取出送至输送机，经过货物识别确认信息无误后由AGV将货物输送至拣货处，若识别信息与出库单信息不一致时报
错，货物原路返回至原库位。出入库的流程如图5所示。
图5出入库流程
3.2.2岀入库动画创建
当使用外部软件创建动画时，通常会有变形动画和骨骼动画两种动画定义方法。
使用变形动画时，对于变形目标，所有顶点的关键位置都会被存储下来，将所有的顶点从一个关键位置移动到另外一个定义好的关键位置，并重复这一过程。变形动画很容易获取良好的工作模型，但由于需要重复存储顶点的位置，对于大型网格和大型动画来说，模型文件会变得非常大。
使用骨骼动画〔⑻时需要定义骨骼，并将顶点绑定到特定的骨头上。当移动一块骨头时，任何与之相连的骨头都会做相应的移动，同时骨头上绑定的顶点也会随之移动，但骨骼动画面临着如何从三维程序中较好地导出数据的问题。
本系统使用Blender创建骨骼动画来实现出入库，并将其在放松状态时导岀为Collada格式的模式，使用ColladaLoader来将动画模型加载到Three,js中。为了使动画动起来，共同使用THREE.AnimationMixer.THREE.AnimationClip和THREE.ClipAction来告诉Three,js如何运行导入的动画，然后在渲染循环中调用mixer,update()函数，最后在渲染循环中调用requestAnimation-Frame()函
数向浏览器提供一个回调函数render,
基于WebGL的3D立库可视化系统设计与实现—
—尹千慧等
在这个回调函数中完成一帧的绘制操作。其中Collada格式文件不仅包含模型，还包含相机、光源、材质和动画等场景。
3.3效果展示
系统的实验环境为AMD A8-5600K APU with Radeon(tm)HD Graphics3.60GHz的处理器，运行内存为4.00GB的64位操作系统的PC机，选用WebStorm2017开发工具，运行环境为Win­dows7平台下的Coogle Chrome84.0.4147.105o 系统能较好地展示自动化立体仓库场景，可以从数据库中获取库位使用情况，还可以通过查询按钮查询货物库存信息，同时可以通过出库、入库按钮来设置订单信息对出入库进行控制，并且成功借助性能检测库Stats对动画运行时的帧数进行监测。实验结果如图6所示。
图6三维立库系统效果图
4结束语
本文根据自动化立体仓库的结构特点及硬件设施，结合WebGL三维绘图标准，运用Three,js 搭建自动
化立体仓库的三维可视化网页平台，研究分析了三维场景的搭建，阐述了实现自动化立体仓库三维出入库动画的技术和方法。设计实现的系统与传统3D客户端相比，具有跨平台、无需插件等优势，解决了传统仓储管理形式单一、数据繁琐和仓储管理系统易用性弱的问题，实现了网页3D的数据可视化，既方便了仓储管理员的丁作，又提高了仓储作业的效率和仓储管理的直观性。参考文献：
[1]杨迎春•基于Unity3D的仓储可视化编辑器的设计与
实现[D].沈阳：中国科学院研究生院(沈阳计算技术研究所),2016.
[2]王矗•电力设备仓库三维可视化系统的研究与实现
[D].北京：华北电力大学(北京),2018.
[3]任铜擘.自动化立体仓库三维可视化监控系统设计
[D].保定：河北大学,2013.
[4]聂帅，秦爽，麦文.基于WebGL技术三维模型呈现研
究[J]•计算机产品与流通,2019(7)=87-89.
[5]周奇才.基于现代物流的自动化立体仓库系统(AS/
RS)管理及控制技术研究[D].成都：西南交通大学，2002.
[6]张欢欢.自动化立体仓库的若干关键技术与仿真
[D].杭州：浙江大学,200&
[7]李西刚.自动化立体仓库中堆垛机结构设计与控制
技术研究[D].沈阳：沈阳理工大学,2014.
[8]韩义.Web3D及Web三维可视化新发展-以WebGL
和03D为例[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的三维落叶场景
仿真[J].计算机技术与发展,2018,28(6):165-
169.
[14]王鹏飞.面向虚拟实验的WebGL开发框架的研究
[D].北京：北京邮电大学,2019.
[15]于新平.自动化立体仓库系统与控制分析[J]•中国
储运,2019,227(8)：127-129.
[16]韩东亚，陈然，余玉刚，等.自动化立体仓库中出入
库任务顺序与出库位置选择集成优化研究[J].中
国管理科学,2020：1-11.
[17]陈玉林，粟敏，杨川福，等.自动化立体仓库的三维
建模设计[J]•科技视界,2016(18):130.
[18]王军，禹东川•3D骨骼动画的算法分析与WebGL实
现[J].自动化与仪器仪表,2015(4)：199-201,
204.
(责任编辑：丁一元)

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。