分享數百個 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/
【求賢若渴】微信：13564678417 簡歷：eric@hightopo.com http://www.hightopo.com/demo/joinus/

感謝您如此耐心讀到此，不妨認真考慮一下：http://www.hightopo.com/joinus.html