李紅輝，劉冬冬，楊芳南

（北京交通大學(xué) 計(jì)算機(jī)與信息技術(shù)學(xué)院，北京 100044）

0 引言

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

1 W ebGL和three.js技術(shù)研究

1.1 WebGL

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

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

1.2 thr ee.js

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

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

2 3D 可視化告警系統(tǒng)設(shè)計(jì)

2.1 系統(tǒng)概述

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

2.2 系統(tǒng)架構(gòu)

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

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

圖2 系統(tǒng)架構(gòu)圖Fig.2 S ystem architecture diagram

2.3 系統(tǒng)功能設(shè)計(jì)

3D可視化告警系統(tǒng)主要包括3個(gè)功能模塊：設(shè)備管理模塊，3D場(chǎng)景漫游模塊以及設(shè)備健康狀態(tài)管理模塊，功能結(jié)構(gòu)圖如圖3所示。

圖3 系統(tǒng)功能結(jié)構(gòu)圖Fig.3 The structure diagram of system function

（1）設(shè)備管理模塊，用戶可以查看設(shè)備基本信息，通過拖拽的形式改變?cè)O(shè)備在場(chǎng)景中的位置，實(shí)現(xiàn)設(shè)備的縮放和旋轉(zhuǎn)操作，還可以根據(jù)自己的需要添加和刪除設(shè)備。

箱內(nèi)最低溫性能比較：當(dāng)環(huán)境溫度為30℃±1℃時(shí)，(1)碳?xì)淅涿降奈艢鉁囟容^R134a冷媒高，且開始運(yùn)行時(shí)因系統(tǒng)負(fù)載過高排氣溫度可達(dá)82℃；(2)碳?xì)淅涿降睦淠郎囟容^R134a高，系統(tǒng)穩(wěn)定后冷凝器出口溫度較R134a高19.2%；(3)碳?xì)淅涿皆谡舭l(fā)器出口溫度的拉低速率與最低溫度方面均優(yōu)于R134a冷媒，系統(tǒng)穩(wěn)定后蒸發(fā)器出入口溫度較R134a冷媒低約14.8%和14.5%。

（2）3D場(chǎng)景自由漫游，用戶通過鼠標(biāo)完成對(duì)整個(gè) 3D場(chǎng)景的移動(dòng)，縮放和旋轉(zhuǎn)操作，從而滿足用戶360度查看場(chǎng)景的需要，給用戶帶來良好的交互感和浸入感。

（3）設(shè)備健康狀態(tài)管理，用戶可自由查看機(jī)房?jī)?nèi)任意設(shè)備的健康度，健康度分為三個(gè)區(qū)間，分別用紅黃綠三種顏色來表示設(shè)備的健康狀態(tài)。當(dāng)系統(tǒng)檢測(cè)到設(shè)備出現(xiàn)告警信息時(shí)，在該設(shè)備的上方彈出對(duì)應(yīng)的告警標(biāo)志，用戶點(diǎn)擊告警標(biāo)志，彈出告警詳情，包括告警時(shí)間，告警類別。告警原因等。

（4）自動(dòng)巡航，用戶可以根據(jù)廠房環(huán)境和設(shè)備布局情況，設(shè)定巡航路徑，當(dāng)用戶點(diǎn)擊自動(dòng)巡航按鈕時(shí)，可以沿著設(shè)定好的路徑進(jìn)行巡視，無需用戶手動(dòng)操作，就能夠?qū)β窂缴系脑O(shè)備健康情況進(jìn)行全局了解，大大減少了用戶的工作量，提高了工作效率。

3 關(guān)鍵技術(shù)研究

隨著場(chǎng)景中模型數(shù)量的不斷增加，三維場(chǎng)景的復(fù)雜度也不斷增加，這樣會(huì)導(dǎo)致Web端渲染場(chǎng)景的時(shí)間越來越慢，甚至出現(xiàn)瀏覽器崩潰的現(xiàn)象，嚴(yán)重影響用戶體驗(yàn)。針對(duì)復(fù)雜三維場(chǎng)景的渲染，本文從兩個(gè)方面進(jìn)行優(yōu)化，一是場(chǎng)景組織方面，使用八叉樹結(jié)構(gòu)對(duì)場(chǎng)景進(jìn)行組織和優(yōu)化；二是對(duì)視錐體內(nèi)的模型進(jìn)行可見性剔除，通過減少渲染模型的數(shù)量來提高場(chǎng)景渲染效率。

3.1 基于八叉樹劃分場(chǎng)景

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

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

3.2 視錐體剔除

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

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

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

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

首先根據(jù)交點(diǎn) A和 B的橫坐標(biāo) Xa、Xb得到 X的區(qū)間[XaXb]，在該區(qū)間中隨機(jī)生成一個(gè)橫坐標(biāo)X，根據(jù)式（1）計(jì)算得出±YX，最后在區(qū)間[-YXYX]中隨機(jī)取一個(gè)縱坐標(biāo) Y，則（X，Y）構(gòu)成二維隨機(jī)點(diǎn)。其中，對(duì)于隨機(jī)數(shù)X和Y的生成本文調(diào)用JAVA自實(shí)現(xiàn)的Random方法。

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

圖6 視錐體內(nèi)模型剔除實(shí)現(xiàn)流程Fig.6 The process of frustum culling

基于八叉樹的復(fù)雜三維場(chǎng)景的渲染步驟描述如下：

（1）使用場(chǎng)景圖創(chuàng)建系統(tǒng)場(chǎng)景，然后基于八叉樹結(jié)構(gòu)劃分場(chǎng)景；

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

（3）基于八叉樹結(jié)構(gòu)對(duì)場(chǎng)景內(nèi)的模型對(duì)象進(jìn)行可見性視錐剔除操作；

（4）對(duì)于處于視錐體內(nèi)的模型對(duì)象進(jìn)行渲染；

（5）檢測(cè)相機(jī)位置或方向是否發(fā)生改變，若改變，重復(fù)步驟（3），否則轉(zhuǎn)（6）

（6）結(jié)束。

3.3 試驗(yàn)結(jié)果

為了驗(yàn)證優(yōu)化后的復(fù)雜三維場(chǎng)景的渲染算法，通過向三維場(chǎng)景文件中不斷增加模型的數(shù)量，逐步提高三維場(chǎng)景的復(fù)雜度，來驗(yàn)證該算法的可行性。在 3D可視化告警平臺(tái)中進(jìn)行廣泛的測(cè)試，實(shí)驗(yàn)結(jié)果如圖7所示：

圖7 優(yōu)化前后渲染場(chǎng)景時(shí)間對(duì)比圖Fig.7 Optimized before and after the scene rendering time contrast map

可以看出隨著模型對(duì)象個(gè)數(shù)的增加，場(chǎng)景文件的渲染時(shí)間不斷增加，當(dāng)模型數(shù)量小于 200（近似值）時(shí)，同一場(chǎng)景文件渲染時(shí)間進(jìn)行視錐體剔除后的算法高于傳統(tǒng)渲染算法，出現(xiàn)這種情況的原因是建立射線相交測(cè)試耗費(fèi)的時(shí)間抵消了優(yōu)化算法的提升時(shí)間，但場(chǎng)景文件中模型對(duì)象數(shù)量超過 200（近似值）的時(shí)候，視錐體剔除后的算法逐漸優(yōu)于傳統(tǒng)渲染算法，而且隨著模型對(duì)象數(shù)量的繼續(xù)增加，效果越來越明顯。

4 總結(jié)

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

[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的交互平臺(tái)設(shè)計(jì)與實(shí)現(xiàn)[J]. 電子測(cè)量技術(shù), 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技術(shù)探索及幾種Web3D技術(shù)的比較選擇[D]. 武漢大學(xué), 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開發(fā)指南[M]. 北京: 機(jī)械工業(yè)出版社,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]. 計(jì)算機(jī)技術(shù)與發(fā)展, 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ī)房運(yùn)維可視化系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[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).