基於WebGL的三維大屏可視化技術實踐 thingjs 3d 開發


DataV, 騰訊雲圖,帆軟等可視化大屏應用廠商,都提供三維可視化分析工具。ThingJS是近兩年新興的3D可視化開發組件,助力物聯網3D可視化的未來發展。新基建浪潮洶涌,智慧城市建設也到了落地階段,不再是純粹的概念,很多物聯網技術開始嶄露頭角,相較於之前的低調行為,3D可視化領域有何變化呢?

以前

三維可視化城市大屏應用屬於保密項目,CVS(可視化展示服務)系統部署在安全消防、城市交通、智慧工廠、城市管理等運營管理客戶端,屬於小眾需求,隨着雲模式部署比例加大,大屏應用支持可視化組件進行監控畫面搭建,中小開發團隊有機會入場,雲端共享各行業的“示例”開發資源,加速3D可視化開發。

現在

CVS系統基於HTML5技術構建,運行於瀏覽器環境中,大屏應用基於Webgl開發3D效果,thingjs提供一站式在線開發服務,一鍵發布3D項目。用戶不需要安裝任何插件或客戶端軟件,可以直接訪問URL地址在瀏覽器中設計工業監控畫面,具有極大靈活性。
image.png
演示地址

ThingJS系統采用B/S架構,基於webG繪圖技術標准,提供一套基於Web瀏覽器的3D可視化平台組件,支持HTML5/SVG等最新技術,為開發人員制作符合用戶使用習慣的大屏可視化應用,包括2D圖表分析、3D建築實景等相關內容,能夠在可視化界面進行詳略操作,控制實時數據及動畫展示、歷史回放、報警、命令下發等功能。

運行環境主要是最終配置好的監控畫面運行相關的功能集合,包括實時數據及動畫展示、歷史回放、報警、命令下發等功能。在運行環境中會在瀏覽器窗口中加載用戶所創建好的畫面,並根據屏幕實際大小進行自適應縮放,同時根據用戶設置的刷新周期進行數據獲取和元素渲染,實現對設備的遠程監控、診斷維護和故障預警。
image.png

項目交付初期可以跨平台終端(PC/手機/瀏覽器)展示和訪問,最大化演示效果。使得整套系統可以獲取最全面的信息,用戶只需要一個瀏覽器便可以掌控整個系統運行情況,極大滿足隨時隨地監控的需求,從而能夠更加從容處理各種突發情況。

image.png

ThingJS用於構建大屏可視化應用2D/3D效果,屬於物聯網可視化“最后一公里”,比起純粹的炫酷效果,用戶更希望所有信息都可以實時到達終端界面,最大限度降低人員操作的延遲,提升工作效率。為了讓開發者有精力處理更重要的數據可視化分析內容,ThingJS平台提供了可靠的3D開發步驟(場景搭建-3D開發-數據接入-項目部署),大幅降低開發成本,可視化效果保質保量,讓“最后一公里”不掉隊。

1. 基於城市級、園區級場景的組態設計

CityBuilder城市級、CampusBuilder園區級場景設計器使用SVG技術,采用圖形拖拽、屬性設置等操作搭建3D場景,加入2D圖表進行可視化分析。使用thingjs自帶chartbuilder編輯器,或者導入echarts等BI軟件,基於城市基礎數據加入專業的趨勢和報警控件。

2. 自定義的3D開發生態

thingjs支持使用 Java Script腳本語言實現事件監聽、命令下發等操作,3D源碼示例易用性強,使得用戶能夠快速上手,用最短的學習時間搭建專業級的3D動畫,效果直觀。

3. 多平台項目管理方式

值得一提的是,數據安全性、操作有效性是項目開發過程中的核心要求。完成3D場景開發,接下來應該接入實時數據源,接收物聯網設備傳感信息。thingjs提供統一的框架接口,支持多種數據格式如JSON 、OBJ、 Collada、STL。為了更好地對接企業中已有的系統和大數據環境,thingjs支持兩種部署模式:在線部署(即雲模式)和離線部署。

雲模式針對大數據雲環境的部署,可以跟大數據PDS(Process Data Service)對接,一鍵在線發布項目。離線部署在局域網的客戶端進行私密部署,通過不同數據代理接入不同系統數據進行展示。

4. 跨系統多終端訪問

用戶的訪問操作跨終端跨平台,項目一般會采用多套系統完成整體實施,因此畫面的跨系統訪問性也非常重要。為了滿足項目演示、協作和分享需求,thingjs提供了iframe分享功能,用戶可以生成畫面的唯一URL鏈接和二維碼,,可以直接在其他Wcb系統嵌入該畫面進行展示。
image.png

關於ThingJS
優鍩thingjs平台【官網注冊地址】在騰訊總部大廈、阿里雲IOT平台、dataV開發平台均有技術合作,平台有15萬個開發者入駐,其應用布局教育、電力、工業、智慧城市和安防多個領域標桿項目,3D眾創開發擴展技術獲得社會認可。

image.png


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM