基于 HTML5 WebGL 的计量站三维可视化监控系统 Web 组态工控应用

本是古典何须时尚 2022-01-16 04:09 258阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

## 前言 ##

得益于 HTML5 WebGL 技术的成熟，从技术上对工控管理的可视化，数据可视化变得简单易行！完成对工控设备的管理效率，资源管理，风险管理等的大幅度提高，同时也对国家工业4.0计划作出有力响应！

如本案例所示，是一个基于 HTML5 WebGL 技术实现的计量站三维可视化监控系统，在本案例中，具体宏观的展示一个油田站点的整体场景，然后点击可以进入内景看到油田计量站内景的具体情况，同时可以看到各个设备的参数的当前状态。

同样的其中功能组件具有很高的复用性，所以也会非常方便的应用到其他场景中！

如下所示，便是本案例运行动态图：

此项目链接：[基于 HTML5 WebGL 的计量站三维可视化监控系统 Web 组态工控应用][HTML5 WebGL _ Web]

([http://www.hightopo.com/demo/metering-station/][HTML5 WebGL _ Web] )

![在这里插入图片描述][1496396-20190416081626430-1876178318.gif]

在这个场景中主要有如下几个功能：

1、点击来回切换场景；

2、管线流动效果；

3、数据面板动态显示；

## 代码实现 ##

确认功能需求后就可以开始实施实现，动手实现之前要先确认场景有哪些，如下所示主要有油田外景和内景。

外景：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNjE0OTU_size_16_color_FFFFFF_t_70]

内景：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNjE0OTU_size_16_color_FFFFFF_t_70 1]

#### 技能储备 ####

本 demo 需要掌握 [HT for Web][] 的 2d 和 3d 相关 技术，具体技术参考资料可以去 HT for Web 官网图扑软件了解。

#### 实现功能 ####

**1、** 默认视角 在三维场景中，需要先设置一个默认视角，当重新打开页面时候直接回到默认视角，通过 setFar， setEye 和 setCenter 方法实现。

gv.setFar(100000);
    gv.setEye([1247, 600, 1972]);
    gv.setCenter([0, 0, 0]);

**2、** 视角限制 由于三维场景的特性，如果不作出视角限制，就会出现穿模，翻底等现象，尤其本案例有天空球效果，如果不作出视角限制当用户无限拉远后会出现视角跑到天空球外，场景消失问题，这将会非常尴尬！

具体实现是通过 setEye 方法和 setCenter 方法控制场景的 eye 和 center 变量实现，放置到 mp 函数内。

mp(listener, scope, ahead); // 增加自身属性变化事件监听器

// 限制 eye
    gv.mp(function (e) {
        if (e.property === 'eye') {
            if (gv.getEye()[1] < 90) {
                gv.getEye()[1] = 90;
            }
            if (gv.getEye()[1] > 1500) {
                gv.getEye()[1] = 1500;
            }
            if (gv.getEye()[0] > 2400) {
                gv.getEye()[0] = 2400;
            }
            if (gv.getEye()[0] < -2400) {
                gv.getEye()[0] = -2400;
            }
            if (gv.getEye()[2] > 2500) {
                gv.getEye()[2] = 2500;
            }if (gv.getEye()[2] < -2400) {
                gv.getEye()[2] = -2400;
            }
        }
    })

**3、** 点击切换场景 通过 mi 添加交互事件监听器为要点机交互模型绑定事件，通过 e.kind 判断点击事件，然后通过 tag 标签名获取要点击交互的模型对象。

首先在点击时候有个拉近效果和周围模型透明化效果，则是通过 flyTo 实现拉近效果和 setStyle 方法实现拉近后其他模型透明化。

具体代码如下：

gv.mi(function (e) {
        if (e.kind === 'clickData') {
            for (var i = 1; i <= 2; i++) {
                if (e.data.getTag() === 'engineRoom' + i) {
                    // 点击拉近场景
                    gv.flyTo(e.data, {
                        animation: true,
                        distance: 500
                    });
                    // 选中模型实化
                    e.data.setStyle('shape3d.transparent', false);
                    e.data.setStyle('shape3d.opacity', 1);
                    // 其他模型透明化
                    dm.each(data => {
                        if (data.getTag() != 'engineRoom' + i) {
                            data.setStyle('shape3d.transparent', true);
                            data.setStyle('shape3d.opacity', 0.3);
                            data.setStyle('all.transparent', true);
                            data.setStyle('all.opacity', 0.5);
                        }
                    })
                }
            }
        }
    })

实现效果如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNjE0OTU_size_16_color_FFFFFF_t_70 2]

然后在完成拉近场景和透明化其他模型后，开始实现场景切换效果。

场景切换的核心是通过 gv.deserialize() 反序列化显示路径对应场景，通过输入场景路径参数，在回调函数内完成场景渲染显示，代码如下：

gv.deserialize('scenes/油田.json', function (json, dm, gv, datas) {
        if (json.title) document.title = json.title;
        if (json.a['json.background']) {
            var bgJSON = json.a['json.background'];
            if (bgJSON.indexOf('displays') === 0) {
                var bgGv = new ht.graph.GraphView();
                bgGv.deserialize(bgJSON);
                bgGv.addToDOM();
                graphView.addToDOM(bgGv.getView());
            }
            else if (bgJSON.indexOf('scenes') === 0) {
                var bgG3d = new ht.graph3d.Graph3dView();
                bgG3d.deserialize(bgJSON);
                bgG3d.addToDOM();
                graphView.addToDOM(bgG3d.getView());
            }
            graphView.handleScroll = function () { };
        }
    })

但在这之前有一个问题，就是如何处理当前场景和通过反序列化渲染显示场景的关系，如果不作处理，就会出现当前场景和要切换显示的场景重合问题，所以在点击切换场景过程中，要先清空当前场景，为后来要切换的场景腾出地方。

所以在前面要先加一行代码：

dm.clear();

做完处理后，现在是完成了切换过去效果，但还有要切换回来的功能，这个实现非常简单，取了个巧，直接 window.location.reload(); 刷新页面就好。

最终这部分完整代码如下：

我将它放置到 jump 函数内，然后将 jump 函数放到前面点击事件中调用，让代码整体简洁一些。

实现效果如下图：

![在这里插入图片描述][1496396-20190416082137210-181783949.gif]

**4、** 管线流动效果和动态数据面板 最后两个功能实现非常简单，我就放到一块来说。

首先效果如下图所示：

![在这里插入图片描述][1496396-20190416082229044-960605726.gif]

管线流动效果的实现核心就是控制 UV 贴图偏移，所以通过动画控制器 startAnim 控制 UV 贴图偏移量就可以实现，在动画结束时，在 finishFunc 内回调函数即可实现动画循环。

pipelineAnim(0.1)
    function pipelineAnim(offset1) {
        var anim1 = ht.Default.startAnim({
            duration: 2000,
            action: function () {
                offset1 += 0.015;
                var pipelines = gv.dm().getDataByTag('pipeline');
                pipelines.setStyle('shape3d.uv.offset', [-offset1, 0]);
            },
            finishFunc: function () {
                pipelineAnim(offset1);
            }
        })
    }

数据面板则是通过定时器在固定间隔时间循环执行赋予随机数即可，在这里通过随机数模拟真实数据，在实际当中是通过和后台对接实现真实数据动态变化，代码如下：

setInterval(function () {
        for (var i = 1; i <= 4; i++) {
            var panels = gv.dm().getDataByTag('panel' + i);
            for (var j = 1; j <= 3; j++) {
                if (panels.a('text' + j) != undefined) {
                    var num = parseFloat(Math.random() * (100 - 10 + 1) + 10, 10).toFixed(2);
                    var textJson = { "参数名": "出口温度", "参数值": num, "参数单位": panels.a('text' + j)['参数单位'] };
                    panels.a('text' + j, textJson);
                }
            }
        }
    }, 1000)

## 结束语 ##

以上便是我今天给大家带来的工控案例，希望各位看官能够喜欢本 demo，在本案例中能够得到一些启发。

转载于:https://my.oschina.net/xhload3d/blog/3043733

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/d2159885f2644c90a7941e9572fea327.png
[HTML5 WebGL _ Web]: http://www.hightopo.com/demo/metering-station/
[1496396-20190416081626430-1876178318.gif]: /images/20220114/38e13e74f81b41cbb801a24023f98216.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNjE0OTU_size_16_color_FFFFFF_t_70]: /images/20220114/80593a0ead3144d482aff442b8e413d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNjE0OTU_size_16_color_FFFFFF_t_70 1]: /images/20220114/dcdbe37c48624f02a440409d8fa31861.png
[HT for Web]: http://www.hightopo.com
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNjE0OTU_size_16_color_FFFFFF_t_70 2]: /images/20220114/9e2fcae1ba824fc383a08b6d3a76a320.png
[1496396-20190416082137210-181783949.gif]: /images/20220114/414fc1d34663405c834d348e59d146ad.png
[1496396-20190416082229044-960605726.gif]: /images/20220114/30a0152b446348e79657722c381cb7ea.png