基于WebGL的遙感影像濾鏡模式設(shè)計與實現(xiàn)

羅霄 劉思言 特日根

【摘? 要】隨著遙感衛(wèi)星技術(shù)的不斷發(fā)展，遙感數(shù)據(jù)被應(yīng)用于不同的行業(yè)當(dāng)中。論文基于對遙感影像進行非真實感繪制的問題，提出了一種使用WebGL的全新模式。通過結(jié)合JavaScript與WebGL技術(shù)，實現(xiàn)了通過前端生成遙感影像油畫濾鏡的業(yè)務(wù)邏輯。最后實驗證明該模式可以有效利用用戶端的GPU進行影像處理，既縮短了單幅影像的處理時間，又節(jié)省了網(wǎng)絡(luò)傳輸所消耗的時間。因此，該模式適合為用戶提供線上遙感影像處理服務(wù)。

【Abstract】With the continuous development of remote sensing satellite technology， remote sensing data is applied in different industries. Based on the problem of non photorealistic rendering of remote sensing image， this paper proposes a new mode of using WebGL. Through the combination of JavaScript and WebGL technology， this mode realizes the business logic of generating remote sensing image oil painting filter through the front end. Finally， experiments show that this mode can effectively use the GPU of user-end for image processing， which not only shortens the processing time of a single image， but also saves the time consumed in network transmission. Therefore， the mode is suitable for providing users with online remote sensing image processing service.

【關(guān)鍵詞】WebGL;JavaScript;非真實感繪制;GPU;油畫;濾鏡

【Keywords】WebGL; JavaScript; non photorealistic rendering; GPU; oil painting; filter

【中圖分類號】TP391? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?【文獻標(biāo)志碼】A? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?【文章編號】1673-1069（2020）09-0194-03

1 引言

伴隨計算機硬件性能發(fā)展和圖像處理算法的不斷進步，基于計算機算法實現(xiàn)的油畫、水彩畫、浮雕畫等非真實感繪制（non photorealistic redering，NPR）的技術(shù)發(fā)展迅猛，其應(yīng)用也越來越廣泛[1，2]。近年來，隨著遙感衛(wèi)星的快速發(fā)展，遙感影像在數(shù)據(jù)量和分辨率上都有了很大的提高[3]。對遙感影像進行特殊風(fēng)格的轉(zhuǎn)換并最終生成裝飾畫也受到了衛(wèi)星展館、主題酒店、圖書館甚至個人用戶的關(guān)注。遙感影像具有幅寬大、像素多[4]的特點，對遙感影像進行圖像處理需要消耗大量的計算資源，因此，大多數(shù)算法都需要在后臺進行計算。

隨著HTML5的普及，前端可以承載客戶端應(yīng)用復(fù)雜的業(yè)務(wù)邏輯。WebGL[5]基于OpenGL擴展而來，將OpenGL ES 2.0[6]與JavaScript[7]結(jié)合到了一起，在不需要任何瀏覽器插件的情況下，完成基于GPU加速的圖形繪制。通過這種處理方式，不但可以降低程序運行時對外部環(huán)境的依賴，也有效地減輕CPU的計算壓力，提高了程序計算的并行程度。

本文通過使用WebGL技術(shù)在前端完成遙感影像油畫濾鏡處理的所有計算工作，將B/S端應(yīng)用的計算壓力從后臺轉(zhuǎn)移到了用戶本地計算機。針對遙感影像的處理采用WebGL獨有的硬件級加速方式[8]，降低程序運行時間。將該方法與傳統(tǒng)OpenCV實現(xiàn)的方法進行對比，并從影像處理效率方面進行比較和分析，證明該方法的可行性及有效性。

2 油畫濾鏡的原理和算法分析

油畫是一種色彩較重、色塊十分明顯的濾鏡類型，其處理方式在一定程度上類似于對色彩信息的分類并聚集，處理的結(jié)果中會表現(xiàn)一些特定的色彩，而忽略和這些顏色相近的顏色[9]。根據(jù)油畫算法的特點，設(shè)計算法步驟如下：

①對每個像素RGB三個分量以不同的權(quán)值進行加權(quán)求和，按照式（1）得到像素的灰度值Q（x，y），其中x、y分別是像素在圖像坐標(biāo)系下的橫、縱坐標(biāo)。

Q（x，y）=0.299*（x，y）+0.578G（x，y）+0.114*B（x，y）? ? ? （1）

②設(shè)置模板半徑為r，以圖像中每個像素為中心，按照式（2）統(tǒng)計其模板半徑內(nèi)的灰度直方圖Hist，其中i為像素的灰度值，card（x，y）表示灰度值為i的元素個數(shù)。

Hist（i）=card（x，y）|Q（x，y）=i? ? ? ? ? ? ? ? ? ?（2）

③記錄每個像素灰度直方圖Hist的每個灰度值對象i的原始RGB值，并以C（i）表示，其中C是一個三元素的向量，三元素分別表示RGB的值。C（i）的計算公式如式（3）所示。

C（i）=（R（x，y），G（x，y），B（x，y）|Q（x，y）=i? ? ? ? ? ? ? （3）

④統(tǒng)計灰度直方圖Hist中最大card值對應(yīng)灰度值對象i的原始RGB值，并將該值賦給中心點像素。

3 技術(shù)實現(xiàn)

3.1 WebGL繪圖的實現(xiàn)

WebGL程序運行流程如圖1所示，具體步驟如下：

①創(chuàng)建DOM作為容納WebGL的容器，并根據(jù)容器獲取WebGL的上下文。

②根據(jù)功能編寫GLSL著色器程序，包括頂點著色器（Vertex Shader）與片段著色器（Fragment Shader）。頂點著色器負(fù)責(zé)控制將頂點的大小、位置等屬性輸入屏幕上，片段著色器負(fù)責(zé)控制頂點的顏色信息。

③編譯著色器程序，并將著色器程序綁定給WebGL上下文，鏈接生成WebGL program。

④將數(shù)組及矩陣綁定到著色器中，WebGL中一共有兩種變量，頂點屬性變量（Attribute）與常量（Uniform）。其中，頂點屬性變量傳遞那些與頂點相關(guān)的數(shù)據(jù)，包括位置、顏色、紋理信息等;而常量則處理那些與頂點數(shù)據(jù)都相同的數(shù)據(jù)，如環(huán)境光、投影矩陣、變換矩陣。

⑤在創(chuàng)建著色器程序并綁定數(shù)據(jù)之后，調(diào)用WebGL繪制接口進行繪制操作。

3.2 油畫濾鏡的實現(xiàn)過程

紋素定義：紋素（texture pixel，Texel）是紋理元素的簡稱，它是構(gòu)成計算機圖形紋理空間的最小基本單位。

整體的油畫算法實現(xiàn)流程如圖2所示，主要包含如下幾個步驟：

①在標(biāo)準(zhǔn)WebGL坐標(biāo)系下，計算影像一個像素所占的大小。

②提取影像中一個像素對應(yīng)紋素的RGB值。

③根據(jù)定義的加權(quán)求和公式計算每個紋素的灰度值。

④設(shè)置紋素的模板半徑為r，同時，以紋素為中心點，以r為計算半徑，統(tǒng)計其直方圖。

⑤根據(jù)統(tǒng)計結(jié)果，以直方圖最大值對應(yīng)RGB值作為紋素RGB值。

⑥重復(fù)上述四步，直到計算全部紋素的RGB值后結(jié)束該過程。

4 實驗與結(jié)果

4.1 軟硬件平臺

實驗相關(guān)硬件條件如表1所示。

4.2 瀏覽器性能分析

本文實驗中采用吉林一號拍攝的俄羅斯梅克列塔農(nóng)田遙感影像為輸入，圖片大小為4762*2678像素，水平分辨率與垂直分辨率均為72dpi，位深度為24，原始輸入影像如圖3a所示。設(shè)置模板半徑分為4、8、16，其處理結(jié)果如圖3b、3c、3d所示。通過實驗結(jié)果可以發(fā)現(xiàn)，使用WebGL進行前端圖像油畫處理可以得到人們視覺感知中模糊效果，圖像的紋理輪廓也得到了保留。由于顯卡性能過低，當(dāng)模板半徑大于16時，算法計算量過大，造成瀏覽器崩潰。本文對比了選取不同模板半徑算法在Chrome瀏覽器上的時間消耗，結(jié)果如圖4所示。

由圖4可知，使用WebGL對影像進行油畫處理，不僅實現(xiàn)了線上處理模式，同時，將處理壓力分散到用戶端，可以有效地提高服務(wù)響應(yīng)效率。結(jié)合圖3的實驗結(jié)果對比可以發(fā)現(xiàn)，模板半徑越大，處理時間越長，圖像越模糊，邊緣細(xì)節(jié)越少。但當(dāng)模板半徑為8時，圖像邊界模糊程度適中，較為敏感的小像素塊能夠完整地保留下來。因此，當(dāng)算法模板半徑為8時，既保證了影像的處理效果，同時，響應(yīng)效率能夠滿足線上業(yè)務(wù)需求。

4.3 與OpenCV對比實驗

本文同時使用傳統(tǒng)OpenCV在后端實現(xiàn)相同的油畫算法并與WebGL進行對比，得到的結(jié)果圖像對比如圖5所示，時間對比如圖6所示。從對比結(jié)果可以發(fā)現(xiàn)，兩種處理方式得到的最終圖像幾乎相同，WebGL技術(shù)使用GPU對算法進行加速，因此，在運行效率上較OpenCV有明顯提升。選取半徑越大，計算量越大，提升效果越明顯。同時，使用WebGL技術(shù)，算法在用戶本地計算機進行計算，減少了數(shù)據(jù)傳輸過程造成的時間消耗，節(jié)約了網(wǎng)絡(luò)帶寬。

5 結(jié)語與展望

本文針對遙感影像非真實感繪制處理速度問題，提出了使用WebGL在前端完成圖像處理任務(wù)，并利用該方法實現(xiàn)了油畫濾鏡算法，并通過遙感影像進行了實驗驗證。實驗結(jié)果表明，通過引入WebGL技術(shù)，將遙感影像轉(zhuǎn)換成油畫與使用OpenCV方法效果相同，同時，因為WebGL自帶的GPU加速，油畫算法的實現(xiàn)速度較OpenCV有了明顯的提高。通過WebGL技術(shù)來實現(xiàn)遙感影像處理工作，可以將數(shù)據(jù)處理工作從服務(wù)器端轉(zhuǎn)移到用戶端，可以分散影像處理壓力，更適合于線上服務(wù)模式。

今后，我們將在保證應(yīng)用運行速度、準(zhǔn)確率的前提下，繼續(xù)基于WebGL離屏渲染特性研究如水彩畫、鉛筆畫等更加復(fù)雜的濾鏡算法，同時，將嘗試在視頻處理功能上應(yīng)用WebGL技術(shù)[10]在前端進行加速。

【參考文獻】

【1】劉美芳，石春菊.淺談計算機圖像處理技術(shù)的發(fā)展[J].電腦知識與技術(shù)：學(xué)術(shù)交流，2016，12（32）：241-242+250.

【2】盧少平，張松海.基于視覺重要性的圖像油畫風(fēng)格化繪制算法[J].計算機輔助設(shè)計與圖形學(xué)學(xué)報，2010，22（07）：1120-1125.

【3】于夢華，王雙亭，李英成，等.畸變差改正算法OpenCL并行加速研究[J].遙感信息，2019，34（3）：88-92.

【4】魯恒，李永樹，何敬，等.無人機低空遙感影像數(shù)據(jù)的獲取與處理[J].測繪工程，2011，20（01）：51-54.

【5】Kouichi Matsuda，Rodger Lea.WebGL編程指南[M].北京：電子工業(yè)出版社，2014.

【6】Aaftab Munshi，Dan Ginsburg，Dave Shreiner.OpenGL ES 2.0 Programming Guide[M].Hoboken：Addison-Wesley Professional，2008.

【7】Douglas Crockford .JavaScript：The Good Parts[M].Sunnyvale：Yahoo Press，2008.

【8】王星捷，衛(wèi)守林.WebGL技術(shù)的三維WebGIS平臺研究與應(yīng)用[J].遙感信息，2019，34（03）：134-138.

【9】付慶軍.利用Photoshop實現(xiàn)攝影作品的水彩畫效果[J].照相機，2009（02）：66-69.

【10】余亦豪，譚沖，周忠，等.虛實融合的實景視頻WebGIS系統(tǒng)[J].系統(tǒng)仿真學(xué)報，2018，30（07）：151-158.