基于WebGL的遙感影像濾鏡模式設計與實現

羅霄 劉思言 特日根

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

【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.

【關鍵詞】WebGL;JavaScript;非真實感繪制;GPU;油畫;濾鏡

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

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

1 引言

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

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

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

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

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

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

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

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

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）

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

3 技術實現

3.1 WebGL繪圖的實現

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

①創建DOM作為容納WebGL的容器，并根據容器獲取WebGL的上下文。

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

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

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

⑤在創建著色器程序并綁定數據之后，調用WebGL繪制接口進行繪制操作。

3.2 油畫濾鏡的實現過程

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

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

①在標準WebGL坐標系下，計算影像一個像素所占的大小。

②提取影像中一個像素對應紋素的RGB值。

③根據定義的加權求和公式計算每個紋素的灰度值。

④設置紋素的模板半徑為r，同時，以紋素為中心點，以r為計算半徑，統計其直方圖。

⑤根據統計結果，以直方圖最大值對應RGB值作為紋素RGB值。

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

4 實驗與結果

4.1 軟硬件平臺

實驗相關硬件條件如表1所示。

4.2 瀏覽器性能分析

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

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

4.3 與OpenCV對比實驗

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

5 結語與展望

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

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

【參考文獻】

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

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

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

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

【5】Kouichi Matsuda，Rodger Lea.WebGL編程指南[M].北京：電子工業出版社，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】王星捷，衛守林.WebGL技術的三維WebGIS平臺研究與應用[J].遙感信息，2019，34（03）：134-138.

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

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