基于WebGL的3D可视化告警系统关键技术研究与应用

李红辉，刘冬冬，杨芳南

（北京交通大学 计算机与信息技术学院，北京 100044）

0 引言

随着工业智能化水平的提升，越来越多的自动化设备应用到制造业中，这些设备设施在提升企业智能化水平和生产效率的同时，也带来了一系列问题，智能设备设施的管理难度进一步增加，现有的设备管理系统信息展示不形象不立体，设备一旦出现故障预警，故障设备定位困难，监控数据缺乏有效的可视化手段，这些都是亟需解决的问题。随着HTML5[1]和 WebGL[2-3]技术的快速发展，为解决这些问题提供了新的方案。本文基于WebGL技术及其框架three.js[4]设计实现了设备3D可视化告警系统，在浏览器端对工业生产设备进行虚拟化仿真模拟，并把设备运行情况呈现给设备管理人员，使数据的展示更加形象立体，给设备管理者以交互感和沉浸感，实现故障设备设施的快速定位，根据设备设施告警原因，制定对应的维修方案，从而达到提高设备运维效率的目的。

1 W ebGL和three.js技术研究

1.1 WebGL

WebGL是一种在网页浏览器中渲染3D图形的JavaScript API，无需加装插件，通过WebGL的技术，只需编写网页代码即可实现 3D图形的展示。基于OpenGL ES 3.0的WebGL 2.0规范于2017年1月完成。WebGL技术相较于传统的Web3D技术有两大优点[5]：第一，通过 JavaScript 脚本语言实现网络交互式三维动画制作，无需依赖任何浏览器插件；第二，WebGL基于底层的OpenGL接口实现，具有底层图形硬件（GPU）加速功能。

WebGL绘制3D模型的过程分为三步，第一获取顶点坐标。顶点坐标通常来自三维软件导出，在获取到顶点坐标后，存储到显存，以便GPU更快读取；第二，图元装配，画出一个个三角形。图元装配就是由顶点生成一个个图元（即三角形），这个过程是由顶点着色器完成的。顶点着色器会先将顶点坐标通过矩阵变换为屏幕坐标然后由 GPU进行图元装配；最后进行光栅化，即生成片元（一个个像素点）。在图元生成完毕之后，还需要给模型“上色”，由运行在 GPU的“片元着色器”来完成。WebGL绘制3D模型的过程如图1所示。

1.2 thr ee.js

如果直接使用WebGL开发3D效率比较低，虽然它相较于OpenGL简单了很多，但是也需要开发者对图形学知识有很深入的了解，为了解决上述问题，出现了基于JavaScript语言的第三方库-three.js。three.js是一个JavaScript库，是一个跨浏览器的脚本，它封装了底层的图形接口，对WebGL有很好的支持，可以大大减少工作量，不需要掌握复杂的图形学知识就能实现三维场景的渲染。如渲染黑色背景下的白色正方体和三角形，WebGL需要编程代码大约150行，而three.js编程只需要30行左右的代码，工作量只有WebGL的五分之一，提高了开发效率。

three.js渲染 3D场景必须包含场景（scene），相机（camera），渲染器（render），光源（light）四个基本组件[6]。three.js在浏览器渲染 3D场景的准备工作包括，第一创建场景对象，变量 scene是一个容器，三维场景中所有的对象都要添加到场景容器中，它用来保存并跟踪场景内所有对象；第二配置相机，变量camera决定了观察者能够在渲染好的场景里看到什么；第三配置渲染器，render对象根据相机的角度计算渲染浏览器中场景的样子；第四配置光源，light会影响材质的显示，阴影的生成；第五配置场景需要的3D模型；最后three.js会根据模型的材质，选择对应的顶点着色器和片元着色器，最终完成整个渲染。

2 3D 可视化告警系统设计

2.1 系统概述

3D可视化告警系统釆用WebGL技术在浏览器端对工业生产设备进行虚拟化仿真模拟，并基于综合监控管理平台采集到的设备运行数据进行车间设备运行情况的形象立体化展示，给管理者以良好的沉浸感和交互感，使管理人员摆脱表格、文本等传统方式的数据可视化方式。

2.2 系统架构

图1 WebGL 绘制3D模型过程Fig.1 WebGL drawing 3D model process

本系统采用B/S架构，基于流行的WebGL框架three.js设计实现，用户直接在浏览器上通过 url地址访问该网站，不需要安装任何插件[7-8]。本系统分为数据存储层，数据处理层和数据展示层。数据存储层主要使用 mysql数据库存储设备数据基本信息和采集到的告警信息，使用json文件存储3D模型数据信息；数据处理层主要使用Mybatis和SpringMVC框架对数据进行处理分析以及业务逻辑的实现；数据展示层主要使用基于 WebGL的 three.js框架和html5完成对3D场景的加载渲染，通过改进的渲染算法解决加载大量 3D模型时出现浏览器崩溃的现象。系统的架构图见图2所示。

图2 系统架构图Fig.2 S ystem architecture diagram

2.3 系统功能设计

3D可视化告警系统主要包括3个功能模块：设备管理模块，3D场景漫游模块以及设备健康状态管理模块，功能结构图如图3所示。

图3 系统功能结构图Fig.3 The structure diagram of system function

（1）设备管理模块，用户可以查看设备基本信息，通过拖拽的形式改变设备在场景中的位置，实现设备的缩放和旋转操作，还可以根据自己的需要添加和删除设备。

箱内最低温性能比较：当环境温度为30℃±1℃时，(1)碳氢冷媒的吸排气温度较R134a冷媒高，且开始运行时因系统负载过高排气温度可达82℃；(2)碳氢冷媒的冷凝温度较R134a高，系统稳定后冷凝器出口温度较R134a高19.2%；(3)碳氢冷媒在蒸发器出口温度的拉低速率与最低温度方面均优于R134a冷媒，系统稳定后蒸发器出入口温度较R134a冷媒低约14.8%和14.5%。

（2）3D场景自由漫游，用户通过鼠标完成对整个 3D场景的移动，缩放和旋转操作，从而满足用户360度查看场景的需要，给用户带来良好的交互感和浸入感。

（3）设备健康状态管理，用户可自由查看机房内任意设备的健康度，健康度分为三个区间，分别用红黄绿三种颜色来表示设备的健康状态。当系统检测到设备出现告警信息时，在该设备的上方弹出对应的告警标志，用户点击告警标志，弹出告警详情，包括告警时间，告警类别。告警原因等。

（4）自动巡航，用户可以根据厂房环境和设备布局情况，设定巡航路径，当用户点击自动巡航按钮时，可以沿着设定好的路径进行巡视，无需用户手动操作，就能够对路径上的设备健康情况进行全局了解，大大减少了用户的工作量，提高了工作效率。

3 关键技术研究

随着场景中模型数量的不断增加，三维场景的复杂度也不断增加，这样会导致Web端渲染场景的时间越来越慢，甚至出现浏览器崩溃的现象，严重影响用户体验。针对复杂三维场景的渲染，本文从两个方面进行优化，一是场景组织方面，使用八叉树结构对场景进行组织和优化；二是对视锥体内的模型进行可见性剔除，通过减少渲染模型的数量来提高场景渲染效率。

3.1 基于八叉树划分场景

八叉树（octree）[9]是一种描述三维空间的树状数据结构，用于 3D空间中的场景管理，可以加速邻近搜索和相交测试。八叉树使用三个面进行分割，把整个三维场景看作一个大的正方体，分割点位于包围盒的中心点，沿着轴对的三条轴对其进行分割，以这种方式生成8个新的正方体，这八个子节点所表示的体积元素加在一起就等于父节点的体积。递归分割，直到达到递归深度。在八叉树表示的空间结构中，任一节点都只有八个子节点或零个。

使用八叉树划分场景时会出现一个模型对象同时包含在两个叶子节点的情况，解决这个问题的方法有两个，一是所有与模型相交的子节点都建立对该模型对象的索引，该方法虽然可以实现模型的精确引用，但会造成管理上的麻烦；二是应用松散八叉树，松散八叉树相对与经典的八叉树结构更松散，假定八叉树的一个节点大小为N*N*N，则松散八叉树表示的该节点的大小为 2N*2N*2N。因此，可以把原先需要存储在两个节点中的模型对象存储到一个节点中。本文使用方法二解决问题。

3.2 视锥体剔除

使用松散八叉树对场景划分完毕后，使用光线投射算法（raycaster）[10]完成视锥体剔除（Frustum Culling）。视锥体是相机视点与相机视野范围形成的一个圆锥，如图4所示，判断存在于视锥体内的模型对象，把不存在视锥体内的模型对象进行剔除，图4中矩形和五角星代表的模型对象被保留，圆形代表的模型对象被剔除，视锥体内的模型对象被送入GPU渲染，不在视锥体内的模型对象不渲染。通过减少送入 GPU渲染模型的数量来提高场景的渲染速度。

图4 视锥体剔除Fig.4 Frustum culling

图5 视锥体底面图Fig.5 Bottom view of the cone

视锥体剔除关键的步骤在于如何高效的判断出视锥体内的模型对象，本文通过建立相机与相机投影面积内点的射线完成模型对象的可见性操作，要想准确判断出视锥体内的模型对象取决于射线的数量和射线的方向是否分布均匀，射线方向均匀分布是提高模型对象判断准确性的关键因素。从相机产生的视锥体得知，所有光线最终会集中到一个圆上，如图5所示，所以问题落在了如何在圆上产生足够数量的且接近均匀分布的点。

首先根据交点 A和 B的横坐标 Xa、Xb得到 X的区间[XaXb]，在该区间中随机生成一个横坐标X，根据式（1）计算得出±YX，最后在区间[-YXYX]中随机取一个纵坐标 Y，则（X，Y）构成二维随机点。其中，对于随机数X和Y的生成本文调用JAVA自实现的Random方法。

通过坐标转换把二维随机点坐标（X，Y）转换为与相机同一坐标系，根据两点创建射线，调用three.js中的raycaster算法，使用intersectObjects方法获得与该射线相交的所有3D模型，，得到与该射线相交的模型对象数组。通过数量足够多的二维随机点，建立大量符合均匀分布的射线就能近似准确的得到该视锥体内的所有模型对象，完成场景内不可见模型对象的剔除。针对三维场景中视锥体内模型剔除实现流程如图6所示：

图6 视锥体内模型剔除实现流程Fig.6 The process of frustum culling

基于八叉树的复杂三维场景的渲染步骤描述如下：

（1）使用场景图创建系统场景，然后基于八叉树结构划分场景；

（2）建立八叉树空间结构，用于加速视锥体剔除，光线投射，相交模型测试以及邻近查询等；

（3）基于八叉树结构对场景内的模型对象进行可见性视锥剔除操作；

（4）对于处于视锥体内的模型对象进行渲染；

（5）检测相机位置或方向是否发生改变，若改变，重复步骤（3），否则转（6）

（6）结束。

3.3 试验结果

为了验证优化后的复杂三维场景的渲染算法，通过向三维场景文件中不断增加模型的数量，逐步提高三维场景的复杂度，来验证该算法的可行性。在 3D可视化告警平台中进行广泛的测试，实验结果如图7所示：

图7 优化前后渲染场景时间对比图Fig.7 Optimized before and after the scene rendering time contrast map

可以看出随着模型对象个数的增加，场景文件的渲染时间不断增加，当模型数量小于 200（近似值）时，同一场景文件渲染时间进行视锥体剔除后的算法高于传统渲染算法，出现这种情况的原因是建立射线相交测试耗费的时间抵消了优化算法的提升时间，但场景文件中模型对象数量超过 200（近似值）的时候，视锥体剔除后的算法逐渐优于传统渲染算法，而且随着模型对象数量的继续增加，效果越来越明显。

4 总结

针对当前工业自动化设备运维管理过程中故障设备定位困难，监控数据不形象不直观的缺点，本文给出了一个 3D可视化告警系统的设计与实现，基于WebGL技术的three.js框架开发，摆脱了传统3D可视化方案依赖插件的束缚。该方案在浏览器端对自动化设备以及各个监控系统采集到的设备运行数据进行三维仿真模拟，从而使数据的展示更加形象、立体，达到了辅助运维的目的，同时提出Web端基于八叉树的复杂三维场景的优化思路，提高了模型加载性能。优化后的渲染思路在加载小数量模型时效果不明显，原因是计算相机视野范围内的模型需要花费时间。未来的研究内容是使用CPU+GPU实现渲染优化算法的并行化，减少算法的计算时间。

[1] Zorrilla M, Martin A, Sanchez J R, et al. HTML5-based System for Interoperable 3D Digital Home Applications[C].Fourth International Conference on Digital Home. IEEE,2012: 206-214.

[2] Bian M J, Gao H H, Gao J. Research and Application of Web3D Exhibition Based on WebGL and Html5[C]. International Conference of Electrical, Automation and Mechanical Engineering. 2015: 3-4.

[3] Sawicki B, Chaber B. 3D mesh viewer using HTML5 technology[J]. Przeglad Elektrotechniczny, 2012, 88(5): 155-157.

[4] 汪浩, 田丰, 张文俊. 基于WebGL的交互平台设计与实现[J]. 电子测量技术, 2015, 38(08): 119-122+128.WANG H, TIAN F, ZHANG W J. Design and implementation of interactive platform based on webGL[J]. ELECTRONIC MEASUREMENT TECHNOLOGY, 2015, 38(08):119-122+128.

[5] 王维敏. Web3D技术探索及几种Web3D技术的比较选择[D]. 武汉大学, 2004.WANG W M. Research of web3D Technique and Compare and Choice of Several web3D Techniques[D]. Wuhan: Wuhan University, 2004. (in Chinese)

[6] 德克森. Three. js开发指南[M]. 北京: 机械工业出版社,2016: 11-12.Jos Dirksen. Learning Three. js: The JavaScript 3D Library for WebGL[M]. Beijing: China Machine Press, 2016: 11-12.(in Chinese)

[7] 王磊, 高珏, 金野, 许华虎. 基于Web3D无插件的三维模型展示的研究[J]. 计算机技术与发展, 2015, 25(4): 217-220.WANG L, GAO J, JIN Y, XU H H. Research on Threedimensional Model Display Based on Web3D without plug-in [J]. COMPUTER TECHNOLOGY AND DEVELOPMENT, 2015, 25(04): 217-220.

[8] 张玄, 黄蔚. 3D机房运维可视化系统的设计与实现[J]. 软件, 2016, 37(7): 89-93.ZHANG X, HUANG W. Design and Implementation of 3D Data Room Opration and Maintenance Visualization System[J]. COMPUTER ENGINEERING & SOFTWARE, 2016,37(7): 89-93.

[9] Pajarola R. Large scale terrain visualization using the restricted quadtree triangulation. Proceedings of IEEE Visualization '98. 1998.

[10] Hristo Lesev, Alexander Penev. A Framework for Visual Dynamic Analysis of Ray Tracing Algorithms[J]. Cybernetics and Information Technologies, 2014, 14(2).