基於WebGL的倉儲糧食溫度告警可視化 ThingJS

2021-01-21 ThingJS

#三維可視化##3D開發#

Web端糧堆溫度可視化什麼是B樣條曲線ThingJS 3D引擎技術糧堆的溫度可視化告警

Web端糧堆溫度3D可視化

為了控制穀物儲藏溫度，需要創造一個不利於蟲黴生長低溫環境的儲糧技術環境，然而出於成本考慮以及進出糧的需要，糧堆內的溫度傳感器設置數量有限，因此在儲糧當中測得的溫度值只是傳感器附近的溫度，其他部分則需要利用相應的方法進行數值模擬。

如今，計算機可視化技術畫出相應的三維立體圖像，以便人們得到直觀、有效的結果。面對人們對跨平臺，Web交互等方面的需求越來越強烈以及網際網路技術的飛速發展，網絡三維技術應運而生。網絡三維是一種能實時渲染且具有交互性的網絡技術，突破了地域、平面以及空間的限制，使得人們更便捷地處理相應數據。ThingJS有164個源碼實例下載>>

因此，我們的客戶採用雙B樣條採樣方法進行數值模擬，並從時間和空間域兩方面進行分析，採用B樣條插值函數的方法進行溫度插值擬合，這樣就能夠解決糧食溫度傳感器密度的缺陷，並利用 WebGL技術實現糧堆溫度的可視化。

什麼是B樣條曲線？

B樣條曲線一般應用在計算機輔助設計與製造當中，是一種由大量控制點生成曲線的工具，它具有樣條曲線的普遍特性：

（1）是一條只需要幾個點依次指定的光滑曲線；

（2）可以通過相應算法找到曲線或者曲面的點；

（3）根據人們對近似度的需求，通過迭代計算方法使用線段能足夠準確再現曲線的形狀。

曲線有9個控制點定義，曲線整體趨向控制點，B樣條曲線按照節點分布的情況，分為均勻B樣條曲線和非均勻B樣條曲線。

ThingJS 3D 引擎技術

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平臺註冊地址

基於WebGL的倉儲糧食溫度可視化 ThingJ

基於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

相關焦點

  • 基於WebGL的3D可視化告警系統關鍵技術解析 ThingJS
    #三維可視化# #3D開發#WebGL 3D技術新一代3D框架-ThingJS3D可視化告警系統案例基於ThingJS的通用架構設計WebGL 3D技術WebGL是一種在網頁瀏覽器中渲染3D圖形的 JavaScript API，無需加裝插件，只需編寫網頁代碼即可實現3D圖形的展示。
  • 基於webgl的三維室內空間邏輯建模 three.js ThingJS
    與室外空間相比，[ThingJS平臺]的室內空間的三維可視化要求更加精細，如果不能很好地表達容易對用戶造成誤導！與室外空間相比,室內空間的層次結構較為明顯,各樓層間主要是通過樓梯、電梯等這些通道進行連接，除建築本身結構外還有門窗、欄杆、樓梯等要素，要注意這些人工要素的功能性表達。
  • webgl、Javascript、HTML、ThingJS、cesium都是什麼鬼?
    所有這些名詞都源於你要做可視化應用，如果不是請繞行。不是搞技術的朋友念一念就好了，搞技術開發的你得好好念。webgl——是一種3D繪圖協議，這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript綁定，WebGL可以為HTML5。
  • 基於WebGL的虛擬太陽系漫遊技術實現 ThingJS 科幻片
    一、功能需求B/S架構為主，通過瀏覽器在線訪問，無需安裝任何插件可觀察太陽系中太陽和各行星的3D模型及其運行狀況各行星運行軌道可視化簡單操作鍵盤滑鼠可實現自由漫遊點擊太陽或行星時顯示該天體的常識信息隨時控制太陽系運行速度準確度高，基於各項真實太陽係數據及運行製作運行基本無卡頓，對用戶輸入實時響應二、運行需求要求跨平臺、跨終端在線展示，兼容PC電腦
  • ThingJS:基於WebGL的3D技術在網頁中的運用
    因此，很多3D圖形引擎庫應運而生，直接使用Javascript腳本語言開發，將WebGL進行不同程度的封裝，例如「three js「、「scenceJS」、「Oak3d」和「simjs」等，這些引擎庫能夠讓用戶更加方便地進行3D圖形繪製和動畫的製作。
  • 基於WebGL的三維數據可視化大屏開發流 ThingJS
    三維數據大屏可視化系統包含多源數據連接、生成二維/三維視圖、構建可視化大屏、大屏功能應用等一體化服務，基於多年可視化項目經驗，ThingJS平臺得出從數據源上傳到可視化大屏應用的完整流程，供參考。(2) 可視化視圖構建功能之圖形展現可視化大屏提供豐富的二維及三維圖形展現， 平面圖表是常見的視圖元素。界面側邊欄提供應有盡有的可視化視圖列表，包含了太陽圖、柱狀圖、餅圖、玫瑰圖、折線圖、雷達圖、靜態和動態地圖、環狀圖、文本標籤雲等常用圖形。用戶點擊可視化視圖選項後，系統會進行視圖類型與數據結構匹配。
  • 基於WebGL的智慧校園可視化全景漫遊技術實踐 ThingJS
    #三維可視化##3D開發#智慧校園總體設計與規劃用戶與虛擬場景的互動實現全局場景的漫遊模式國內各大高校，近幾年紛紛搭建了3D智慧校園，如清華大學智慧校園系統，更是實現了虛擬課堂功能。構建虛擬場景，主要基於WebGL 3D繪圖技術實現虛擬場景的生成整合，將前面準備好的模型導入到智慧校園場景的目標坐標內，並為建築物和天空貼圖，再添加3D交互腳本，實現用戶與虛擬場景的漫遊功能。
  • three.js為何如此奇妙
    WebGL是在瀏覽器中實現三維效果的一套規範，而最初使用WebGL原生的API來寫3D程序是一件非常痛苦的事情，在辛苦的付出下WebGL開源框架出現了，其中three.js就是非常優秀的一個，它掩蓋了很多麻煩的細節，那麼，就讓我們一起來看看，什麼是three.js吧！
  • webgl 迷宮項目開發總結
    收穫webgl 三個js庫webgl-utils.jswebgl-debug.jscuon-utils.js圖片加載var img = new Image();這樣可以防止webgl在渲染的時候圖片還沒加載完而出現黑屏的問題。監聽鍵盤事件保證事件代碼只運行一次。否則會重複綁定多個事件，也就是按鍵一次會觸發多次事件處理。
  • 藉助WebGL三維可視化技術檢索3D動態圖像
    大數據可視化平臺是通過三維表現技術來表示複雜的信息，實現對海量數據的立體呈現。可視化技術藉助人腦的視覺思維能力，通過挖掘數據之間重要的關聯關係將若干關聯性的可視化數據進行匯總處理，揭示數據中隱含的規律和發展趨勢，從而提高數據的使用效率。
  • 20個使用WebGL和Three.js實現的網頁場景
    20個使用WebGL和Three.js實現的網頁場景 也許你們可能已經聽說過關於Three.js庫，Three.js是一個WebGL第三方庫，它能夠讓瀏覽器更加輕鬆的使用和實現3D效果，就打個
  • WebGL 入門 – WebGL框架
    但是，也有很多人基於WebGL開發出了各種開源框架，現在，我們就來看看目前有哪些框架能夠為我們所用。Three.js Three.js 是一個開源的JavaScript 3D引擎，該項目的目標是創建一個低複雜、輕量級的3D庫，用最簡單、直觀的方式封裝WebGL中的常用方法。
  • 結合Echarts、Ajax技術實現可視化大屏監控 ThingJS 3d 開發
    #三維可視化# #3D開發#ECharts是 Enterprise Charts縮寫，表示商業級數據表圖，它是一個基於html5 Canvas的圖標庫，可以流暢的運行在PC和行動裝置上，兼容當前絕大部分瀏覽器 (E6
  • 八大瘋狂的 HTML5 Canvas 及 WebGL 動畫效果
    章魚 WebGL和Three.js製作的漂亮的章魚狀的星空動畫 原文地址：http://favbulous.com/post/895/8-crazy-animations-withwebgl-and-html5-canvas文/hiwebgl
  • 3D ThingJS
    在物聯網領域，更多是連結傳感器設備進行數據傳輸，進行可視化的直觀展示，而NASA展示Bennu小行星樣本實驗室渲染圖，也許僅僅是新聞發布的演示需求，告訴人們更多有關於宇宙探索的動作——* * *[CampusBuilder產品詳情](https://www.thingjs.com/guide/campus)===如果ThingJS可以創業成功，那麼大部分的年輕人也能夠創業成功
  • 淺談糧食鋼板筒倉在糧食倉儲行業的使用與管理
    立筒倉以其佔地小、儲量大、機械化程度高等優點廣泛地應用於糧食倉儲行業，散裝糧食的倉儲、運輸是將來糧食流通的大趨勢，立簡倉將發揮更大的作用。如果糧食裝載超過設計倉容時，當糧食滿至倉頂可能會導致倉頂頂板向外膨脹並破壞。當筒倉糧食太多時打開倉頂人孔會引起糧食溢出。2.4物料存儲物料存儲期間要定期對物料進行檢測，通過測溫電纜及時了解倉內溫度情況。
  • 3D可視化數字工廠智慧園區的優勢
    商迪3D針對數字工廠與智慧園區的日常管理，能夠充分利用最新的三維仿真技術，基於3D虛擬實境的最佳展示形式建立數位化工廠與智慧園區運營管理的可視化平臺。3D可視化展現平臺，是獲取重要信息與監控設備日常狀態的關鍵，更是日常維護工廠與園區走向可視化管理的重要基礎。
  • 智慧氣象大屏可視化決策系統
    地面氣象監測　　支持基於地理信息系統，對地面氣象觀測設備、觀測站、觀測人員等要素的位置、狀態進行監測;支持集成氣溫探測器、天氣雷達、大氣監測儀、溼度探測器等系統數據，對區域內氣溫、降水、風力、氣壓、相對溼度等信息進行實時監控，並可對氣象數據變化趨勢進行可視化分析，支持對溫度異常、狂風暴雨等惡劣氣象情況進行可視化預警告警，以及詳細信息查詢，輔助管理者全面掌控地面氣象態勢，為氣象預報預警提供數據決策支持
  • 數據中心環境運維的新方式,讓機房溫度可視化
    熱力圖（Heat Map）是通過密度函數進行可視化用於表示地圖中點的密度的熱圖。而現如今科技的迅速的發展中，物聯網與網際網路相互提升的時代中，邁向了工業4.0的新熱潮，出現了工業網際網路、5G 等等飛速發展的產物，在眾多技術的支持下，機房監控的環境安全極為重要，喜冷怕熱的設備，通過溫度雲圖可以有效地檢測到機房的運行狀態。 HT for Web 自主研發了強大的基於 HTML5 的 2D、3D 渲染引擎，為可視化提供了豐富的展示效果。
  • 奉賢區快遞倉儲是什麼意思糧食倉儲行業發展前景
    寶麥提供電商倉配一體化解決方案、一站式倉儲、裝卸、分揀、打包、物流配送全程外包服務。全國各地都設有分倉,可以選擇多地入倉就近發貨 全國聯繫熱線奉賢區快遞倉儲是什麼意思糧食倉儲行業發展前景但是京東秒殺通過京東C2M的五步法和自身形成的C2M邏輯已經被驗證可規模化，並通過大促的方式得到了進一步提升。