WebGL 技術(shù)在糧溫監(jiān)控中的應(yīng)用

甄 彤，?？〗埽?樂(lè)

（河南工業(yè)大學(xué) 信息科學(xué)與工程學(xué)院，河南 鄭州 450001）

0 前言

在糧食儲(chǔ)藏過(guò)程中，糧堆內(nèi)溫度是儲(chǔ)糧安全的重要指標(biāo)，然而出于成本考慮以及進(jìn)出糧的需要，糧堆內(nèi)的溫度傳感器設(shè)置數(shù)量有限，因此在儲(chǔ)糧當(dāng)中測(cè)得的溫度值只是傳感器附近的溫度，其他部分則需要利用相應(yīng)的方法進(jìn)行數(shù)值模擬.隨著信息化技術(shù)在各行各業(yè)的不斷普及，計(jì)算機(jī)可視化技術(shù)也得到推廣，在工程應(yīng)用以及科研領(lǐng)域，常常需要計(jì)算機(jī)依據(jù)各種數(shù)據(jù)以及模型進(jìn)行處理，畫(huà)出相應(yīng)的三維立體圖像，以便人們得到直觀、有效的結(jié)果[1-4].常用的三維可視化技術(shù)有OPENGL、Autodesk公司開(kāi)發(fā)的3DMax、開(kāi)源多平臺(tái)的Blender 以及Tecplot 公司的Tecplot 360 等.然而面對(duì)人們對(duì)跨平臺(tái)，Web 交互等方面的需求越來(lái)越強(qiáng)烈以及互聯(lián)網(wǎng)技術(shù)的飛速發(fā)展，網(wǎng)絡(luò)三維技術(shù)應(yīng)運(yùn)而生.網(wǎng)絡(luò)三維是一種能實(shí)時(shí)渲染且具有交互性的網(wǎng)絡(luò)技術(shù)，突破了地域、平面以及空間的限制，使得人們更便捷地處理相應(yīng)數(shù)據(jù).作者采用雙B 樣條采樣方法，利用WebGL 技術(shù)實(shí)現(xiàn)糧堆溫度的可視化.

1 雙三次B 樣條插值模擬

1.1 B 樣條

B 樣條曲線一般應(yīng)用在計(jì)算機(jī)輔助設(shè)計(jì)與制造當(dāng)中，是一種由大量控制點(diǎn)生成曲線的工具，它具有樣條曲線的普遍特性：是一條只需要幾個(gè)點(diǎn)依次指定的光滑曲線，可以通過(guò)相應(yīng)算法找到曲線或者曲面的點(diǎn)，根據(jù)人們對(duì)近似度的需求，通過(guò)迭代計(jì)算方法使用線段能足夠準(zhǔn)確再現(xiàn)曲線的形狀.圖1 為一簡(jiǎn)單的三次B 樣條曲線.

圖1 三次B 樣條曲線

由圖1 可知，曲線有9 個(gè)控制點(diǎn)定義，曲線整體趨向控制點(diǎn).B 樣條曲線按照節(jié)點(diǎn)分布的情況，分為均勻B 樣條曲線和非均勻B 樣條曲線.

1.1.1 均勻三次B 樣條

均勻三次B 樣條是一種最簡(jiǎn)單最常用的情況，由n+1 個(gè)控制點(diǎn)p0，p1，p2，…，pn定義，結(jié)合一組基函數(shù)N0（u），N1（u），…，Nn（u），曲線的參數(shù)化定義為：

其中3≤u≤n+1，且當(dāng)u≤i 或i+4≤u 時(shí)，Ni（u）=0.由式（1）可以看出，B 樣條具有局部控制的性質(zhì)：當(dāng)某個(gè)控制點(diǎn)pi移動(dòng)時(shí)，曲線q（u）只在u∈（i，i+4）這一部分發(fā)生改變，其余部分不受影響.

1.1.2 非均勻三次B 樣條[2]

設(shè)一組實(shí)數(shù)u0≤u1≤u2≤…≤ui-1≤ui，［u0，u1，u2，…，ui-1，ui］為節(jié)點(diǎn)向量，p0，p1，p2，…，pn為一組控制點(diǎn)，Ni，k（u）為基函數(shù)，k 為次數(shù)，則由Cox-de Boor 公式定義的相應(yīng)的基函數(shù)為：

其中對(duì)于i=0，…，l-1，基函數(shù)特性為：

B 樣條具有特性為：

（1）遞推性.

（3）局部控制性.

在節(jié)點(diǎn)內(nèi)部無(wú)限可微，在節(jié)點(diǎn)處是k-r 次可微，r 為重復(fù)度.相應(yīng)的B 樣條公式為：

1.2 雙三次B 樣條曲面

為了模擬出相應(yīng)平面的等溫面，采用雙三次B樣條插值曲面來(lái)實(shí)現(xiàn).給定（m+1）×（n+1）個(gè)控制點(diǎn)pi，（ji=0，1，…，m；j=0，1，…，n）構(gòu)造成一張網(wǎng)格.控制點(diǎn)pi，j用行矢量表示為pi，j=［xi，yj，zij］，xi，yj為XY 平面區(qū)域上U=［a，b］× ［c，d］被規(guī)則矩形網(wǎng)格Δ=Δx×Δy分割后的網(wǎng)格點(diǎn)，其中：

通過(guò)對(duì)數(shù)據(jù)點(diǎn)pi，j的插值曲面定義域U=［a，b］× ［c，d］轉(zhuǎn)變?yōu)橐?guī)范定義域u×v=［0，1］×［0，1］，則雙三次B 樣條插值曲面可寫(xiě)成為:

式中，dij（i=0，1，…，l；j=0，1，…，k；l=s+2；k=r +2）為曲面的控制頂點(diǎn)矢量[5]；p（u，v）=［x（u，v），y（u，v），z（u，v）］.

1.3 插值結(jié)果分析

為了檢驗(yàn)B 樣條插值曲面擬合的實(shí)用性，作者結(jié)合2008—2009 年山東聊城糧庫(kù)平方倉(cāng)小麥實(shí)測(cè)溫度值，從時(shí)間和空間域兩方面進(jìn)行分析：首先從該平房倉(cāng)中隨機(jī)抽取一傳感器位置作為參考點(diǎn)，依據(jù)2008 年4 月—12 月中旬期間隨機(jī)抽取多個(gè)時(shí)間點(diǎn)的溫度值繪制出該點(diǎn)隨時(shí)間變化的溫度曲線R，然后根據(jù)雙三次B 樣條插值曲面算法計(jì)算出相應(yīng)時(shí)間點(diǎn)該傳感器位置的理論值，繪出相應(yīng)曲線C，如圖2 所示，由圖2 可知，由雙三次B 樣條函數(shù)插值的結(jié)果與實(shí)際值總體變化趨勢(shì)基本相符.

圖2 2008 年4 月—12 月同一測(cè)溫點(diǎn)的溫度情況

在空間域方面，隨機(jī)選取2008 年9 月20 日某一時(shí)間點(diǎn)內(nèi)10 個(gè)不同位置傳感器測(cè)得的溫度值，然后模擬出相應(yīng)位置的溫度值，然后進(jìn)行分析，N表示溫度傳感器節(jié)點(diǎn)號(hào)，T1 表示實(shí)測(cè)溫度值，T2表示模擬溫度值，e 表示相應(yīng)的誤差，結(jié)果見(jiàn)表1.

表1 不同位置糧食溫度誤差分析結(jié)果

由表1 可知，模擬溫度值與實(shí)際值差距比較小，一般都在1～2 ℃.而對(duì)于儲(chǔ)糧溫度監(jiān)測(cè)分析來(lái)說(shuō)，這樣的誤差是可以接受的.因此，采用B 樣條插值函數(shù)的方法進(jìn)行溫度插值擬合是可行的.

2 WebGL 技術(shù)

在WebGL 技術(shù)開(kāi)發(fā)之前，人們?yōu)榱说玫秸嬲?D 體驗(yàn)，開(kāi)發(fā)者不得不要求用戶下載或安裝各種插件或者應(yīng)用程序，往往給人們帶來(lái)不便.于是Khronos 小組在2009 年8 月提出一種可應(yīng)用于Web 的新的開(kāi)源的3D 圖形繪圖技術(shù)——WebGL.它是一種基于OPENGL ES 2.0 的一種新的API，在瀏覽器中與Web 頁(yè)面的其他元素可以無(wú)縫連接；WebGL 具有跨平臺(tái)的特性，可以運(yùn)行在從手機(jī)、平板到家用電腦的任何主流操作系統(tǒng)當(dāng)中.目前Chrome、Firefox、Safari 以及Opera 幾大主流瀏覽器都能夠支持WebGL，而商業(yè)巨頭微軟曾經(jīng)堅(jiān)決反對(duì)的態(tài)度逐漸緩和，人們?cè)谄湫乱淮鸀g覽器IE11當(dāng)中看到了WebGL 的身影.

2.1 WebGL 工作原理

WebGL 直接工作在計(jì)算機(jī)的顯卡端，因此能夠充分利用平時(shí)一直閑置的GPU，完成大量計(jì)算實(shí)現(xiàn)實(shí)時(shí)的3D 渲染，在渲染場(chǎng)景時(shí)，要通過(guò)渲染管線（Rendering Pipeline）來(lái)實(shí)現(xiàn).跟其他的實(shí)時(shí)3D 圖形相同，WebGL 將三角形用于位置模型的基本元素，利用JavaScript 生成相應(yīng)的繪制信息，包括目標(biāo)的位置、結(jié)構(gòu)、顏色、紋理等.GPU 接收這些繪制信息返回繪制結(jié)果[6].渲染管線的具體流程如圖3 所示.

圖3 渲染管線流程

首先將輸入的JavaScript 或者自己導(dǎo)入3D 模型文件中的頂點(diǎn)數(shù)組及其內(nèi)部數(shù)據(jù)，填充到頂點(diǎn)緩沖中后傳輸?shù)紾PU 端，GPU 接收到信息后在頂點(diǎn)著色器中進(jìn)行處理，頂點(diǎn)著色器是一個(gè)程序，可以自己定義，也可以由第三方圖形庫(kù)提供.接著GPU 會(huì)連接這些頂點(diǎn)形成三角形，再由光柵器作用于每個(gè)三角形，切出并只保留這些三角形部分，細(xì)分之后填充到像素大小的片元中，將片元傳遞給片元著色器.片元著色器跟頂點(diǎn)著色器一樣，可以自定義或者引用第三方圖形庫(kù).片元著色器輸出每個(gè)像素的顏色和深度值，以便于在幀緩沖里進(jìn)行繪制.

在試驗(yàn)中，在電腦上是在Chrome 瀏覽器中運(yùn)行，手機(jī)中是在Firefox 20 中運(yùn)行.新版本的Chrome 瀏覽器默認(rèn)開(kāi)啟WebGL，也可通過(guò)添加運(yùn)行參數(shù)開(kāi)啟：--enable-WebGL；而Firefox 瀏覽器則需在瀏覽器欄中輸入：about：config，然后再出現(xiàn)的首選項(xiàng)設(shè)置中將WebGL.force-enabled 和WebGL.disabled 的值分別改為true 和false.以后就可以在這兩款瀏覽器中運(yùn)行WebGL.

2.2 Three.js

Three.js 是一款開(kāi)源的WebGL 圖形開(kāi)發(fā)框架，由Diego cander 等提出[7].他們提供了一種在3D 圖形中簡(jiǎn)單、直觀的建立常見(jiàn)模型的方法，能夠高速利用許多最佳圖形引擎實(shí)踐技術(shù)，是一種內(nèi)嵌多種對(duì)象類(lèi)型的便捷工具.

Three.js 與其他的WebGL 圖形框架一樣，使用流程沿用一般三維世界的基本結(jié)構(gòu)進(jìn)行定義，主要流程如下：

設(shè)置場(chǎng)景（scene）：場(chǎng)景相當(dāng)于一個(gè)三維空間，隨后定義的任何元素都要放在場(chǎng)景里.

設(shè)置攝像機(jī)（camera）：攝像機(jī)跟普通意義上的相機(jī)一樣，視角所覆蓋的內(nèi)容就是生成圖像時(shí)所看到的景象.

設(shè)置燈光（light）：燈光也是三維建模的重要元素，不同的燈光照射到物體上呈現(xiàn)不同的光影效果；不同顏色的燈光與物體自身的紋理相互作用呈現(xiàn)不同的顏色.

設(shè)置物體（object）：物體就是在場(chǎng)景中處理的三維對(duì)象.

設(shè)置渲染器（render）：渲染器的主要作用是將三維空間中的物體映射到二維平面，即將三維數(shù)據(jù)處理之后在顯示器平面顯示出來(lái).場(chǎng)景中的物體經(jīng)過(guò)渲染器渲染后，才可以在平面上顯示出來(lái).

通過(guò)建立一個(gè)HTML 頁(yè)面，在HTML 當(dāng)中添加canvas 元素以便于WebGL 進(jìn)行渲染，然后再在body 上添加onload 事件來(lái)接收初始化整個(gè)WebGL環(huán)境.于是在頁(yè)面加載完成后，調(diào)用onload 中的函數(shù)，WebGL 開(kāi)始渲染.

基于Three.js 的傳感器模擬如圖4 所示，左圖為電腦上運(yùn)行，右側(cè)為手機(jī)中運(yùn)行.某一糧倉(cāng)當(dāng)中糧堆內(nèi)傳感器排列如圖4 中球體呈8×6×3 矩形排列.每一個(gè)球體代表糧堆內(nèi)相應(yīng)位置的傳感器.當(dāng)傳感器提示溫度正常時(shí)，球體呈綠色，溫度過(guò)高或者過(guò)低時(shí)，球體呈紅色；數(shù)據(jù)顯示不正常時(shí)呈藍(lán)色.利用鼠標(biāo)拖動(dòng)整個(gè)矩陣，可以從不同角度觀察糧堆內(nèi)整體情況.

圖4 傳感器模擬

利用雙三次B 樣條插值曲面依據(jù)各個(gè)溫度傳感器的數(shù)值模擬出糧堆溫度曲面，然后通過(guò)反算得到曲面上各個(gè)點(diǎn)的數(shù)據(jù)，對(duì)曲面的點(diǎn)的信息（空間內(nèi)位置信息，溫度值）進(jìn)行處理，通過(guò)Three.js 接收點(diǎn)的平面位置信息以及溫度信息，以點(diǎn)的平面位置為相應(yīng)的X、Y 坐標(biāo)，溫度值為相應(yīng)的Z 坐標(biāo)，配以某種顏色逐點(diǎn)渲染生成糧堆內(nèi)平面溫度圖.

圖5 糧堆內(nèi)某一平面的溫度

糧堆內(nèi)部某一平面溫度如圖5 所示，利用鼠標(biāo)可以從各個(gè)角度觀察儲(chǔ)糧信息.X、Y 代表糧堆內(nèi)某一平面糧食的實(shí)際位置，Z 代表相應(yīng)點(diǎn)的溫度值，Z=0 即XY 面代表一溫度基面，高于XY，則該面的糧食溫度過(guò)高，相反低于該面，說(shuō)明糧面溫度處于警戒線以下.

3 總結(jié)

通過(guò)B 樣條插值曲面的方法對(duì)糧堆內(nèi)部的溫度分布進(jìn)行數(shù)值模擬，然后利用WebGL 技術(shù)實(shí)現(xiàn)溫度監(jiān)控的三維可視化，因?yàn)槠渚哂锌缙脚_(tái)、免插件以及聯(lián)網(wǎng)數(shù)據(jù)交互的特性，比起普通方法更直觀、高效，便于相關(guān)人員遠(yuǎn)程監(jiān)控；鑒于WebGL 的特性，人們還可以通過(guò)手機(jī)、平板等移動(dòng)終端訪問(wèn)實(shí)時(shí)了解糧堆內(nèi)溫度信息，不過(guò)由于直接在GPU端渲染，一般的移動(dòng)終端限于硬件條件只能訪問(wèn)簡(jiǎn)單的頁(yè)面，但是在電子技術(shù)日新月異的今天，這些問(wèn)題一定能夠得到解決.

［1］Biss S R.3D 計(jì)算機(jī)圖形學(xué)（OpenGL 版）［M］.北京:清華大學(xué)出版社，2006.

［2］施法中.計(jì)算機(jī)輔助幾何設(shè)計(jì)與非均勻有理B 樣條［M］.北京:高等教育出版社，2001.

［3］李濤，劉浩.B 樣條曲面的雙向插值造型算法［J］.計(jì)算機(jī)工程與應(yīng)用，2012，48（35）：178-181.

［4］王仲東，唐發(fā)明.大型糧倉(cāng)的溫度場(chǎng)重建［C］.中國(guó)糧油學(xué)會(huì)第三屆學(xué)術(shù)年會(huì)論文選集（下），2004.

［5］Cottrell J A，Bazilevs Y R，Hughes T J R.Isogeometric analysis:toward interation of CAD and FEA［M］.USA：John Wiley &Sons Inc，2009.

［6］Tony Parisi.WebGL：up and running［M］.USA：O'Reilly Media Inc，2012.

［7］Diego Cantor，Brandon Jones.WebGL beginner's guide［M］.UK:packt Publishing，2012.