基於WebGL的3D可視化告警系統關鍵技術解析 ThingJS

三維可視化# #3D開發

1. WebGL 3D技術
2. 新一代3D框架-ThingJS
3. 3D可視化告警系統案例
4. 基於ThingJS的通用架構設計

WebGL 3D技術

---

WebGL是一種在網頁瀏覽器中渲染3D圖形的 JavaScript API，無需加裝插件，只需編寫網頁代碼便可實現3D圖形的展現。WebGL技術相較於傳統的Web3D技術有兩大優勢：第一，經過JavaScript腳本語言實現網絡交互式三維動畫製做，無需依賴任何瀏覽器插件；第二，WebGL基於底層的 OpenGL接口實現，具備底層圖形硬件(GPU)加速功能。

WebGL繪製3D模型的過程分爲四個步驟以下：

第一，獲取頂點座標。頂點座標一般來自三維軟件導出，在獲取到頂點座標後，存儲到顯存以便GPU更快讀取；第二，圖元裝配，畫出一個個三角形。圖元裝配就是由頂點生成一個個圖元(即三角形)，這個過程是由頂點着色器完成的。頂點着色器會先將頂點座標經過矩陣變換爲屏幕座標，而後由GPU進行圖元裝配；第三，進行光柵化，即生成片元 (一個個像素點)。第四，在圖元生成完畢以後，還須要給模型「上色」，由運行在GPU的「片元着色器」來完成。

新一代3D框架

---

若是直接使用 WebGL開發3D效率比較低，須要開發者對圖形學知識有很深刻的瞭解，碎片化的概念並不易於開發。爲了解決開發效率低的問題，出現了基於 JavaScript語言的第三方庫-three.js，這是開源的技術，受到了廣大前端轉3D開發師的追捧。

three.js是一個跨瀏覽器的腳本，它封裝了底層的圖形接口，對 WebGL有很好的支持，不須要掌握複雜的圖形學知識就能實現三維場景的渲染。如渲染黑色背景下的白色正方體和三角形, WebGL須要編程代碼大約150行，而 threejs編程只須要30行左右的代碼，工做量只有 WebGL的五分之一，大幅提升了開發效率。

相較而言，近兩年新興的3D框架-ThingJS，封裝了幾乎全部的3D概念，開發人員甚至不須要3D專業知識儲備，直接使用JavaScript調用3D源碼，輕鬆實現3D效果，順利完成二次開發。如加載3D場景，three.js須要100行左右的代碼，ThingJS僅需1行，直接JavaScript腳本調用3D場景URL。

3D可視化告警系統案例

---

3D可視化告警系統常見於城市交通指揮、地鐵通訊、智能家居、消防安全領域，工業自動化設備運維管理過程當中，常遇到故障設備定位困難、監控數據不形象不直觀等問題，基於 WebGL技術的3D框架開發，本案例實現了一個通用的3D可視化告警系統設計方案，不只擺脫了傳統3D可視化方案依賴插件的束縛，解決了出錯率高、數據難以沉澱等問題。

從用戶角度出發，採用 WebGL技術在瀏覽器端對工業生產設備進行虛擬化仿真模擬，並基於綜合監控管理平臺採集到的設備運行數據進行車間設備運行狀況的形象立體化展現，3D場景動效給管理者以良好的沉浸感和交互感，擺脫表格、文本等比較傳統的管理方式。

某港口的數字告警監控可視化應用界面

基於ThingJS的通用架構設計

---

一個通用的告警系統，分爲數據存儲層、數據處理層和數據展現層。

數據存儲層主要使用 mysql數據庫存儲設備、數據基本信息和採集到的告警信息，使用json文件存儲3D模型數據信息；數據處理層主要結合Ajax數據對接方式在線判斷告警信息，利用JavaScript腳本對數據進行處理分析以及業務邏輯的實現；數據展現層主要使用基於 WebGL的 ThingJS平臺組件完成對3D場景的加載渲染，並提供在線項目分享功能，用戶能夠生成惟一URL和二維碼，在其餘web系統嵌入iframe連接進行演示。【官網註冊連接】

1. 基礎功能構建

---

基礎操做含3大功能模塊：設備管理模塊、3D場景漫遊模塊以及設備健康狀態管理。

(1) 設備管理。

用戶能夠查看設備基本信息，經過拖拽的形式改變設備在場景中的位置，實現設備的縮放和旋轉操做，還能夠根據本身的須要添加和刪除設備。ThingJS的開發師調用js腳本，控制物體的位置、旋轉、縮放，包括Z軸方向移動。【查看完整示例】

// 位置
app.on('click', function(event) {
    if (event.picked)
        car.position = event.pickedPosition;
});
// 移動，z軸方向
function obj_translate() {
    car.translate([0, 0, -1]);
}
// 旋轉，y軸方向
function obj_rotate() {
    car.rotateY(45.0);
}
// 縮放
function obj_scale() {
    car.scale = [1, 2, 1];
}

(2) 3D場景自由漫遊。

用戶經過鼠標完成對整個3D場景的移動，縮放和旋轉操做，從而知足用戶360度查看場景的須要，給用戶帶來良好的交互感和浸入感。ThingJS示例採用js腳本讓攝像機自動環繞某看點位置（世界座標系下）或某物體旋轉。【3D演示】

某能源儲能電站告警系統可視化應用

(3) 設備健康狀態管理。

用戶可自由查看機房內任意設備的健康度，健康度分爲三個區間，分別用紅黃綠三種顏色來表示設備的健康狀態。當系統檢測到設備出現告警信息時，在該設備的上方彈出對應的告警標誌，用戶點擊告警標誌，彈出告警詳情，包括告警時間、告警類別、告警緣由等。ThingJS平臺內，基於Ajax技術能夠完成基本的數據請求，對設備溫度、健康狀態進行判斷，並設定一個報警界限值。【查看完整示例】

function updateData(obj) {
    // 若是網站是 https 接口則對應 https 請求
    // 若是網站是 http 接口則對應 http 請求便可
    $.ajax({
        type: "get",
        url: "https://3dmmd.cn/getMonitorDataById",
        data: { "id": obj.id },
        dataType: "json", // 返回的數據類型 json
        success: function (d) {
            console.log(d);
            var temper = d.data.temper;
            // 設置物體身上的監控數據
            obj.setAttribute("monitorData/溫度", temper);
            changeColor(obj);
            // 每隔3s 請求一次數據
            timer = setTimeout(function () {
                updateData(obj)
            }, 3000);
        }
    });
}
// 中止請求數據
function stopUpdate() {
    clearTimeout(timer);
}
// 若是溫度>25 改變顏色
function changeColor(obj) {
    var temper = obj.getAttribute("monitorData/溫度");
    var value = temper.substr(0, temper.indexOf("℃"));
    if (value > 25) {
        obj.style.color = 'rgb(255,0,0)';
    }
    else {
        obj.style.color = null;
    }
}

2. 自動巡航功能

---

不單單是自動駕駛系統，工業設備可視化也能夠加入自動巡航功能，以勻速的狀態移動前進。

用戶能夠根據廠房環境和設備佈局狀況，設定巡航路徑，當用戶點擊自動巡航按鈕時，能夠沿着設定好的路徑進行巡視，無需用戶手動操做，就可以對路徑上的設備健康狀況進行全局瞭解，大大減小了用戶的工做量，提升了工做效率。

ThingJS利用js腳本中的攝像機概念來肯定觀察3D場景的視角，讓攝像機一直跟隨物體，達到設定巡航路線的目的。【查看完整示例】

new THING.widget.Button('攝像機跟隨物體', function () {
        // 每一幀設置攝像機位置 和 目標點
        car.on('update', function () {
            // 攝像機位置爲 移動小車後上方
            // 爲了便於計算 這裏用了座標轉換 將相對於小車的位置 轉換爲 世界座標
            app.camera.position = car.selfToWorld([0, 5, -10]);
            // 攝像機目標點爲 移動小車的座標
 app.camera.target = car.position
        }, '自定義攝影機跟隨');
    });


    new THING.widget.Button('中止', function () {
 car.off('update', null, '自定義攝影機跟隨');
    });
});

ThingJS項目主要採用B/S架構，基於WebGL技術並採用更高效的3D封裝庫實現，用戶直接在瀏覽器上經過url地址訪問項目，不須要安裝任何插件。

ThingJS平臺的在線開發方案在瀏覽器端對自動化設備以及各個監控系統採集到的設備運行數據進行三維仿真模擬，不只使得3D數據的展現更加形象、立體，達到了輔助運維的目的；同時一次在線開發，能夠在多種終端設備、多種屏幕尺寸的系統上運行，隨時隨地查看監控畫面，大大下降了運營成本，減小了3D可視化項目的實施時間和成本。