三維可視化# #3D開發
- WebGL 3D技術
- 新一代3D架構-ThingJS
- 3D可視化告警系統案例
- 基于ThingJS的通用架構設計
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可視化告警系統常見于城市交通指揮、地鐵通信、智能家居、消防安全領域，工業自動化裝置運維管理過程中，常遇到故障裝置定位困難、監控資料不形象不直覺等問題，基于 WebGL技術的3D架構開發，本案例實作了一個通用的3D可視化告警系統設計方案，不僅擺脫了傳統3D可視化方案依賴插件的束縛，解決了出錯率高、資料難以沉澱等問題。
從使用者角度出發，采用 WebGL技術在浏覽器端對工業生産裝置進行虛拟化仿真模拟，并基于綜合監控管理平台采集到的裝置運作資料進行工廠中的房間裝置運作情況的形象立體化展示，3D場景動效給管理者以良好的沉浸感和互動感，擺脫表格、文本等比較傳統的管理方式。
某港口的數字告警監控可視化應用界面
一個通用的告警系統，分為資料存儲層、資料處理層和資料展示層。
資料存儲層主要使用 mysql資料庫儲存設備、資料基本資訊和采集到的告警資訊，使用json檔案存儲3D模型資料資訊；資料處理層主要結合Ajax資料對接方式線上判斷告警資訊，利用JavaScript腳本對資料進行處理分析以及業務邏輯的實作；資料展示層主要使用基于 WebGL的 ThingJS平台元件完成對3D場景的加載渲染，并提供線上項目分享功能，使用者可以生成唯一URL和二維碼，在其他web系統嵌入iframe連結進行示範。【
官網注冊連結】
01 基礎功能建構
基礎操作含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;
}
} 02 自動巡航功能
不僅僅是自動駕駛系統，工業裝置可視化也可以加入自動巡航功能，以勻速的狀态移動前進。
使用者可以根據廠房環境和裝置布局情況，設定巡航路徑，當使用者點選自動巡航按鈕時，可以沿着設定好的路徑進行巡視，無需使用者手動操作，就能夠對路徑上的裝置健康情況進行全局了解，大大減少了使用者的工作量，提高了工作效率。
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可視化項目的實施時間和成本。