分享數百個 HT 工業互聯網 2D 3D 可視化應用案例

過去的 2018 年，我們認為是國內工業互聯網可視化的元年，圖撲軟件作為在工業可視化領域的重度參與者，一線見證了眾多 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機房-機架-服務器-端口：

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/

【求賢若渴】如果你對我們公司有興趣，可以投簡歷：[email protected]

如果你對我們的產品有興趣，可以點擊下方更多關注我們的官網並聯系我們~謝謝~