基于WebGL的3D可视化告警系统关键技术解析 ThingJS

#三维可视化# #3D开发#

1. WebGL 3D技术
2. 新一代3D框架-ThingJS
3. 3D可视化告警系统案例
4. 基于ThingJS的通用架构设计

WebGL 3D技术

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

WebGL绘制3D模型的过程分为四个步骤如下：

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

新一代3D框架

如果直接使用 WebGL开发3D效率比较低，需要开发者对图形学知识有很深入的了解，碎片化的概念并不易于开发。为了解决开发效率低的问题，出现了基于 JavaScript语言的第三方库-three.js，这是开源的技术，受到了广大前端转3D开发师的追捧。

three.js是一个跨浏览器的脚本，它封装了底层的图形接口，对 WebGL有很好的支持，不需要掌握复杂的图形学知识就能实现三维场景的渲染。如渲染黑色背景下的白色正方体和三角形, WebGL需要编程代码大约150行，而 threejs编程只需要30行左右的代码，工作量只有 WebGL的五分之一，大幅提高了开发效率。

相较而言，近两年新兴的3D框架-ThingJS，封装了几乎所有的3D概念，开发人员甚至不需要3D专业知识储备，直接使用JavaScript调用3D源码，轻松实现3D效果，顺利完成二次开发。如加载3D场景，three.js需要100行左右的代码，ThingJS仅需1行，直接JavaScript脚本调用3D场景URL。

3D可视化告警系统案例

3D可视化告警系统常见于城市交通指挥、地铁通信、智能家居、消防安全领域，工业自动化设备运维管理过程中，常遇到故障设备定位困难、监控数据不形象不直观等问题，基于 WebGL技术的3D框架开发，本案例实现了一个通用的3D可视化告警系统设计方案，不仅摆脱了传统3D可视化方案依赖插件的束缚，解决了出错率高、数据难以沉淀等问题。

从用户角度出发，采用 WebGL技术在浏览器端对工业生产设备进行虚拟化仿真模拟，并基于综合监控管理平台采集到的设备运行数据进行车间设备运行情况的形象立体化展示，3D场景动效给管理者以良好的沉浸感和交互感，摆脱表格、文本等比较传统的管理方式。

某港口的数字告警监控可视化应用界面

基于ThingJS的通用架构设计

一个通用的告警系统，分为数据存储层、数据处理层和数据展示层。

数据存储层主要使用 mysql数据库存储设备、数据基本信息和采集到的告警信息，使用json文件存储3D模型数据信息；数据处理层主要结合Ajax数据对接方式在线判断告警信息，利用JavaScript脚本对数据进行处理分析以及业务逻辑的实现；数据展示层主要使用基于 WebGL的 ThingJS平台组件完成对3D场景的加载渲染，并提供在线项目分享功能，用户可以生成唯一URL和二维码，在其他web系统嵌入iframe链接进行演示。【官网注册链接】

01 基础功能构建

基础操作含3大功能模块：设备管理模块、3D场景漫游模块以及设备健康状态管理。

(1) 设备管理。

用户可以查看设备基本信息，通过拖拽的形式改变设备在场景中的位置，实现设备的缩放和旋转操作，还可以根据自己的需要添加和删除设备。ThingJS的开发师调用js脚本，控制物体的位置、旋转、缩放，包括Z轴方向移动。【查看完整示例】

// 位置
app.on('click', function(event) {
   
   
    if