基于WebGL 3D技術的可視化溫室環境監測系統設計

羅懷榮+石軍鋒

摘要：針對溫室監測系統交互方式不直觀、數據呈現形式單一的問題，設計了一種3D可視化溫室監測系統。該系統由ZigBee網絡、圖像采集設備、服務器、數據庫組成。首先，采用CC2530芯片節點組建ZigBee無線傳感器網絡，ZigBee網關通過串口與服務器通信；其次，結合SSH開發框架設計Web服務器和Mysql數據庫，監聽和處理串口環境數據和USB圖像數據；最后，通過HTML5的WebGL 3D技術，加載3DS MAX模型，實現了3D模型下的實時數據動態采集推送、數據存儲歷史分析、可視化數據顯示、視頻監測等功能。測試表明，該系統運行穩定，數據可靠，監測方式更加立體直觀，可廣泛用于溫室環境系統以及其他環境系統的監測。

關鍵詞：溫室；數據庫；WebGL；可視化；建模

中圖分類號： S126文獻標志碼： A文章編號：1002-1302（2017）07-0189-04

近年來我國溫室栽培面積快速增長，已成為全球溫室生產面積最大的國家，生產面積已超過200萬hm2[1-2]。借助現代化智能監測平臺對溫室的土壤、肥力、氣候等因素進行大數據分析，動態監測農作物生長環境，能讓溫室生產管理事半功倍，生產效益最大化。目前國內外科研機構在溫室監測系統上，已實現遠程Web在線監測[3-5]、智能移動終端監測[6]。但還存在以下問題：（1）用戶交互方式不立體直觀，用戶界面不友好。大多數監測系統是基于二維平面、仿三維平面的交互方式，如天津視訊公司的精準農業監控系統，MEMSIC公司的eKo Pro專業環境監測系統，在節點可視化顯示上采用了以地理空間圖片為背景進行節點定位的方法，雖然有3D空間的視感，但是不能真正進行3D操作；（2）數據呈現形式單一，不易感知數據中的關鍵信息。由于監測數據比較龐大，簡單的表格顯示數據會產生過長的列表，不易于用戶提取有用信息。本研究提出了一種基于WebGL 3D技術的可視化溫室環境監測系統設計方案，并完成了服務器和相關功能設計，以期為推動溫室監測系統發展提供依據。

1系統總體設計方案

1.1系統結構設計

系統結構上分為3個部分：ZigBee網絡和攝像頭、服務器以及瀏覽器客戶端。ZigBee網絡由ZigBee傳感器子節點和ZigBee網關組成，負責溫室環境數據采集，攝像頭負責圖像數據采集。網絡內部通過基于CC2530為核心的ZigBee協議進行通信。各節點的傳感器包括SHT11溫濕度傳感器、TSL2561光敏傳感器、MG811二氧化碳傳感器等。服務器是基于SSH框架開發的Web服務器和數據庫服務器，它們之間通過JDBC驅動進行數據交換和處理。Web服務器采用 Tomcat 管理系統的Web項目資源，其優點在于能夠快速處理JSP動態請求。數據庫服務器采用Mysql關系型數據庫，它是一款面向中小型應用開發的強大數據庫。服務器和ZigBee網絡之間采用串口通信，以RS-232串行通信標準協議為標準建立有線鏈接，以字節流的方式交換數據。服務器和攝像頭通過USB連接，通過調用JavaCV視覺庫函數獲取攝像頭的圖像幀，服務器把圖像幀數據經過Base64格式編碼，通過WebSocket實現視頻監控。客戶端和服務器主要通過Http協議和WebSocket協議進行通信[7]。Http協議用于實時性不強的環境數據傳輸，而實時性要求較高的視頻圖像數據需要WebSocket協議傳輸，2種通信方式的結合保證了系統高效、穩定的數據通信。系統結構如圖1所示。

1.2服務器框架設計

服務器包括Web服務器和數據庫，Web服務器實現該系統中的所有功能需求，并對外提供Web訪問服務，數據庫則是數據存取中心。服務器框架結構如圖2所示。

SSH框架設計的服務器分成3層：數據顯示層、業務邏輯層、數據訪問層。數據顯示層作為系統對外訪問接口，瀏覽器可以訪問相應的html、jsp頁面資源，通過Ajax技術實現頁面數據交互，減少了響應等待時間和重復加載資源花費的時間。業務邏輯層是系統數據處理中心，用戶通過與html5頁面交互，觸發相應的請求，調用對應的業務邏輯，處理完成的業務邏輯則把數據以json的形式返回給用戶頁面。數據訪問層是業務邏輯層和數據庫的中間層，進行數據包的封裝和數據操作的封裝，避免業務邏輯對數據庫的直接操作。3層服務器之間通過Spring+Struts+Hibernate來管理互相的調用關系，減少各層之間的耦合度，增強各層代碼獨立性，從而提高系統的擴展性、穩定性、可移植性。

1.3數據庫設計

溫室監測系統是一個以數據為主的系統，數據存儲是一個重要部分，本設計選用的是Mysql關系型數據庫。服務器與數據庫通過JDBC建立連接，對數據庫進行數據增加、刪除、修改、查詢等操作。數據庫包括五張表：用戶表、拓撲表、數據表、溫室設備信息表、系統設置表。用戶表字段包括用戶名、密碼、注冊時間；拓撲表字段包括序號、節點地址、父節點地址、通信質量、獲取時間；數據表字段包括序號、子節點號、子節點地址、溫度、濕度、光強、節點電壓、采集時間；溫室設備信息表字段包括序號、設備名、硬件地址、x坐標、y坐標、z坐標、設置時間；系統設置表字段包括序號、用戶名、串口號、波特率、設置時間。

1.4數據可視化方法

數據可視化技術綜合運用計算機圖形學、圖像處理、人機交互等技術，將采集或模擬的數據變換為可識別的圖形符號、圖像或動畫，并以此呈現對用戶有價值的信息[8-9]。本研究中數據可視化流程包括數據采集與處理、3D模型渲染、用戶交互等3個部分。通過節點采集溫室環境數據，服務器解析數據幀封裝成數據表對象，保存到數據庫。通過攝像頭采集圖像數據，經過Base64編碼保存為JPG格式圖片和MP4格式視頻；采用WebGL 3D技術渲染基于3ds Max設計的溫室3D模型；通過鼠標事件進行用戶與3D模型的交互。在歷史數據中，結合圖表、表格的數據顯示方式，采用百度Echarts框架繪制折線圖、柱狀圖等多種圖表，按條件刪選數據和數據表格分頁的形式顯示數據，使數據呈現更加直觀和簡潔。

2數據采集與處理

2.1數據幀格式

數據幀是服務器與網關按一定格式交互的數據包，攜載著節點采集的環境數據。數據幀總共包括32字節的16進制數據，數據幀格式及具體的字節分配如圖3所示。

幀頭“&”、幀尾“*”分別表示數據包的開始和結束。命令頭有6種，分別是網絡拓撲（RND）、全部節點采集（ASA）、全部節點停止（AST）、通信質量（RNS）、單節點采集（RSA）、單節點停止（TSA）。前3種命令屬于廣播命令，不需要指定節點地址，后3種命令屬于點播命令，需要指定節點地址。每個節點都分配了不同的IEEE地址，通過IEEE地址識別不同節點數據。載荷中存放著節點采集的環境數據（空氣和土壤的溫度、濕度、光照度、二氧化碳濃度、節點工作電壓），每項數據都通過補碼的方式進行傳輸，保證在1幀中可以傳遞盡可能多的信息。

2.2數據采集與處理

系統涉及2種數據類型：環境數據、圖像數據。網關是環境數據來源，通過串口與服務器通信。服務器啟動時建立Port thread、WebSocket服務。Port thread用于監聽串口的環境數據，接收到環境數據就按照數據幀格式進行解析，封裝成數據表對象，保存到數據庫。攝像頭是圖像數據來源，通過USB與服務器通信。WebSocket監聽客戶端Socket實例化所有攝像頭，服務器根據攝像頭地址對攝像頭進行操作，接收到開啟命令開始捕獲圖像，每幀圖像采用Base64格式的字節編碼，以字節流的方式發送給javascript，解析成圖片顯示，圖像、視頻以文件形式保存在服務器上。

33D溫室模型設計方案

3D溫室模型是虛擬現實中的溫室場景，包括溫室、風機、濕簾、攝像頭、網關、節點等模型。在溫室監測系統中采用3D技術可以非常直觀和真實地體驗監測過程，直觀的3D節點拓撲模型可以方便地進行節點診斷和預警。目前網絡三維（Web3D）技術主要解決方案有Java3D、VRML、Viewpoint、Cult3D、Shockwave3D、Unity3D、Virtools等。WebGL是一種新的Web3D技術[10]，WebGL基于javascript實現三維模型和動畫制作，不需要安裝其他插件。WebGL是開源、免費的，受到了許多第三方開源庫的青睞，如Three.js、LightGL等。WebGL 利用底層的圖形硬件加速功能進行圖形渲染，借助系統顯卡流暢地渲染三維場景和模型，同時還能創建復雜的導航和數據可視化。本研究選用WebGL技術來渲染溫室3D模型，借助第三方庫Three.js對底層函數封裝，靈活地進行溫室模型設計。

3.1模型設計與渲染

WebGL不僅可以自主繪制3D圖形，還支持多種格式的3D模型導入，支持的3D模型格式有FBX、OBJ、VTK、STL、WRL等。由于WebGL本身沒有輔助設計3D模型的工具和函數，繪制溫室等復雜場景時顯得較笨拙，且對程序設計人員的技術要求較高。本研究選用導入完整3D模型的方案，進行溫室模型設計，既可以渲染出逼真的溫室場景，還增強了系統對各種3D場景模型的移植性和兼容性。3ds Max是 Autodesk 公司專業設計3D模型和動畫的軟件，支持多種3D模型格式的導出，其中OBJ格式支持導入相關材質和貼圖，是非運動單個模型很好的選擇。整個溫室模型分為2部分，即溫室環境模型和可操作設備模型（網關、節點、攝像頭）。導出OBJ格式生成2個文件：.obj文件包含構成模型的三維點坐標，.mtl文件包含模型的材質和貼圖信息。Three.js分別提供了2種文件的加載器OBJLoader.js、MTLLoader.js。

Three.js渲染3D模型的流程如圖4所示。首先，初始化透視相機（Perspective Camera）、渲染器（WebGL Renderer）、用戶交互對象（Raycaster）、場景（Scene）。相機虛擬人眼功能，增加控制器后可通過鼠標任意旋轉、縮放、拖動，來改變視角控制渲染效果。用戶交互對象不參與渲染，是模型與用戶交互的載體。渲染器裝載所有被渲染的對象和組件，并與 HTML5 結合起來。場景類似于畫布，把畫布上的東西呈現出來。然后，加載3D模型，MTLLoader加載模型的材質和貼圖，OBJLoader加載模型對象，并分解出該對象的所有子對象，如果子對象屬于Mesh對象，就設置子對象的三維坐標，并加入用戶交互對象集合和渲染器，如果不是Mesh對象就直接加入渲染器。最后，把透視相機、渲染器和用戶交互對象放入場景，渲染出3D模型。

3.2節點拓撲算法

溫室環境模型和攝像頭模型沒有拓撲結構，直接獲取服務器設定的三維坐標即可完成模型渲染，而網關和節點模型具有一定的拓撲結構，需要計算拓撲才能渲染。常見拓撲結構有星形、樹形、環形、網狀性、總線型，根據網關和節點就近通信的特點，容易形成星形、樹形，本研究采用樹形結構設計拓撲。樹形拓撲是從上往下層層展開，其結構和遞歸函數原理非常相似，本研究以網關節點作為遞歸函數入口，依次獲取所有節點，得到節點拓撲，渲染節點模型。算法流程如圖5所示。topology（）函數給服務器發送拓撲請求，服務器給網關發送拓撲命令，獲取在線節點拓撲信息（節點地址、父節點地址、通信質量），topology（）函數得到服務器返回的拓撲json數據，從根節點中取出網關節點，loadgateway（）函數渲染網關節點模型。drawpoint（）函數根據父節點，得到所有子節點進入for循環，loadpoint（）函數渲染節點模型，drawline（）函數根據子節點的通信質量，以不同顏色線條連接父節點、子節點。然后進行遞歸判斷，如果該子節點有下一級子節點，就進入drawpoint（）函數，如果沒有就進入下一個子節點，直至遍歷出所有子節點，按節點拓撲結構渲染全部節點模型。

3.3用戶交互策略

由于3D模型是在Canvas元素里渲染的，用戶不能直接與3D模型進行交互，需要借助Raycaster對象實現交互。用戶通過鼠標點擊模型，Raycaster對象判斷該模型是否存在集合中，如果存在，觸發交互事件，反之不觸發。本研究采用彈出菜單的方式實現交互，用戶鼠標點擊模型，彈出對應的fieldset標簽菜單。通過菜單選項給節點、攝像頭發送命令，查看相關數據。所查看的環境、圖像數據放到不同fieldset標簽中，通過設置標簽位置和隱藏屬性，實現數據切換。通過Trackball Controls控制鼠標，進行旋轉、縮放、移動3D模型，改變相機視角，實現全方位360°與3D模型交互。

4系統測試

系統測試是軟件設計過程中十分重要的環節，可以檢驗出系統在功能、性能上的問題。本系統是基于JDK+Myeclipse+Mysql開發環境，開發的基于WebGL 3D技術的可視化溫室環境監測系統。在Windows10操作平臺下，運行Tomcat8.0管理Web服務器，可在局域網內通過支持WebGL技術的瀏覽器（Google Chrome 9+、Mozilla Firefox 4+、Safari 5.1+、Opera 12+、IE9+）下進行系統訪問。并使用花生殼代理軟件，映射外網域名，測試系統在外網環境下的訪問。

4.1拓撲模型對比

為了進一步說明本研究設計的3D模型的可操作性和立體直觀性，圖6分別對比了采用一維表格、二維圖形設計的拓撲模型。圖6-a是采用一維表格的方式，只能顯示節點基本信息。圖6-b是采用二維圖形的方式，在顯示基本信息的同時，可以反映節點之間的物理通信關系。圖6-c是本研究設計的采用3D模型的方式，不僅能夠反映節點的詳細信息，還可以反映節點的物理通信關系和空間分布信息，更加方便、快速、準確、直觀地監測溫室數據。

4.2數據可視化測試

用戶可以直接和3D模型進行交互，通過點擊不同顏色模型獲取選項菜單，進行用戶交互。與攝像頭模型交互可以觀看溫室監測圖像，在歷史數據中，按采集數據時間、節點號篩選數據，并通過圖表和分頁表格的形式展示數據，以簡潔清晰的方式讓用戶快速了解歷史數據，掌握有用信息。可視化數據效果如圖7所示。

5結論

本研究以溫室監測數據為主題，針對目前溫室監測系統用戶交互不立體直觀，數據呈現形式單一等問題，提出了一種基于3D技術的可視化溫室環境監測系統，并完成了Web服務器和數據庫的設計和部署。測試表明，該技術實現了溫室監測的立體化、一體化、可視化，改善了傳統交互方式，用更高效的監測手段提升溫室生產效率，具有很好的應用前景。結合農業物聯網、3D技術、數據可視化技術的發展情況以及本研究進展，可從以下方面對相關研究繼續深入開展：（1）對本研究監測的數據進行大數據分析，整理成專家系統，給溫室監控系統提供可靠的大數據支持；（2）3D技術正在快速發展，未來形成統一的標準規范，完全渲染3ds Max模型的材質和貼圖，達到虛擬現實水平。

參考文獻：

[1]徐立鴻，蘇遠平，梁毓明. 面向控制的溫室系統小氣候環境模型要求與現狀[J]. 農業工程學報，2013，29（19）：1-15.

[2]葛文杰，趙春江. 農業物聯網研究與應用現狀及發展對策研究[J]. 農業機械學報，2014，45（7）：222-230，277.

[3]于合龍，劉杰，馬麗，等. 基于Web的設施農業物聯網遠程智能控制系統的設計與實現[J]. 中國農機化學報，2014，35（2）：240-245.

[4]鄭強，彭琳，鄒秋霞，等. 基于嵌入式Web服務器的遠程溫室監控系統設計[J]. 農機化研究，2013（11）：84-87.

[5]張猛，房俊龍，韓雨. 基于ZigBee和Internet的溫室群環境遠程監控系統設計[J]. 農業工程學報，2013，29（增刊1）：171-176.

[6]陳美鎮，王紀章，李萍萍，等. 基于Android系統的溫室異構網絡環境監測智能網關開發[J]. 農業工程學報，2015，31（5）：218-225.

[7]薛隴彬，劉釗遠. 基于WebSocket的網絡實時通信[J]. 計算機與數字工程，2014，42（3）：478-481.

[8]楊彥波，劉濱，祁明月. 信息可視化研究綜述[J]. 河北科技大學學報，2014，35（1）：91-102.

[9]林蘭芬，于鵬華，李澤洋. 基于聚類的農產品流通物聯網感知數據時空可視化技術[J]. 農業工程學報，2015，31（3）：228-235.

[10]劉愛華，韓勇，張小壘，等. 基于WebGL技術的網絡三維可視化研究與實現[J]. 地理空間信息，2012，10（5）：79-81.