基于WebGL的3D可視化告警系統關鍵技術研究與應用

李紅輝，劉冬冬，楊芳南

（北京交通大學 計算機與信息技術學院，北京 100044）

0 引言

隨著工業智能化水平的提升，越來越多的自動化設備應用到制造業中，這些設備設施在提升企業智能化水平和生產效率的同時，也帶來了一系列問題，智能設備設施的管理難度進一步增加，現有的設備管理系統信息展示不形象不立體，設備一旦出現故障預警，故障設備定位困難，監控數據缺乏有效的可視化手段，這些都是亟需解決的問題。隨著HTML5[1]和 WebGL[2-3]技術的快速發展，為解決這些問題提供了新的方案。本文基于WebGL技術及其框架three.js[4]設計實現了設備3D可視化告警系統，在瀏覽器端對工業生產設備進行虛擬化仿真模擬，并把設備運行情況呈現給設備管理人員，使數據的展示更加形象立體，給設備管理者以交互感和沉浸感，實現故障設備設施的快速定位，根據設備設施告警原因，制定對應的維修方案，從而達到提高設備運維效率的目的。

1 W ebGL和three.js技術研究

1.1 WebGL

WebGL是一種在網頁瀏覽器中渲染3D圖形的JavaScript API，無需加裝插件，通過WebGL的技術，只需編寫網頁代碼即可實現 3D圖形的展示。基于OpenGL ES 3.0的WebGL 2.0規范于2017年1月完成。WebGL技術相較于傳統的Web3D技術有兩大優點[5]：第一，通過 JavaScript 腳本語言實現網絡交互式三維動畫制作，無需依賴任何瀏覽器插件；第二，WebGL基于底層的OpenGL接口實現，具有底層圖形硬件（GPU）加速功能。

WebGL繪制3D模型的過程分為三步，第一獲取頂點坐標。頂點坐標通常來自三維軟件導出，在獲取到頂點坐標后，存儲到顯存，以便GPU更快讀?。坏诙?，圖元裝配，畫出一個個三角形。圖元裝配就是由頂點生成一個個圖元（即三角形），這個過程是由頂點著色器完成的。頂點著色器會先將頂點坐標通過矩陣變換為屏幕坐標然后由 GPU進行圖元裝配；最后進行光柵化，即生成片元（一個個像素點）。在圖元生成完畢之后，還需要給模型“上色”，由運行在 GPU的“片元著色器”來完成。WebGL繪制3D模型的過程如圖1所示。

1.2 thr ee.js

如果直接使用WebGL開發3D效率比較低，雖然它相較于OpenGL簡單了很多，但是也需要開發者對圖形學知識有很深入的了解，為了解決上述問題，出現了基于JavaScript語言的第三方庫-three.js。three.js是一個JavaScript庫，是一個跨瀏覽器的腳本，它封裝了底層的圖形接口，對WebGL有很好的支持，可以大大減少工作量，不需要掌握復雜的圖形學知識就能實現三維場景的渲染。如渲染黑色背景下的白色正方體和三角形，WebGL需要編程代碼大約150行，而three.js編程只需要30行左右的代碼，工作量只有WebGL的五分之一，提高了開發效率。

three.js渲染 3D場景必須包含場景（scene），相機（camera），渲染器（render），光源（light）四個基本組件[6]。three.js在瀏覽器渲染 3D場景的準備工作包括，第一創建場景對象，變量 scene是一個容器，三維場景中所有的對象都要添加到場景容器中，它用來保存并跟蹤場景內所有對象；第二配置相機，變量camera決定了觀察者能夠在渲染好的場景里看到什么；第三配置渲染器，render對象根據相機的角度計算渲染瀏覽器中場景的樣子；第四配置光源，light會影響材質的顯示，陰影的生成；第五配置場景需要的3D模型；最后three.js會根據模型的材質，選擇對應的頂點著色器和片元著色器，最終完成整個渲染。

2 3D 可視化告警系統設計

2.1 系統概述

3D可視化告警系統釆用WebGL技術在瀏覽器端對工業生產設備進行虛擬化仿真模擬，并基于綜合監控管理平臺采集到的設備運行數據進行車間設備運行情況的形象立體化展示，給管理者以良好的沉浸感和交互感，使管理人員擺脫表格、文本等傳統方式的數據可視化方式。

2.2 系統架構

圖1 WebGL 繪制3D模型過程Fig.1 WebGL drawing 3D model process

本系統采用B/S架構，基于流行的WebGL框架three.js設計實現，用戶直接在瀏覽器上通過 url地址訪問該網站，不需要安裝任何插件[7-8]。本系統分為數據存儲層，數據處理層和數據展示層。數據存儲層主要使用 mysql數據庫存儲設備數據基本信息和采集到的告警信息，使用json文件存儲3D模型數據信息；數據處理層主要使用Mybatis和SpringMVC框架對數據進行處理分析以及業務邏輯的實現；數據展示層主要使用基于 WebGL的 three.js框架和html5完成對3D場景的加載渲染，通過改進的渲染算法解決加載大量 3D模型時出現瀏覽器崩潰的現象。系統的架構圖見圖2所示。

圖2 系統架構圖Fig.2 S ystem architecture diagram

2.3 系統功能設計

3D可視化告警系統主要包括3個功能模塊：設備管理模塊，3D場景漫游模塊以及設備健康狀態管理模塊，功能結構圖如圖3所示。

圖3 系統功能結構圖Fig.3 The structure diagram of system function

（1）設備管理模塊，用戶可以查看設備基本信息，通過拖拽的形式改變設備在場景中的位置，實現設備的縮放和旋轉操作，還可以根據自己的需要添加和刪除設備。

箱內最低溫性能比較：當環境溫度為30℃±1℃時，(1)碳氫冷媒的吸排氣溫度較R134a冷媒高，且開始運行時因系統負載過高排氣溫度可達82℃；(2)碳氫冷媒的冷凝溫度較R134a高，系統穩定后冷凝器出口溫度較R134a高19.2%；(3)碳氫冷媒在蒸發器出口溫度的拉低速率與最低溫度方面均優于R134a冷媒，系統穩定后蒸發器出入口溫度較R134a冷媒低約14.8%和14.5%。

（2）3D場景自由漫游，用戶通過鼠標完成對整個 3D場景的移動，縮放和旋轉操作，從而滿足用戶360度查看場景的需要，給用戶帶來良好的交互感和浸入感。

（3）設備健康狀態管理，用戶可自由查看機房內任意設備的健康度，健康度分為三個區間，分別用紅黃綠三種顏色來表示設備的健康狀態。當系統檢測到設備出現告警信息時，在該設備的上方彈出對應的告警標志，用戶點擊告警標志，彈出告警詳情，包括告警時間，告警類別。告警原因等。

（4）自動巡航，用戶可以根據廠房環境和設備布局情況，設定巡航路徑，當用戶點擊自動巡航按鈕時，可以沿著設定好的路徑進行巡視，無需用戶手動操作，就能夠對路徑上的設備健康情況進行全局了解，大大減少了用戶的工作量，提高了工作效率。

3 關鍵技術研究

隨著場景中模型數量的不斷增加，三維場景的復雜度也不斷增加，這樣會導致Web端渲染場景的時間越來越慢，甚至出現瀏覽器崩潰的現象，嚴重影響用戶體驗。針對復雜三維場景的渲染，本文從兩個方面進行優化，一是場景組織方面，使用八叉樹結構對場景進行組織和優化；二是對視錐體內的模型進行可見性剔除，通過減少渲染模型的數量來提高場景渲染效率。

3.1 基于八叉樹劃分場景

八叉樹（octree）[9]是一種描述三維空間的樹狀數據結構，用于 3D空間中的場景管理，可以加速鄰近搜索和相交測試。八叉樹使用三個面進行分割，把整個三維場景看作一個大的正方體，分割點位于包圍盒的中心點，沿著軸對的三條軸對其進行分割，以這種方式生成8個新的正方體，這八個子節點所表示的體積元素加在一起就等于父節點的體積。遞歸分割，直到達到遞歸深度。在八叉樹表示的空間結構中，任一節點都只有八個子節點或零個。

使用八叉樹劃分場景時會出現一個模型對象同時包含在兩個葉子節點的情況，解決這個問題的方法有兩個，一是所有與模型相交的子節點都建立對該模型對象的索引，該方法雖然可以實現模型的精確引用，但會造成管理上的麻煩；二是應用松散八叉樹，松散八叉樹相對與經典的八叉樹結構更松散，假定八叉樹的一個節點大小為N*N*N，則松散八叉樹表示的該節點的大小為 2N*2N*2N。因此，可以把原先需要存儲在兩個節點中的模型對象存儲到一個節點中。本文使用方法二解決問題。

3.2 視錐體剔除

使用松散八叉樹對場景劃分完畢后，使用光線投射算法（raycaster）[10]完成視錐體剔除（Frustum Culling）。視錐體是相機視點與相機視野范圍形成的一個圓錐，如圖4所示，判斷存在于視錐體內的模型對象，把不存在視錐體內的模型對象進行剔除，圖4中矩形和五角星代表的模型對象被保留，圓形代表的模型對象被剔除，視錐體內的模型對象被送入GPU渲染，不在視錐體內的模型對象不渲染。通過減少送入 GPU渲染模型的數量來提高場景的渲染速度。

圖4 視錐體剔除Fig.4 Frustum culling

圖5 視錐體底面圖Fig.5 Bottom view of the cone

視錐體剔除關鍵的步驟在于如何高效的判斷出視錐體內的模型對象，本文通過建立相機與相機投影面積內點的射線完成模型對象的可見性操作，要想準確判斷出視錐體內的模型對象取決于射線的數量和射線的方向是否分布均勻，射線方向均勻分布是提高模型對象判斷準確性的關鍵因素。從相機產生的視錐體得知，所有光線最終會集中到一個圓上，如圖5所示，所以問題落在了如何在圓上產生足夠數量的且接近均勻分布的點。

首先根據交點 A和 B的橫坐標 Xa、Xb得到 X的區間[XaXb]，在該區間中隨機生成一個橫坐標X，根據式（1）計算得出±YX，最后在區間[-YXYX]中隨機取一個縱坐標 Y，則（X，Y）構成二維隨機點。其中，對于隨機數X和Y的生成本文調用JAVA自實現的Random方法。

通過坐標轉換把二維隨機點坐標（X，Y）轉換為與相機同一坐標系，根據兩點創建射線，調用three.js中的raycaster算法，使用intersectObjects方法獲得與該射線相交的所有3D模型，，得到與該射線相交的模型對象數組。通過數量足夠多的二維隨機點，建立大量符合均勻分布的射線就能近似準確的得到該視錐體內的所有模型對象，完成場景內不可見模型對象的剔除。針對三維場景中視錐體內模型剔除實現流程如圖6所示：

圖6 視錐體內模型剔除實現流程Fig.6 The process of frustum culling

基于八叉樹的復雜三維場景的渲染步驟描述如下：

（1）使用場景圖創建系統場景，然后基于八叉樹結構劃分場景；

（2）建立八叉樹空間結構，用于加速視錐體剔除，光線投射，相交模型測試以及鄰近查詢等；

（3）基于八叉樹結構對場景內的模型對象進行可見性視錐剔除操作；

（4）對于處于視錐體內的模型對象進行渲染；

（5）檢測相機位置或方向是否發生改變，若改變，重復步驟（3），否則轉（6）

（6）結束。

3.3 試驗結果

為了驗證優化后的復雜三維場景的渲染算法，通過向三維場景文件中不斷增加模型的數量，逐步提高三維場景的復雜度，來驗證該算法的可行性。在 3D可視化告警平臺中進行廣泛的測試，實驗結果如圖7所示：

圖7 優化前后渲染場景時間對比圖Fig.7 Optimized before and after the scene rendering time contrast map

可以看出隨著模型對象個數的增加，場景文件的渲染時間不斷增加，當模型數量小于 200（近似值）時，同一場景文件渲染時間進行視錐體剔除后的算法高于傳統渲染算法，出現這種情況的原因是建立射線相交測試耗費的時間抵消了優化算法的提升時間，但場景文件中模型對象數量超過 200（近似值）的時候，視錐體剔除后的算法逐漸優于傳統渲染算法，而且隨著模型對象數量的繼續增加，效果越來越明顯。

4 總結

針對當前工業自動化設備運維管理過程中故障設備定位困難，監控數據不形象不直觀的缺點，本文給出了一個 3D可視化告警系統的設計與實現，基于WebGL技術的three.js框架開發，擺脫了傳統3D可視化方案依賴插件的束縛。該方案在瀏覽器端對自動化設備以及各個監控系統采集到的設備運行數據進行三維仿真模擬，從而使數據的展示更加形象、立體，達到了輔助運維的目的，同時提出Web端基于八叉樹的復雜三維場景的優化思路，提高了模型加載性能。優化后的渲染思路在加載小數量模型時效果不明顯，原因是計算相機視野范圍內的模型需要花費時間。未來的研究內容是使用CPU+GPU實現渲染優化算法的并行化，減少算法的計算時間。

[1] Zorrilla M, Martin A, Sanchez J R, et al. HTML5-based System for Interoperable 3D Digital Home Applications[C].Fourth International Conference on Digital Home. IEEE,2012: 206-214.

[2] Bian M J, Gao H H, Gao J. Research and Application of Web3D Exhibition Based on WebGL and Html5[C]. International Conference of Electrical, Automation and Mechanical Engineering. 2015: 3-4.

[3] Sawicki B, Chaber B. 3D mesh viewer using HTML5 technology[J]. Przeglad Elektrotechniczny, 2012, 88(5): 155-157.

[4] 汪浩, 田豐, 張文俊. 基于WebGL的交互平臺設計與實現[J]. 電子測量技術, 2015, 38(08): 119-122+128.WANG H, TIAN F, ZHANG W J. Design and implementation of interactive platform based on webGL[J]. ELECTRONIC MEASUREMENT TECHNOLOGY, 2015, 38(08):119-122+128.

[5] 王維敏. Web3D技術探索及幾種Web3D技術的比較選擇[D]. 武漢大學, 2004.WANG W M. Research of web3D Technique and Compare and Choice of Several web3D Techniques[D]. Wuhan: Wuhan University, 2004. (in Chinese)

[6] 德克森. Three. js開發指南[M]. 北京: 機械工業出版社,2016: 11-12.Jos Dirksen. Learning Three. js: The JavaScript 3D Library for WebGL[M]. Beijing: China Machine Press, 2016: 11-12.(in Chinese)

[7] 王磊, 高玨, 金野, 許華虎. 基于Web3D無插件的三維模型展示的研究[J]. 計算機技術與發展, 2015, 25(4): 217-220.WANG L, GAO J, JIN Y, XU H H. Research on Threedimensional Model Display Based on Web3D without plug-in [J]. COMPUTER TECHNOLOGY AND DEVELOPMENT, 2015, 25(04): 217-220.

[8] 張玄, 黃蔚. 3D機房運維可視化系統的設計與實現[J]. 軟件, 2016, 37(7): 89-93.ZHANG X, HUANG W. Design and Implementation of 3D Data Room Opration and Maintenance Visualization System[J]. COMPUTER ENGINEERING & SOFTWARE, 2016,37(7): 89-93.

[9] Pajarola R. Large scale terrain visualization using the restricted quadtree triangulation. Proceedings of IEEE Visualization '98. 1998.

[10] Hristo Lesev, Alexander Penev. A Framework for Visual Dynamic Analysis of Ray Tracing Algorithms[J]. Cybernetics and Information Technologies, 2014, 14(2).