基于WebGL技術的三維煤場重建系統

孫新佳，田宏哲，羅凱

(北京華能新銳控制技術有限公司，北京 102209)

0 引言

隨著現代技術的發展，人們對交互式應用的要求也提升到一個新的層次。傳統的工業組態應用軟件大多提供二維的圖形畫面，通過添加位置移動、顏色變化等動畫來傳達設備的運行信息。但是這種圖形只是單方面給用戶呈現了系統設備的側視圖或者俯視圖，并沒有給用戶反映整體的效果。隨著技術的不斷更新，有些軟件可以展現三維模型，但是需要在客戶端上安裝插件才能實現，其中包括UNITY3D、TURNTOOL和QUEST3D等[1]。這樣就帶來了很大的局限性，其中就涉及到插件與系統環境、瀏覽器等的兼容性問題，影響系統的穩定性。

隨著智能手機的大力發展，極大地推動了移動端和電腦端Web開發的興起，越來越多的應用軟件采用B/S架構，這樣移動端和電腦端無需額外安裝客戶端軟件，只要通過系統自帶的瀏覽器就能夠直接訪問部署在服務器上的應用。Web3D技術也越來越多地引起大家的關注，其中WebGL(web graphics library)是一種3D繪圖協議[2]，這種繪圖技術標準允許把JavaScript與OpenGL結合起來[3-4]。WebGL可以為HTML5 Canvas提供硬件3D加速渲染。WebGL標準是免費開放的，相對于私有的Adobe Flash Player、微軟Silverlight，WebGL具有極大的優勢：通過HTML腳本本身實現Web交互式三維動畫的制作，無需任何瀏覽器插件的支持；利用底層的圖形硬件加速功能進行圖形渲染，實現統一的、標準的、跨平臺的OpenGL接口[5]。目前已有很多不錯的WebGL開源框架，例如GLCE、SceneJS、CubicVR、THREE.js等[6]，其中THREE.js最受歡迎，它用簡單直觀的語法封裝了WebGL常用的三維對象，代碼中使用了很多調用圖形引擎的高級技巧，極大地提高了性能[7-8]。由于其完全采用JavaScript語言，所以很容易與其他瀏覽器組件進行交互，帶來很好的體驗效果。現在很多行業應用了WebGL技術，如網頁3D動畫[9]、交互式三維地球模型[10]、人臉模型建立[11]等。python是一種簡單的、解釋型的、交互式的、可移植的、面向對象的超高級語言，具有非常清晰的語法特點并適用于多種操作系統，在國際上非常流行，得到越來越多的應用。在圖像處理方面，python擴展了很多高級的編程工具包，為圖像數據處理提供了強大的數值計算支持。

本文主要解決的問題是將俯視的煤場灰度圖做空間拉伸，渲染成3D圖形。主要以THREE.js框架為基礎，構建一套煤場3D可視化系統，實現移動端或電腦端發送請求到三維圖像渲染顯示。具體實現前端請求發送，后端通過python程序處理二維圖像并將圖像信息存儲于JSON文件，前端利用ajax[12]讀取圖像JSON數據構建點云數據后通過THREE.js進行3D渲染呈現煤場三維模型。

1 python處理圖像

由于JavaScript不能直接對圖像進行處理操作，而python是在圖像處理方面有很強的實用性腳本語言，同時python語言有可移植性可以在絕大多數的平臺上直接運行[13]。

本文的原始數據是一個安裝在斗輪機上激光掃描儀生成的包含煤場空間信息的二維圖片，圖像中的明亮程度表示煤場的高度分布情況。在圖像數據處理中，一般情況下采用矩陣來表示圖像的數據信息，矩陣中的每一個元素代表圖像對應像素點的RGB值。由于JavaScript不能直接對圖像進行像素級的處理操作，所以在這里通過python腳本程序將所要訪問的圖像進行一定程度上的處理，并將圖像的信息寫入到JSON文件中。JSON是存儲和交換文本信息的語法，類似于XML，但是比XML更小、更快、更容易解析，尤其對于圖像這種幾十萬個數據而言，這種輕量級的文本傳輸格式不失為一種最佳的選擇。

讀取原始圖像數據后轉化為灰度圖，灰度圖中的數據代表這一點的明亮程度，在本文中的物理意義是煤場在這一點上的高度信息。圖中包含很多的噪聲，在三維重建中這種噪聲會被放大，影響模型呈現效果，所以圖像數據讀取后在程序中再進行中值濾波處理。中值濾波是一種非線性平滑技術，將每一個像素點的灰度值設置為該點鄰域窗口內的所有像素點灰度值的中值，這樣在很大程度上消除圖像中的沖擊噪聲[14]。

g(x，y)=med(f(x-k，y-l)，(k，l∈W))

(1)

式中：f(x，y)，g(x，y)分別為原始圖像和處理后的圖像的像素點；W為二維模板，通常采用3×3或5×5區域，也可以是不同形狀。

如圖1所示，圖1(a)為原始圖像(原始數據)，圖1(b)為做濾波處理后的圖像數據，通過對比可以發現做了平滑濾波之后，原始數據中不合理的噪聲數據被清除，處理后的圖像更加接近于現實情形。

圖1 原始圖像和平滑處理后的圖像

對于以上圖像，本文采用Tenengrad梯度函數對處理前后的圖像進行光滑度分析。Tenengrad梯度函數采用Sobel算子分別提取水平和垂直方向的梯度值，基于Tenengrad梯度函數的圖像光滑度定義如下：

D(f)=∑y∑x|G(x，y)|

(2)

G(x，y)形式如下：

(3)

Gx和Gy分別是像素點(x，y)處Sobel水平和垂直方向邊緣檢測算子的卷積，本文采用的Sobel算子模板如下：

x水平方向Sobel算子：

y垂直方向Sobel算子：

故原圖x、y方向的卷積分別為：

Gx=Sx*A，Gy=Sy*A

(4)

式中：A表示原始灰度圖像。通過基于Tenengrad梯度函數的圖像光滑度公式可得圖2和表1。

圖2 濾波后圖像的Tenengrad梯度圖

圖3 原圖的Tenengrad梯度圖

表1 光滑度對比表

通過圖2、圖3中圖像梯度圖的幅值，以及表1中的數值，可知經過濾波處理后的圖片去除了大部分的噪聲干擾，圖像更加光滑，更符合現場情況。

經過濾波降噪處理后，通過python腳本按照表2格式將圖像信息寫入到JSON文件中。

表2 data.json文件數據結構表

表1中，height表示圖像尺寸的長度，width表示圖像尺寸的寬度；data存儲圖像矩陣的數據，從矩陣的第一行開始依次存儲整個矩陣的數據，矩陣數據的坐標信息可以通過矩陣的height和width去計算，而不再單獨存儲數據在矩陣的坐標信息，選擇這樣的存儲方式可以減少很大的數據傳輸量，使系統響應更快。

2 基于THREE.js構建幾何體算法

眾所周知，點動成線，線動成面，面動成體，一個面片都可以通過3個點確定的三角形或者4個點確定的四邊形來構建，而由有限個這樣的面片可以近似逼近任何一個面。在三維建模領域，建模的時候使用四邊形是大家經常采用的方式，因為四邊形比三角形更容易增強和平滑。但是對于渲染和游戲引擎來講，使用三角形更加容易，因為任何一個形狀都可以渲染成多個三角形。THREE.js提供函數THREE.Vector3()來確定空間坐標中的一點，將三維模型所有的點全部聲明并實例化存儲于數組vertices，函數THREE.Face3()用來使用vertices中的三個點來構建一個三角形，將vertices中所有的點按照所構建的模型需要進行組合，這樣就完成了空間模型所有三角形的構建工作[15]。

二維數字圖像可以通過二維數據矩陣來表示，如果圖像為彩色圖像，任何顏色都有紅、綠、藍3種顏色組成，那么矩陣的每個元素的顏色值為RGB(R，G，B)。所謂灰度圖像，即每個矩陣元素為RGB(R，G，B)，且R=G=B=Gray，其值的大小表示圖像的亮度信息。由RGB色轉灰度色有3種算法：①浮點算法：Gray=R*0.3+G*0.59+B*0.11。②整數算法：Gray=(R*299+G*587+B*114+500)/1 000。③平均法：Gray=(R+G+B)/3。為避免低速的浮點運算，在大多數的情況下采用整數算法，所以本文通過后端程序通過python腳本將彩色圖像轉化為灰度圖，其圖像數據矩陣如圖4所示。

圖4 圖像數據矩陣示意圖

圖4表示一個圖像數據矩陣，a、b、c、d點數據分別包含對應圖像像素點在數據矩陣的坐標及亮度值，這3個數據即為對應像素點在空間的坐標，每個像素點在矩陣的位置坐標即為三維空間XOZ平面上的坐標，像素點的亮度值即為三維空間Y軸的坐標，這樣通過獲取圖像數據矩陣可以確定圖像中每一個像素點在控制XYZ軸的坐標。(a，b，c)、(a，d，c)或(a，b，d)、(b，d，c)分別表示2個三角形，這樣遍歷整個圖像數據矩陣，那么整個圖像就可以通過這樣的三角形組合顯示。算法步驟如下：

①獲取圖像高度和寬度，即height，width。

②構建空間數據點集vertices。

//遍歷整個數據矩陣

for (i=0；i

for(j=0；j

{

x=i；

z=j；

y=arr[i，j]；

//構建空間數據點集

vertices.push(Vector3(x，y，z))

}

③構建空間三角面集faces。

//遍歷整個數據矩陣

for(i=0；i

for(j=0；j

a=i*width+j；

b=i*width+j+1；

c=(i+1)*width+j+1；

d=(i+1)*width+j；

faces.push(Face3(a，b，c))；

faces.push(Face3(a，d，c))；

}

}

3 三維重建

首先通過python腳本讀取原始二維圖像，并做灰度化處理，再對灰度圖像做中值濾波處理，清除圖像中的沖擊噪聲，處理之后將灰度圖的寬度、高度及亮度值信息按照表2格式寫入到data.json文件中。

對于JSON文件，JavaScript可以對其直接進行解讀，將JSON保存的圖像數據信息全部讀取到變量中存儲，代碼如下：

var arr=new Array()；

var width；

var height；

$.ajaxSettings.async=false；

$.get(′data.json′，function(data){

height=data[″size″][0]；

width=data[″size″][1]；

for(var i=0；i<= height；i++){

arr[i]=new Array(i)；

for(var j=0；j<= width；j++){

arr[i][j]=data[″data″][j+i*(width+1)]]；

}

}

}，′json′)；

這里，二維數組arr存儲的即為圖像矩陣的數據。所要注意的是ajax的請求為同步，即$.ajaxSettings.async=false，否則會影響模型的加載。

讀取數據后，接下是構建空間散點和三角形，算法如下：

function (func，slices，stacks) {

THREE.Geometry.call(this)；

this.type = ′ParametricGeometry′；

this.parameters = {

func：func，

slices：slices，

stacks：stacks

}；

var verts = this.vertices；

var faces = this.faces；

var i，j，p；

var u，v；

var stackCount = stacks + 1；

var sliceCount = slices + 1；

for (i = 0；i <= stacks；i ++) {

v = i；

for (j = 0；j <= slices；j ++) {

u = j；

p = func(u，v)；

verts.push(p)；

}

}

var a，b，c，d；

for (i = 0；i < stacks；i ++) {

for (j = 0；j < slices；j ++) {

a = i * sliceCount + j；

b = i * sliceCount + j + 1；

c = (i + 1) * sliceCount + j + 1；

d = (i + 1) * sliceCount + j；

faces.push(new THREE.Face3(a，b，d))；

faces.push(new THREE.Face3(b，c，d))；

}

}

this.computeFaceNormals()；

this.computeVertexNormals()；

}；

function(u，v){

//構建空間點函數

x=u；

z=v；

y=arr[x][z]；

return new THREE.Vector3(x，y，z)；

}

通過上述算法，利用THREE.js框架渲染后的煤場如圖5所示。

圖5 煤場空間三維圖像

圖6是利用iconics Genesis64軟件渲染的三維效果，將位圖格式(.bmp)的圖像導入到軟件中，再設定其部分參數，軟件獲取圖像像素點值大小自動做拉伸處理，最終渲染成三維效果。對比2幅圖像，可以看出，iconics軟件只是對圖像做了空間的拉伸，并不具備消除圖像中沖擊噪聲的功能，同時只支持電腦端訪問；本文設計的系統通過后端python程序對圖像做平滑處理后，能夠將大部分圖像噪聲濾除掉，這樣渲染出來的三維效果更加平滑，貼近現實，效果更好，同時支持移動端和電腦端無插件瀏覽。

圖6 GENESIS64渲染煤場三維圖像

4 結束語

本文設計了一套基于B/S架構利用二維圖像重建三維場景的系統，主要應用于煤場三維重建領域。用戶通過移動端和電腦端發送請求，系統后臺程序自動處理所請求的煤場圖像信息并轉化為JSON數據推送到前端，前端不借助任何第三方插件自動渲染出煤場的三維模型。通過與其他軟件對比，本文所設計的三維重建系統在項目中具有更好的渲染效果，能夠清除圖像中絕大部分的沖擊噪聲，并且具有很強的擴展性，可以與其他系統嵌套使用，對于煤場信息管理具有較強的便利性和實用性。