请选择 进入手机版 | 继续访问电脑版
2021ThingJS数字孪生智慧场景可视化开发大赛获奖者专访
查看: 318|回复: 0

[分享] 基于WebGL的3D可视化告警系统关键技术剖析 ThingJS

[复制链接]
avatar

52

主题

57

帖子

79

积分

注册会员

Rank: 2

积分
79
ico_lz  楼主| 发表于 2020-12-4 14:25:57 | 显示全部楼层 |阅读模式


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

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

WebGL 3D技术

WebGL是一种在网页阅读器中衬着3D图形的 JavaScript API,无需加装插件,只需编写网页代码即可实现3D图形的展现。WebGL技术相较于传统的Web3D技术有两大优点:第一,经过JavaScript剧本说话实现收集交互式三维动画建造,无需依靠任何阅读器插件;第二,WebGL基于底层的 OpenGL接口实现,具有底层图形硬件(GPU)加速功用。
WebGL绘制3D模子的进程分为四个步调以下:
第一,获得极点坐标。极点坐标凡是来自三维软件导出,在获得到极点坐标后,存储到显存以便GPU更快读取;第二,图元装配,画出一个个三角形。图元装配就是由极点天生一个个图元(即三角形),这个进程是由极点着色器完成的。极点着色器会先将极点坐标经过矩阵变更为屏幕坐标,然后由GPU停止图元装配;第三,停止光栅化,即天生片元 (一个个像素点)。第四,在图元天生终了以后,还需要给模子“上色”,由运转在GPU的“片元着色器”来完成。

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

新一代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。

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

3D可视化告警系统案例

3D可视化告警系统常见于城市交通批示、地铁通讯、智能家居、消防平安范畴,产业自动化装备运维治理进程中,常碰到故障装备定位困难、监控数据不形象不直观等题目,基于 WebGL技术的3D框架开辟,本案例实现了一个通用的3D可视化告警系统设想计划,不但摆脱了传统3D可视化计划依靠插件的约束,处理了出错率高、数据难以沉淀等题目。
从用户角度动身,采用 WebGL技术在阅读器端对产业生产装备停止虚拟化仿真模拟,并基于综合监控治理平台收集到的装备运转数据停止车间装备运转情况的形象立体化展现,3D场景动效给治理者以杰出的沉醉感和交互感,摆脱表格、文本等比力传统的治理方式。

基于WebGL的3D可视化告警系统关键技术剖析 ThingJS
某口岸的数字告警监控可视化利用界面

基于ThingJS的通用架构设想

一个通用的告警系统,分为数据存储层、数据处置层和数据展现层。
数据存储层首要利用 mysql数据库存储装备、数据根基信息和收集到的告警信息,利用json文件存储3D模子数据信息;数据处置层首要连系Ajax数据对接方式在线判定告警信息,操纵JavaScript剧本对数据停止处置分析以及营业逻辑的实现;数据展现层首要利用基于 WebGL的 ThingJS平台组件完成对3D场景的加载衬着,并供给在线项目分享功用,用户可以天生唯一URL和二维码,在其他web系统嵌入iframe链接停止演示。【官网注册链接

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

1. 根本功用构建

根本操纵含3大功用模块:装备治理模块、3D场景周游模块以及装备健康状态治理。

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

(1) 装备治理。用户可以检察装备根基信息,经过拖拽的形式改变装备在场景中的位置,实现装备的缩放和扭转操纵,还可以按照自己的需要增加和删除装备。ThingJS的开辟师挪用js剧本,控制物体的位置、扭转、缩放,包括Z轴偏向移动。【检察完整示例
  1. // 位置
  2. app.on('click', function(event) {
  3. if (event.picked)
  4. car.position = event.pickedPosition;
  5. });
  6. // 移动,z轴偏向
  7. function obj_translate() {
  8. car.translate([0, 0, -1]);
  9. }
  10. // 扭转,y轴偏向
  11. function obj_rotate() {
  12. car.rotateY(45.0);
  13. }
  14. // 缩放
  15. function obj_scale() {
  16. car.scale = [1, 2, 1];
  17. }
复制代码
(2) 3D场景自在周游。用户经过鼠标完成对全部3D场景的移动,缩放和扭转操纵,从而满足用户360度检察场景的需要,给用户带来杰出的交互感和浸入感。ThingJS示例采用js剧本让摄像机自动环抱某看点位置(天下坐标系下)或某物体扭转。【3D演示

基于WebGL的3D可视化告警系统关键技术剖析 ThingJS
某能源储能电站告警系统可视化利用

(3) 装备健康状态治理。用户可自在检察机房内肆意装备的健康度,健康度分为三个区间,别离用红黄绿三种色彩来暗示装备的健康状态。当系统检测到装备出现告警信息时,在该装备的上方弹出对应的告警标志,用户点击告警标志,弹出告警详情,包括告警时候、告警种别、告警缘由等。ThingJS平台内,基于Ajax技术可以完成根基的数据请求,对装备温度、健康状态停止判定,并设定一个报警界限值。【检察完整示例
  1. function updateData(obj) {
  2. // 假如网站是 https 接口则对应 https 请求
  3. // 假如网站是 http 接口则对应 http 请求即可
  4. $.ajax({
  5. type: "get",
  6. url: "https://3dmmd.cn/getMonitorDataById",
  7. data: { "id": obj.id },
  8. dataType: "json", // 返回的数据范例 json
  9. success: function (d) {
  10. console.log(d);
  11. var temper = d.data.temper;
  12. // 设备物体身上的监控数据
  13. obj.setAttribute("monitorData/温度", temper);
  14. changeColor(obj);
  15. // 每隔3s 请求一次数据
  16. timer = setTimeout(function () {
  17. updateData(obj)
  18. }, 3000);
  19. }
  20. });
  21. }
  22. // 停止请求数据
  23. function stopUpdate() {
  24. clearTimeout(timer);
  25. }
  26. // 假如温度>25 改变色彩
  27. function changeColor(obj) {
  28. var temper = obj.getAttribute("monitorData/温度");
  29. var value = temper.substr(0, temper.indexOf("℃"));
  30. if (value > 25) {
  31. obj.style.color = 'rgb(255,0,0)';
  32. }
  33. else {
  34. obj.style.color = null;
  35. }
  36. }
复制代码

2. 自动巡航功用

不但仅是自动驾驶系统,产业装备可视化也可以加入自动巡航功用,以匀速的状态移动进步。
用户可以按照厂房情况和装备结构情况,设定巡航线径,当用户点击自动巡航按钮时,可以沿着设定好的途径停止巡查,无需用户手动操纵,就可以对途径上的装备健康情况停止全局领会,大大削减了用户的工作量,进步了工作效力。
ThingJS操纵js剧本中的摄像机概念来肯定观察3D场景的视角,让摄像机一向跟从物体,到达设定巡航线线的目标。【检察完整示例
  1. new THING.widget.Button('摄像机跟从物体', function () {
  2. // 每一帧设备摄像机位置 和 方针点
  3. car.on('update', function () {
  4. // 摄像机位置为 移动小车后上方
  5. // 为了便于计较 这里用了坐标转换 将相对于小车的位置 转换为 天下坐标
  6. app.camera.position = car.selfToWorld([0, 5, -10]);
  7. // 摄像机方针点为 移动小车的坐标
  8. app.camera.target = car.position
  9. },&n
复制代码
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则