三維可視化##3D開發
- Web端糧堆溫度可視化
- 什麼是B樣條曲線
- ThingJS 3D引擎技術
- 糧堆的溫度可視化告警
基于WebGL的倉儲糧食溫度可視化 ThingJS三維可視化##3D開發
為了控制谷物儲藏溫度，需要創造一個不利于蟲黴生長低溫環境的儲糧技術環境，然而出于成本考慮以及進出糧的需要，糧堆内的溫度傳感器設定數量有限，是以在儲糧當中測得的溫度值隻是傳感器附近的溫度，其他部分則需要利用相應的方法進行數值模拟。
如今，計算機可視化技術畫出相應的三維立體圖像，以便人們得到直覺、有效的結果。面對人們對跨平台，Web互動等方面的需求越來越強烈以及網際網路技術的飛速發展，網絡三維技術應運而生。網絡三維是一種能實時渲染且具有互動性的網絡技術，突破了地域、平面以及空間的限制，使得人們更便捷地處理相應資料。
ThingJS有164個源碼示例下載下傳>>是以，我們的客戶采用雙B樣條采樣方法進行數值模拟，并從時間和空間域兩方面進行分析，采用B樣條插值函數的方法進行溫度插值拟合，這樣就能夠解決糧食溫度傳感器密度的缺陷，并利用 WebGL技術實作糧堆溫度的可視化。
什麼是B樣條曲線？
B樣條曲線一般應用在計算機輔助設計與制造當中，是一種由大量控制點生成曲線的工具，它具有樣條曲線的普遍特性：
（1）是一條隻需要幾個點依次指定的光滑曲線；
（2）可以通過相應算法找到曲線或者曲面的點；
（3）根據人們對近似度的需求，通過疊代計算方法使用線段能足夠準确再現曲線的形狀。
曲線有9個控制點定義，曲線整體趨向控制點，B樣條曲線按照節點分布的情況，分為均勻B樣條曲線和非均勻B樣條曲線。
WebGL直接工作在計算機的顯示卡端，Three.js是基于WebGL的3D架構，這是一種在3D圖形中簡單、直覺的建立常見模型的方法，能夠高速利用許多最佳圖形引擎實踐技術，使用流程沿用一般三維世界的基本結構進行定義：設定場景-錄影機-燈光-物體-渲染器，如圖所示。
通過建立一個HTML頁面，在HTML當中添加 canvas元素以便于 WebGL進行渲染，然後再在body上添加 onload事件來接收初始化整個 WebGL環境。于是在頁面加載完成後，調用 onload中的函數， WebGL開始渲染。
ThingJS是近兩年新興的3D類庫，提供線上開發智慧建築、安全消防及倉儲的3D可視化元件，比three.js更加節省開發時間，其中3D場景通過CampusBuilder進行搭建後導入ThingJS平台，擷取場景URL即可。無論是錄影機、燈光、對象（物體）或渲染器，都不用重新設定，直接JavaScript調用3D腳本進行開發，也可以定制更炫酷的可視化功能。
ThingJS平台注冊位址 基于ThingJS的傳感器模拟如圖所示，左圖為電腦上運作，右側為手機中運作。
某一糧倉當中糧堆内傳感器排列如圖中球體呈8×6×3矩形排列。每一個球體代表糧堆内相應位置的傳感器，當傳感器提示溫度正常時，球體呈綠色，溫度過高或者過低時，球體呈紅色；資料顯示不正常時呈藍色利用滑鼠拖動整個矩陣，可以從不同角度觀察糧堆内整體情況傳感拟圖。
糧堆溫度的可視化告警
利用雙三次B樣條插值曲面依據各個溫度傳感器的數值模拟出糧堆溫度曲面，然後通過反算得到曲面上各個點的資料，對曲面的點的資訊（空間内位置資訊，溫度值）進行處理，通過ThingJS接收點的平面位置資訊以及溫度資訊，以點的平面位置為相應的X、Y坐标，溫度值為相應的Z坐标，配以某種顔色逐點渲染生成糧堆内平面溫度圖。
糧堆内部某一平面溫度如圖5所示，利用滑鼠可以從各個角度觀察儲糧資訊。X、Y代表糧堆内某一平面糧食的實際位置，Z代表相應點的溫度值，Z=0即XY面代表一溫度基面，高于XY則該面的糧食溫度過高，相反低于該面，說明糧面溫度處于警戒線以下。
ThingJS平台内，基于Ajax技術可以完成基本的資料請求，對裝置溫度、糧食狀态進行判斷，并明确一個報警界限值，如果超過溫度的警戒線，糧堆曲面的上方将彈出對應的告警标志，使用者點選告警标志，彈出告警資訊如事件、原因等，并改變該裝置周圍的顔色。代碼如下：
// 如果溫度>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;
}
} 通過B樣條插值曲面的方法對糧堆内部的溫度分布進行數值模拟，然後利用WGL技術實作溫度監控的三維可視化，因為其具有跨平台、免插件以及聯網資料互動的特性，比起普通方法更直覺、高效，便于相關人員遠端監控。
鑒于WebGL的特性，人們還可以通過手機、平闆等移動終端通路實時了解糧堆内溫度資訊，不過由于直接在GPU端渲染，一般的移動終端限于硬體條件隻能通路簡單的頁面，但是在電子技術日新月異的今天，這些問題一定能夠得到解決。
了解更多 ThingJS Demo