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

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

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

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

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

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

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

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

第一人称模式 — 操作就类似行人或车在行进的效果，可以通过键盘鼠标控制前进后退。

自动巡检模式 — 该模式下用户不需要任何操作，场景自动前进后退来巡查当前地铁站的场景。

鼠标操作模式 — 左键旋转场景，右键平移场景。

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

智慧化 — 智慧楼宇是一个生态系统，像人一样拥有感知能力、自我判断能力以及控制能力。

绿色化 — 绿色建筑在耗能、产能以及能源管理方面实现绿色化，楼宇安防实现绿色化监控。

运行成本可控制 — 基于可持续发展的要求，现代建筑、商业建筑需运行50年以上，建筑在运行过程中能源消耗巨大，如何降低运营成本降低，使建筑在低碳、环保的状态下健康运行。

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

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

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机房-机架-服务器-端口：

IDC数据中心双十一大屏：

智慧校园三维GIS可视化：

互联网应用监控系统：

智慧能源公共服务云平台：

现代农场物联网可视化应用：

仓储三维信息管理系统：

智慧能源管理平台： http://www.hightopo.cn/demo/bigscreen-newenergy/

3D空间技术卫星监测可视化： http://www.hightopo.com/demo/telemetering/

3D信息看板控制台： http://www.hightopo.cn/demo/human-info/command.html

3D/VR虚拟智慧城市： http://www.hightopo.com/demo/ComprehensiveDemo/

3D城市地下综合管廊管理系统： http://www.hightopo.cn/demo/CableDuctBank/index.html?showMap=false

排水泵站： http://www.hightopo.cn/demo/drainage/

3D机房实景建模： http://www.hightopo.com/demo/3DRoom7/index.html

3D机房热力图： http://www.hightopo.cn/demo/rackHeatmap/

工业大数据治理2D数据血缘关系拓扑图： http://www.hightopo.com/demo/bloodMap/

智慧照明整体解决方案大屏： http://www.hightopo.cn/demo/large-screen/index.html

楼宇智控： http://www.hightopo.cn/demo/build-frame/index.html

3D手机营业厅： http://www.hightopo.com/demo/ExhibitionHall/

3D道桥隧可视化： http://www.hightopo.cn/demo/HTBridge/

3D仓储货架管理系统： http://www.hightopo.com/demo/warehouse/index.html

3D纺织机械工厂生成流水线： http://www.hightopo.com/demo/intelligent-plant/

3D机房动环监控系统： http://www.hightopo.com/demo/3DRoom6/index.html

3D客运枢纽中心： http://www.hightopo.cn/demo/TransportCenter/

空调流水线3D可视化生产监控系统： http://www.hightopo.com/demo/productLining/

2D报警管理平台： http://www.hightopo.com/demo/alarm-manage/

2D水泵房监控系统： http://www.hightopo.com/demo/pump-room/

3D水泵站监控系统： http://www.hightopo.com/demo/HTPumpStation/

海绵城市： http://www.hightopo.cn/demo/cloud-monitor/demo4.html

Web组态电力接线图： http://www.hightopo.cn/demo/electric-bling/index.html

23D光伏大数据分析： http://www.hightopo.com/demo/alarm-manage/photovoltaic.html

光伏逆变器和汇流箱新能源监控系统： http://www.hightopo.cn/demo/pv/index.html

停车场智能充电桩监控系统： http://www.hightopo.cn/demo/ParkingLot/index.html

3D光能发电站： http://www.hightopo.cn/demo/lightenergy/

3D变电站变压器监控系统： http://www.hightopo.com/demo/intelligent-transformer/

3D高压开关柜： http://www.hightopo.com/demo/electrical-cabinets/

3D风电场运维系统： http://www.hightopo.com/demo/FanDevice/

2D燃气管道监控系统： http://www.hightopo.com/demo/gas-pipeline/

23D管道生产管控仿真培训系统： http://www.hightopo.cn/demo/ProductionControl/

3D裙房自控： http://www.hightopo.com/demo/cloud-monitor/demo1.html

3D空调机组： http://www.hightopo.com/demo/cloud-monitor/demo2.html

2.5D新风监控系统： http://www.hightopo.com/demo/wind-system/

PID 进料系统： http://www.hightopo.com/demo/PID-feed-system/

2.5D活塞式冷水机组： http://www.hightopo.com/demo/cooling/

2D换热站监控系统： http://www.hightopo.com/demo/heat-station/blue/

油田计量站3D可视化监控系统： http://www.hightopo.cn/demo/metering-station/

3D中石化加油站： http://www.hightopo.com/demo/ht-gas-station/

【求贤若渴】微信：13564678417 简历：eric@hightopo.com http://www.hightopo.com/demo/joinus/

感谢您如此耐心读到此，不妨认真考虑一下： http://www.hightopo.com/joinus.html