告別傳統工業網際網路，提高數字管控思維：三維組態分散式能源站

HT學習筆記發表於2020-05-17
分散式
前言
在網路迅速發展的今天，人們的交流已經不再僅限與面對面，一個視訊通話就能拉近彼此之間的距離，而在工業管控上卻不僅僅侷限於實時視訊流的監控，HTML 本身擁有強大的 web 元件可供我們去實施一些好玩的例子，甚至加上一些簡單有趣的動畫和實時資料的對接，效果上可不止提高了一個水平。加上現如今已經啟動許久的 工業4.0 衍生出的新一代 工業網際網路 和不久才面世於眾的 5G 新時代，資料視覺化與網路頻寬發展的碰撞，激發出了一代 3D 資料視覺化監管的發展。而 Hightopo（以下簡稱 HT ）的 HT for Web 產品上的 web 組態提供了豐富的 2D 組態和 3D 組態效果，可以根據需求快速實現一套完整的資料視覺化系統。本文將通過一個 HT 的 3D 組態實現的一個視覺化分散式能源站系統帶你走進豐富的組態的大門。
 
介面簡介及效果預覽
場景搭建上我們呈現了以熱、電、冷聯供為主要形式的多聯產系統的分散式能源站系統，根據管道流動傳遞的流程步驟下，有效地實現了能源的梯級利用的展示效果：
 
 
程式碼實現
在能源站的建設中，分散式能源站是指小規模化、利用熱、電、冷聯供為主要形式分佈於負荷附近的清潔環保發電設施，是一種相對可靠又高效的發電形式。
3D 場景實現上通過建立 ht.graph3d.Graph3dView 來呈現 3D 的內容，3D 檢視元件進行 deserialize() 反序列化對應的 json 呈現出 3D 場景內容，然後將 3D 元件再加入到 body下的方式實現場景的載入渲染的效果。還可以自定義修改一些互動或者視角上的限制，如修改左右鍵的互動方式或者設定場景的最大仰角，都能使使用者在互動體驗上更為流暢。
// 建立三維拓撲檢視
this.g3d = new ht.graph3d.Graph3dView();
this.g3dDm = this.g3d.dm();
// 將 3D 元件加入到 body 下
this.g3d.addToDOM();
// 修改左右鍵互動方式
let mapInteractor = new ht.graph3d.MapInteractor(this.g3d);
this.g3d.setInteractors([mapInteractor]);
// 修改最大仰角為 PI / 2
mapInteractor.maxPhi = Math.PI / 2;

 

為了能在懸浮建築模型的時候，視覺上有互動體驗，這裡設定了模型的高亮模式。

// 設定滑鼠懸浮高亮模式
this.g3d.setHighlightMode('mouseover');
// 設定高亮顏色
ht.Style['highlight.color'] = '#FEB64D';

 

場景渲染載入出來後，我們就能對於分散式能源站的工業流程可以通過管道的動畫來展示。HT 提供的 ht.Shape 是極其強大的圖元型別，其在 GraphView 和 Graph3dView 元件上都能展示出各種二維和三維的形狀效果， 其擴充套件子類 ht.PolyLine 可實現三維空間管道的功能，我們可以通過 ht.PolyLine 繪製出流程所經的路徑，通過 ht.Default.startAnim() 動畫函式去執行呼叫變化管道上的 uv 貼圖的偏移值，就可以達到流動的效果。

實現的程式碼如下：

animflow() {
    // 動畫執行函式
    ht.Default.startAnim({
        duration: 2000,
        easing: (t) => { return  t },
        action: (v, t) => {
            // 通過資料模型獲取唯一標識 tag 得到管道節點設定 uv 偏移流動動畫
            this.g3dDm.getDataByTag('flow1').setStyle('top.uv.offset', [ v, 0 ]); 
            this.g3dDm.getDataByTag('flow2').setStyle('top.uv.offset', [ v, 0.5 ]);
            this,g3dDm.getDataByTag('flow3').setStyle('top.uv.offset', [ -v, 0.5 ]);
            ...            
        },
        finishFunc:  () => {
            animflow();
        }
    });
}

 

而場景中呈現出來的資料，我們可以通過對接一些主流的介面，例如 ajax、axios 或者是 WebSocket，根據自己對接互動的需求，可以判斷採用輪詢呼叫介面或者是對接雙向進行資料傳輸，起到實時重新整理資料的需求，而資料的載體可以對接到 HT 的 3D公告板 billboard 上進行展示：

 

billboard 同樣是基於 ht.Shape 的子類，對於 Shape 不管是在 2D 組態或者是 3D 組態上呈現，都可以通過一些定義的屬性 styleMap 來設定一些本身自帶的屬性值，當然使用者也可以自己通過在 attrObject 裡設定一些自定義屬性。而分散式能源站中，我們通過對 billboard 設定了一些屬性值來控制公告板的屬性資訊：

let billboard = new ht.Node();
billboard.s({
    // 設定 shpe3d 的型別為公告板 billboard
    "shape3d": "billboard",
    // 設定公告板的圖片 image
    "shape3d.image": "symbols/htdesign/box/panel.json",
    // 設定公告板始終自動旋轉面對螢幕
    "shape3d.autorotate": true,
    // 設定公告板開啟透明
    "shape3d.transparent": true,
    // 設定公告板不可移動
    "3d.movable": false,
    // 設定公告板始終置頂
    "shape3d.alwaysOnTop": true,
    // 設定公告板不可選中
    "3d.selectable": false,
    // 公告板開啟快取
    "shape3d.image.cache": true
});

 

如果貼圖是向量，對於開啟了快取的公告板，效能上會大大提高。對比一下這個 例子，你會發現快取機制上效能的差異性。由此看出，快取機制對於整體場景的流暢度是至關重要的，對於一些不必要實時重新整理的皮膚資訊，我們可以採取快取的方式，並且在下一次更新的時候呼叫 Graph3dView.invalidateShape3dCachedImage(node)來手動重新整理這個節點，從而大大提高了場景的效能：

g3d.invalidateShape3dCachedImage(billboard);
 
總結
歷經了2018的工業網際網路元年和2019的 5G 元年，不止是分散式能源站視覺化系統的呈現，工業網際網路在管控方面將迎來了新時代。為了給精彩的 HTML web 組態新增上絢麗的顏色，HT 在 2D 組態和 3D 組態上不斷地完善，可以通過 2/3D 融合的場景與圖紙搭建出一個個好玩的視覺化系統。而作為在 3D 組態上可以呈現出多樣化效果下搭建的視覺化系統場景，傳統上一些資料視覺化的工藝流程同樣能通過 2D 組態來實現：換熱站遠端監控系統
 
2019 我們也更新了數百個工業網際網路 2D/3D 視覺化案例集，在這裡你能發現許多新奇的例項，也能發掘出不一樣的工業網際網路：https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA
同時，你也可以檢視更多案例及效果：https://www.hightopo.com/demos/index.html

相關文章