甄 彤，桑俊杰，肖 樂

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

0 前言

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

1 雙三次B 樣條插值模擬

1.1 B 樣條

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

圖1 三次B 樣條曲線

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

1.1.1 均勻三次B 樣條

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

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

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

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

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

B 樣條具有特性為：

（1）遞推性.

（3）局部控制性.

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

1.2 雙三次B 樣條曲面

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

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

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

1.3 插值結(jié)果分析

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

圖2 2008 年4 月—12 月同一測溫點的溫度情況

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

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

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

2 WebGL 技術(shù)

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

2.1 WebGL 工作原理

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

圖3 渲染管線流程

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

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

2.2 Three.js

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

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

設置場景（scene）：場景相當于一個三維空間，隨后定義的任何元素都要放在場景里.

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

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

設置物體（object）：物體就是在場景中處理的三維對象.

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

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

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

圖4 傳感器模擬

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

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

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

3 總結(jié)

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

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

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

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

［4］王仲東，唐發(fā)明.大型糧倉的溫度場重建［C］.中國糧油學會第三屆學術(shù)年會論文選集（下），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.