基于WebGL 3D技术的可视化温室环境监测系统设计

罗怀荣+石军锋

摘要：针对温室监测系统交互方式不直观、数据呈现形式单一的问题，设计了一种3D可视化温室监测系统。该系统由ZigBee网络、图像采集设备、服务器、数据库组成。首先，采用CC2530芯片节点组建ZigBee无线传感器网络，ZigBee网关通过串口与服务器通信；其次，结合SSH开发框架设计Web服务器和Mysql数据库，监听和处理串口环境数据和USB图像数据；最后，通过HTML5的WebGL 3D技术，加载3DS MAX模型，实现了3D模型下的实时数据动态采集推送、数据存储历史分析、可视化数据显示、视频监测等功能。测试表明，该系统运行稳定，数据可靠，监测方式更加立体直观，可广泛用于温室环境系统以及其他环境系统的监测。

关键词：温室；数据库；WebGL；可视化；建模

中图分类号： S126文献标志码： A文章编号：1002-1302（2017）07-0189-04

近年来我国温室栽培面积快速增长，已成为全球温室生产面积最大的国家，生产面积已超过200万hm2[1-2]。借助现代化智能监测平台对温室的土壤、肥力、气候等因素进行大数据分析，动态监测农作物生长环境，能让温室生产管理事半功倍，生产效益最大化。目前国内外科研机构在温室监测系统上，已实现远程Web在线监测[3-5]、智能移动终端监测[6]。但还存在以下问题：（1）用户交互方式不立体直观，用户界面不友好。大多数监测系统是基于二维平面、仿三维平面的交互方式，如天津视讯公司的精准农业监控系统，MEMSIC公司的eKo Pro专业环境监测系统，在节点可视化显示上采用了以地理空间图片为背景进行节点定位的方法，虽然有3D空間的视感，但是不能真正进行3D操作；（2）数据呈现形式单一，不易感知数据中的关键信息。由于监测数据比较庞大，简单的表格显示数据会产生过长的列表，不易于用户提取有用信息。本研究提出了一种基于WebGL 3D技术的可视化温室环境监测系统设计方案，并完成了服务器和相关功能设计，以期为推动温室监测系统发展提供依据。

1系统总体设计方案

1.1系统结构设计

系统结构上分为3个部分：ZigBee网络和摄像头、服务器以及浏览器客户端。ZigBee网络由ZigBee传感器子节点和ZigBee网关组成，负责温室环境数据采集，摄像头负责图像数据采集。网络内部通过基于CC2530为核心的ZigBee协议进行通信。各节点的传感器包括SHT11温湿度传感器、TSL2561光敏传感器、MG811二氧化碳传感器等。服务器是基于SSH框架开发的Web服务器和数据库服务器，它们之间通过JDBC驱动进行数据交换和处理。Web服务器采用 Tomcat 管理系统的Web项目资源，其优点在于能够快速处理JSP动态请求。数据库服务器采用Mysql关系型数据库，它是一款面向中小型应用开发的强大数据库。服务器和ZigBee网络之间采用串口通信，以RS-232串行通信标准协议为标准建立有线链接，以字节流的方式交换数据。服务器和摄像头通过USB连接，通过调用JavaCV视觉库函数获取摄像头的图像帧，服务器把图像帧数据经过Base64格式编码，通过WebSocket实现视频监控。客户端和服务器主要通过Http协议和WebSocket协议进行通信[7]。Http协议用于实时性不强的环境数据传输，而实时性要求较高的视频图像数据需要WebSocket协议传输，2种通信方式的结合保证了系统高效、稳定的数据通信。系统结构如图1所示。

1.2服务器框架设计

服务器包括Web服务器和数据库，Web服务器实现该系统中的所有功能需求，并对外提供Web访问服务，数据库则是数据存取中心。服务器框架结构如图2所示。

SSH框架设计的服务器分成3层：数据显示层、业务逻辑层、数据访问层。数据显示层作为系统对外访问接口，浏览器可以访问相应的html、jsp页面资源，通过Ajax技术实现页面数据交互，减少了响应等待时间和重复加载资源花费的时间。业务逻辑层是系统数据处理中心，用户通过与html5页面交互，触发相应的请求，调用对应的业务逻辑，处理完成的业务逻辑则把数据以json的形式返回给用户页面。数据访问层是业务逻辑层和数据库的中间层，进行数据包的封装和数据操作的封装，避免业务逻辑对数据库的直接操作。3层服务器之间通过Spring+Struts+Hibernate来管理互相的调用关系，减少各层之间的耦合度，增强各层代码独立性，从而提高系统的扩展性、稳定性、可移植性。

1.3数据库设计

温室监测系统是一个以数据为主的系统，数据存储是一个重要部分，本设计选用的是Mysql关系型数据库。服务器与数据库通过JDBC建立连接，对数据库进行数据增加、删除、修改、查询等操作。数据库包括五张表：用户表、拓扑表、数据表、温室设备信息表、系统设置表。用户表字段包括用户名、密码、注册时间；拓扑表字段包括序号、节点地址、父节点地址、通信质量、获取时间；数据表字段包括序号、子节点号、子节点地址、温度、湿度、光强、节点电压、采集时间；温室设备信息表字段包括序号、设备名、硬件地址、x坐标、y坐标、z坐标、设置时间；系统设置表字段包括序号、用户名、串口号、波特率、设置时间。

1.4数据可视化方法

数据可视化技术综合运用计算机图形学、图像处理、人机交互等技术，将采集或模拟的数据变换为可识别的图形符号、图像或动画，并以此呈现对用户有价值的信息[8-9]。本研究中数据可视化流程包括数据采集与处理、3D模型渲染、用户交互等3个部分。通过节点采集温室环境数据，服务器解析数据帧封装成数据表对象，保存到数据库。通过摄像头采集图像数据，经过Base64编码保存为JPG格式图片和MP4格式视频；采用WebGL 3D技术渲染基于3ds Max设计的温室3D模型；通过鼠标事件进行用户与3D模型的交互。在历史数据中，结合图表、表格的数据显示方式，采用百度Echarts框架绘制折线图、柱状图等多种图表，按条件删选数据和数据表格分页的形式显示数据，使数据呈现更加直观和简洁。

2数据采集与处理

2.1数据帧格式

数据帧是服务器与网关按一定格式交互的数据包，携载着节点采集的环境数据。数据帧总共包括32字节的16进制数据，数据帧格式及具体的字节分配如图3所示。

帧头“&”、帧尾“*”分别表示数据包的开始和结束。命令头有6种，分别是网络拓扑（RND）、全部节点采集（ASA）、全部节点停止（AST）、通信质量（RNS）、单节点采集（RSA）、单节点停止（TSA）。前3种命令属于广播命令，不需要指定节点地址，后3种命令属于点播命令，需要指定节点地址。每个节点都分配了不同的IEEE地址，通过IEEE地址识别不同节点数据。载荷中存放着节点采集的环境数据（空气和土壤的温度、湿度、光照度、二氧化碳浓度、节点工作电压），每项数据都通过补码的方式进行传输，保证在1帧中可以传递尽可能多的信息。

2.2数据采集与处理

系统涉及2种数据类型：环境数据、图像数据。网关是环境数据来源，通过串口与服务器通信。服务器启动时建立Port thread、WebSocket服务。Port thread用于监听串口的环境数据，接收到环境数据就按照数据帧格式进行解析，封装成数据表对象，保存到数据库。摄像头是图像数据来源，通过USB与服务器通信。WebSocket监听客户端Socket实例化所有摄像头，服务器根据摄像头地址对摄像头进行操作，接收到开启命令开始捕获图像，每帧图像采用Base64格式的字节编码，以字节流的方式发送给javascript，解析成图片显示，图像、视频以文件形式保存在服务器上。

33D温室模型设计方案

3D温室模型是虚拟现实中的温室场景，包括温室、风机、湿帘、摄像头、网关、节点等模型。在温室监测系统中采用3D技术可以非常直观和真实地体验监测过程，直观的3D节点拓扑模型可以方便地进行节点诊断和预警。目前网络三维（Web3D）技术主要解决方案有Java3D、VRML、Viewpoint、Cult3D、Shockwave3D、Unity3D、Virtools等。WebGL是一种新的Web3D技术[10]，WebGL基于javascript实现三维模型和动画制作，不需要安装其他插件。WebGL是开源、免费的，受到了许多第三方开源库的青睐，如Three.js、LightGL等。WebGL 利用底层的图形硬件加速功能进行图形渲染，借助系统显卡流畅地渲染三维场景和模型，同时还能创建复杂的导航和数据可视化。本研究选用WebGL技术来渲染温室3D模型，借助第三方库Three.js对底层函数封装，灵活地进行温室模型设计。

3.1模型设计与渲染

WebGL不仅可以自主绘制3D图形，还支持多种格式的3D模型导入，支持的3D模型格式有FBX、OBJ、VTK、STL、WRL等。由于WebGL本身没有辅助设计3D模型的工具和函数，绘制温室等复杂场景时显得较笨拙，且对程序设计人员的技术要求较高。本研究选用导入完整3D模型的方案，进行温室模型设计，既可以渲染出逼真的温室场景，还增强了系统对各种3D场景模型的移植性和兼容性。3ds Max是 Autodesk 公司专业设计3D模型和动画的软件，支持多种3D模型格式的导出，其中OBJ格式支持导入相关材质和贴图，是非运动单个模型很好的选择。整个温室模型分为2部分，即温室环境模型和可操作设备模型（网关、节点、摄像头）。导出OBJ格式生成2个文件：.obj文件包含构成模型的三维点坐标，.mtl文件包含模型的材质和贴图信息。Three.js分别提供了2种文件的加载器OBJLoader.js、MTLLoader.js。

Three.js渲染3D模型的流程如图4所示。首先，初始化透視相机（Perspective Camera）、渲染器（WebGL Renderer）、用户交互对象（Raycaster）、场景（Scene）。相机虚拟人眼功能，增加控制器后可通过鼠标任意旋转、缩放、拖动，来改变视角控制渲染效果。用户交互对象不参与渲染，是模型与用户交互的载体。渲染器装载所有被渲染的对象和组件，并与 HTML5 结合起来。场景类似于画布，把画布上的东西呈现出来。然后，加载3D模型，MTLLoader加载模型的材质和贴图，OBJLoader加载模型对象，并分解出该对象的所有子对象，如果子对象属于Mesh对象，就设置子对象的三维坐标，并加入用户交互对象集合和渲染器，如果不是Mesh对象就直接加入渲染器。最后，把透视相机、渲染器和用户交互对象放入场景，渲染出3D模型。

3.2节点拓扑算法

温室环境模型和摄像头模型没有拓扑结构，直接获取服务器设定的三维坐标即可完成模型渲染，而网关和节点模型具有一定的拓扑结构，需要计算拓扑才能渲染。常见拓扑结构有星形、树形、环形、网状性、总线型，根据网关和节点就近通信的特点，容易形成星形、树形，本研究采用树形结构设计拓扑。树形拓扑是从上往下层层展开，其结构和递归函数原理非常相似，本研究以网关节点作为递归函数入口，依次获取所有节点，得到节点拓扑，渲染节点模型。算法流程如图5所示。topology（）函数给服务器发送拓扑请求，服务器给网关发送拓扑命令，获取在线节点拓扑信息（节点地址、父节点地址、通信质量），topology（）函数得到服务器返回的拓扑json数据，从根节点中取出网关节点，loadgateway（）函数渲染网关节点模型。drawpoint（）函数根据父节点，得到所有子节点进入for循环，loadpoint（）函数渲染节点模型，drawline（）函数根据子节点的通信质量，以不同颜色线条连接父节点、子节点。然后进行递归判断，如果该子节点有下一级子节点，就进入drawpoint（）函数，如果没有就进入下一个子节点，直至遍历出所有子节点，按节点拓扑结构渲染全部节点模型。

3.3用户交互策略

由于3D模型是在Canvas元素里渲染的，用户不能直接与3D模型进行交互，需要借助Raycaster对象实现交互。用户通过鼠标点击模型，Raycaster对象判断该模型是否存在集合中，如果存在，触发交互事件，反之不触发。本研究采用弹出菜单的方式实现交互，用户鼠标点击模型，弹出对应的fieldset标签菜单。通过菜单选项给节点、摄像头发送命令，查看相关数据。所查看的环境、图像数据放到不同fieldset标签中，通过设置标签位置和隐藏属性，实现数据切换。通过Trackball Controls控制鼠标，进行旋转、缩放、移动3D模型，改变相机视角，实现全方位360°与3D模型交互。

4系统测试

系统测试是软件设计过程中十分重要的环节，可以检验出系统在功能、性能上的问题。本系统是基于JDK+Myeclipse+Mysql开发环境，开发的基于WebGL 3D技术的可视化温室环境监测系统。在Windows10操作平台下，运行Tomcat8.0管理Web服务器，可在局域网内通过支持WebGL技术的浏览器（Google Chrome 9+、Mozilla Firefox 4+、Safari 5.1+、Opera 12+、IE9+）下进行系统访问。并使用花生壳代理软件，映射外网域名，测试系统在外网环境下的访问。

4.1拓扑模型对比

为了进一步说明本研究设计的3D模型的可操作性和立体直观性，图6分别对比了采用一维表格、二维图形设计的拓扑模型。图6-a是采用一维表格的方式，只能显示节点基本信息。图6-b是采用二维图形的方式，在显示基本信息的同时，可以反映节点之间的物理通信关系。图6-c是本研究设计的采用3D模型的方式，不仅能够反映节点的详细信息，还可以反映节点的物理通信关系和空间分布信息，更加方便、快速、准确、直观地监测温室数据。

4.2数据可视化测试

用户可以直接和3D模型进行交互，通过点击不同颜色模型获取选项菜单，进行用户交互。与摄像头模型交互可以观看温室监测图像，在历史数据中，按采集数据时间、节点号筛选数据，并通过图表和分页表格的形式展示数据，以简洁清晰的方式让用户快速了解历史数据，掌握有用信息。可视化数据效果如图7所示。

5结论

本研究以温室监测数据为主题，针对目前温室监测系统用户交互不立体直观，数据呈现形式单一等问题，提出了一种基于3D技术的可视化温室环境监测系统，并完成了Web服务器和数据库的设计和部署。测试表明，该技术实现了温室监测的立体化、一体化、可视化，改善了传统交互方式，用更高效的监测手段提升温室生产效率，具有很好的应用前景。结合农业物联网、3D技术、数据可视化技术的发展情况以及本研究进展，可从以下方面对相关研究继续深入开展：（1）对本研究监测的数据进行大数据分析，整理成专家系统，给温室监控系统提供可靠的大数据支持；（2）3D技术正在快速发展，未来形成统一的标准规范，完全渲染3ds Max模型的材质和贴图，达到虚拟现实水平。

参考文献：

[1]徐立鸿，蘇远平，梁毓明. 面向控制的温室系统小气候环境模型要求与现状[J]. 农业工程学报，2013，29（19）：1-15.

[2]葛文杰，赵春江. 农业物联网研究与应用现状及发展对策研究[J]. 农业机械学报，2014，45（7）：222-230，277.

[3]于合龙，刘杰，马丽，等. 基于Web的设施农业物联网远程智能控制系统的设计与实现[J]. 中国农机化学报，2014，35（2）：240-245.

[4]郑强，彭琳，邹秋霞，等. 基于嵌入式Web服务器的远程温室监控系统设计[J]. 农机化研究，2013（11）：84-87.

[5]张猛，房俊龙，韩雨. 基于ZigBee和Internet的温室群环境远程监控系统设计[J]. 农业工程学报，2013，29（增刊1）：171-176.

[6]陈美镇，王纪章，李萍萍，等. 基于Android系统的温室异构网络环境监测智能网关开发[J]. 农业工程学报，2015，31（5）：218-225.

[7]薛陇彬，刘钊远. 基于WebSocket的网络实时通信[J]. 计算机与数字工程，2014，42（3）：478-481.

[8]杨彦波，刘滨，祁明月. 信息可视化研究综述[J]. 河北科技大学学报，2014，35（1）：91-102.

[9]林兰芬，于鹏华，李泽洋. 基于聚类的农产品流通物联网感知数据时空可视化技术[J]. 农业工程学报，2015，31（3）：228-235.

[10]刘爱华，韩勇，张小垒，等. 基于WebGL技术的网络三维可视化研究与实现[J]. 地理空间信息，2012，10（5）：79-81.