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

羅霄 劉思言 特日根

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

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

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

1 引言

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

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

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

2 油畫(huà)濾鏡的原理和算法分析

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

①對(duì)每個(gè)像素RGB三個(gè)分量以不同的權(quán)值進(jì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，以圖像中每個(gè)像素為中心，按照式（2）統(tǒng)計(jì)其模板半徑內(nèi)的灰度直方圖Hist，其中i為像素的灰度值，card（x，y）表示灰度值為i的元素個(gè)數(shù)。

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

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

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

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

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

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

WebGL程序運(yùn)行流程如圖1所示，具體步驟如下：

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

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

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

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

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

3.2 油畫(huà)濾鏡的實(shí)現(xiàn)過(guò)程

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

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

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

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

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

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

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

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

4 實(shí)驗(yàn)與結(jié)果

4.1 軟硬件平臺(tái)

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

4.2 瀏覽器性能分析

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

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

4.3 與OpenCV對(duì)比實(shí)驗(yàn)

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

5 結(jié)語(yǔ)與展望

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

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

【參考文獻(xiàn)】

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

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

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

【4】魯恒，李永樹(shù)，何敬，等.無(wú)人機(jī)低空遙感影像數(shù)據(jù)的獲取與處理[J].測(cè)繪工程，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平臺(tái)研究與應(yīng)用[J].遙感信息，2019，34（03）：134-138.

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

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