分享数百个 HT 工业互联网 2D 3D 可视化应用案例

在 2018 到 2019 年，我们认为是国内工业互联网可视化的元年，图扑软件作为在工业可视化领域的重度参与者，一线见证了众多 HTML5/Web 化、2D/3D 化的项目在工业界应用落地，我们觉得有必要在此分享下过去一年，基于 HT 实施的数百个工业互联网 2D 3D 可视化应用案例，希望能激发行业和学术工作者对可视化的深度思考，为推进国内工业互联网发展出份薄力。

数百个工业互联网2D/3D可视化案例集：http://www.hightopo.com/demos/index.html

提到工业互联网往往会涉及：物联网、IoT、5G、数字孪生、边缘计算、PaaS平台、SaaS应用、产业互联网、互联网+、工业4.0、智慧城市、智慧园区、智慧楼宇、智能制造等概念，但本文将围绕可视化的话题，围绕更基础的 HTML5/WebGL/WebVR 等底层技术，我们觉得业界还没达到智能化、平台化的成熟阶段，走得太快即使是 GE Predix 也会从明星变流星，了解垂直行业需求，采集足够多有效数据，做好实时的、稳定的、美观的、Web 化的 2D 和 3D 数据可视化呈现，是工业互联网需要走好的第一步。

3D城市建筑群：http://www.hightopo.com/demo/intelligent-city/entry/dest/index.html

3D动车站：https://hightopo.com/demo/BulletTrainStation/index.html

3D海上钻井平台：http://www.hightopo.com/demo/drilling-platform/

3D水泥工厂工艺流程：http://www.hightopo.com/demo/CementFactory/

3D转油站管网设备监控系统：http://www.hightopo.cn/demo/transfer-station/index.html

3D高炉炼铁工业流程：http://www.hightopo.com/demo/large-screen-puddling/

3D机房可视化：http://www.hightopo.com/demo/intelligent-idc/

正如图扑软件合作伙伴研华科技董事长刘克振所言：

先要实现数据的可视化，生产和经营管理改善达到15%后再一点一滴的往前进。

研华科技 WISE-PaaS 工业物联网云平台，基于 HT 图形组件技术，集成边缘计算和 IoT 云平台，提供从边缘感知及设备到云的数据采集、分析、可视化软件服务，协助系统集成商和制造商快速开发各垂直产业的应用，形成新形态的 IIoT 云端商务模式。2018 年研华物联网共创峰会上，研华发布了基于 Hightopo/HT for Web 的最新物联网平台架构 WISE-PaaS 3.0，WISE-PaaS/SaaS Composer 实现了流程可视化云端组态工具；支援客制化绘图元件，可将应用场景导入 3D 建模绘制与互动，并以毫秒等级的画面刷新速度，搭配 WISE-PaaS/Dashboard 将关键管理数据以视觉直观呈现，协助萃取数据价值与提升运营效率。

3D园区能耗管理系统：

2D污水处理工业流程：

WISE-PaaS软件平台架构：

近年来，中国制造2025战略的提出为制造业转型升级指明了方向，先进制造业作为经济增长的新引擎正在逐步发力。最近图扑软件合作伙伴三一集团，登陆浙江卫视《智造将来》节目，三一无人挖掘机被赞“新制造”的开始，节目中三一重机董事长俞宏福向观众介绍，所有三一设备已实现互联，通过大屏幕可以看到，地图上每一个点，都代表一台挖掘机在工作，此 Powered by HT 的挖掘机运维大屏，是又一 HTML5 技术在工业制造领域的经典应用案例。

HT Inside《智造将来》第一季：

三一重工实时运维大屏：

3D挖掘机：http://www.hightopo.com/demo/ht-excavator/

工业互联网泛化到产业互联网，其实离我们生活并不遥远，最近第二十一届中国高速公路信息化研讨会暨技术产品展示会在厦门隆重举行，海信网络科技交通运输事业部智能公路产品部、公路行业专家彭泳在研讨会上向与会专家详细介绍了行业内最全面的智慧高速公路管理平台——海信高速综合运营管理平台。有幸在图扑软件总部厦门家门口，看到自家 Hightopo 产品的界面。海信高速综合运营管理平台基于 HT for Web 的 2D 和 3D 图形组件技术，使隧道路况、设备、健康等情况全面直观地在实时进行展现，帮助管理者快速直观的了解隧道的交通及本身的健康状况。通过灵活的，图形化的编辑工具，可以制定隧道在不同工况下的设备联动方案，提高隧道日常及应急时设备操作的科学性和及时性，其开放式的系统架构，保证隧道系统同其业务系统如指挥调度，养护管理，运维管理，收费管理等其他业务系统的有机融合。

http://www.hightopo.com/demo/tunnel2/index.html

2018年8月15日，第十届中国国际道路交通安全产品博览会在成都隆重召开，此次海信网络科技不仅携带了数据智能引擎、交通云、城市智慧心脏2.0、智能驾驶辅助系统、智慧停车系统、视频结构化系统、车智网系统，还发布信号服务新品——海信“信号优化运营管理平台1.0”，以及为保障上合峰会、与青岛交警联合打造的“警卫交通保障专用系统”。这也是峰会结束后，该系统首次对外展出。海信信号优化运营管理平台基于 HT for Web 平台，可对路口各种基础信息进行快速建档、数字化存储，支持版本履历追溯更新，实现对路口的全生命周期和精细化管理，通过 HTML5 技术实现了桌面和移动多端发布的跨平台性，同时基于 HT 封装的 WebGL 技术实现了 3D 数据中心机房的可视化运维。

智慧交通领域除了公路隧道外，自然离不开中国极其伟大便捷的城际间高铁/动车/火车工程，作为我这种居住上海出门全靠虹桥的程序员，有幸参与了虹桥火车站数据中心的 3D/VR 可视化运维系统，时代的进步和前端 HTML5/WebGL/WebVR 技术的成熟，以前只能靠 Unity3D/Unreal 游戏引擎实现的 3D/VR 项目，现在慢慢能让 Web 开发人员驾驭，更好的与其他 Web 业务系统融合，毕竟用 Unity3D/Unreal 游戏引擎开发整个业务系统是比较反人类，相信 Web 承担越来越重度的渲染呈现应用是不可逆的趋势。

除了城际间的，肯定不能拉下城市内的地铁站，实现过程可参考此文《基于 HTML5 WebGL 的地铁站 3D 可视化系统》。该 3D 场景从正面展示了一个地铁站的现实场景，包括地铁的实时运行情况，地铁上下行情况，视频监控，烟雾报警，电梯运行情况等等，帮助我们直观的了解当前的地铁站。提供了三种交互模式：

第一人称模式 — 操作就类似行人或车在行进的效果，可以通过键盘鼠标控制前进后退。
自动巡检模式 — 该模式下用户不需要任何操作，场景自动前进后退来巡查当前地铁站的场景。
鼠标操作模式 — 左键旋转场景，右键平移场景。

3D地铁实景图扑站：http://www.hightopo.com/demo/ht-subway/index.html

3D地铁站：http://www.hightopo.com/demo/metrostation/

3D动车站：http://www.hightopo.com/demo/railway-station/

除了地上走的，来点天上飞的，如下图北京首都机场 T3 航站楼消防监控系统，设计师特意为清晨、中午、夜晚场景，提供了不同 3D 空间盒子背景切换效果，以下只是例子大家可点击切换体验，实际项目肯定是更智能化。 https://hightopo.com/demo/airport-t3/

http://www.hightopo.com/demo/airport-building/

智慧楼宇和人们的生活息息相关，楼宇智能化程度的提高，会极大程度的改善人们的生活品质，在当前工业互联网大背景下受到很大关注。目前智慧楼宇可视化监控的主要优点包括:

智慧化 — 智慧楼宇是一个生态系统，像人一样拥有感知能力、自我判断能力以及控制能力。
绿色化 — 绿色建筑在耗能、产能以及能源管理方面实现绿色化，楼宇安防实现绿色化监控。
运行成本可控制 — 基于可持续发展的要求，现代建筑、商业建筑需运行50年以上，建筑在运行过程中能源消耗巨大，如何降低运营成本降低，使建筑在低碳、环保的状态下健康运行。

3D消防互联网平台：http://www.hightopo.com/demo/firecontrol/

传统的智慧楼宇/楼宇自动化/楼宇安防/智慧园区常会采用 BIM（建筑信息模型 Building Information Modeling）软件，如 Autodesk 的 Revit 或 Bentley 这类建筑和工程软件，但这些 BIM 建模模型的数据往往过于庞大臃肿，绝大部分细节信息对楼宇自控意义不大，反而因为性能影响拖累了行业 Web SCADA 或 Web 组态监控的发展趋势。参见《基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控》，我们采用以 Hightopo 的 HT for Web 产品轻量化 HTML5/WebGL 建模的方案，实现快速建模、运行时轻量化到甚至手机终端浏览器即可 3D 可视化运维的良好效果。

轻量化 BIM 模型的 3D 智慧园区楼宇可视化：http://www.hightopo.com/demo/ht-smart-building/

随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中，尤其是高清时代的来临，更加快了网络摄像机的发展和应用。在监控摄像机数量的不断庞大的同时，在监控系统中面临着严峻的现状问题：海量视频分散、孤立、视角不完整、位置不明确等问题，始终围绕着使用者。因此，如何更直观、更明确的管理摄像机和掌控视频动态，已成为提升视频应用价值的重要话题。参见《基于 HTML5 的 WebGL 自定义 3D 摄像头监控模型》，围绕如何提高、管理和有效利用前端设备采集的海量信息为公共安全服务，特别是在技术融合大趋势下，如何结合当前先进的视频融合，虚实融合、三维动态等技术，实现三维场景实时动态可视化监控，更有效的识别、分析、挖掘海量数据的有效信息服务公共应用，已成为视频监控平台可视化发展的趋势和方向。目前，在监控行业中，海康、大华等做监控行业领导者可基于这样的方式规划公共场所园区等的摄像头规划安放布局，可以通过海康、大华等摄像头品牌的摄像头参数，调整系统中摄像头模型的可视范围，监控方向等，更方便的让人们直观的了解摄像头的监控区域，监控角度等。

3D数据中心摄像头资产管理系统：http://www.hightopo.com/demo/Camera/index.html

2018 年东方国信工业互联网平台 Cloudiip 重磅发布，该工业平台前端图形组态 Web SCADA 基于图扑软件的 HT for Web 技术，以物联网为基础，以大数据为中心，以大炼铁产线为载体，以配矿、焦化、烧结、球团、高炉各核心冶炼工序的协同为目标，研用大数据处理技术，工艺机理模型、机器学习、机器视觉、推理机、数值模拟和自动控制等技术为手段，实现全局性成本最优能效最低的智能协同制造。并基于炼铁云和上百个工艺微服务实现生产企业、设计院、科研院所、供货商、期刊学会等的生态链接和资源优化配置，推动行业大数据深度应用和和产学研用高效结合。目前 Cloudiip 形成了能源云、冶金云、工业锅炉云、空压云、化工云、安监云、高铁云、风电云、矿山云、政府工业云等行业应用子平台。

2018 年东方国信携图扑软件的 HT for Web 产品参与了福州数字中国、贵阳数博会和北京软博会等大型展会，HT 通过大屏和 VR 设备展示了各种工业互联网垂直行业的丰富的 2D 和 3D 可视化应用场景，对前沿可视化技术进行了展望和探索。

数字中国：4月22日，首届数字中国建设峰会在福州举办
数博会：5月26日，中国国际大数据产业博览会在贵阳召开
软博会：6月29日，第二十二届中国国际软件博览会在北京展览馆举行

展会上很多小朋友对 VR 设备的好奇和热情超出了我们的想象，居然需要排队试玩。当然目前 VR/AR 应用还处于初步阶段，特别是云端化的 VR/AR 业务对带宽的需求是巨大的。高质量 VR/AR 内容处理走向云端，满足用户日益增长的体验要求的同时降低了设备价格，VR/AR 将成为移动网络最有潜力的大流量业务。虽然现有 4G 网络平均吞吐量可以达到 100Mbps，但一些高阶VR/AR 应用需要更高的速度和更低的延迟。5G 的延迟减少了10倍，流量容量提高了 100 倍，网络效率提高了 100 倍，5G可以解决这些问题，这对于大规模采用 VR/AR 至关重要。

电信3D机房-机架-服务器-端口：