基于WebGL的在線圖像瀏覽器的設計與實現

(華北電力大學控制與計算機工程學院 北京 102206)

一、引言

伴隨網絡程序的應用頻率加強，之前慣用的2D圖像已經不能達到應用的要求，隨之產生了3D圖像交互式的網頁技術。然而網頁互動式3D顯示技術是有缺陷的，如Java Applet需求空間大，功能差，不能實現圖像硬件加速效果；插件Flash及微軟銀光的效果很好、很實用，但有一個需要插件實現，很難兼容平臺使用的問題。

WebGL技術的應用及時地幫助處理這個難題，圖紙功能標準添加了JS腳本將附帶OpenGL ES2.0，使得JS腳本和OpenGL ES完美組合起來，從而實現一個硬件加速三維 html5的畫布渲染功能。在線圖像瀏覽器的設計與實現，主要是利用WebGL及其代碼實現一些類似于PS中的濾鏡的功能，應用于圖片的處理[1]。以前利用VC對圖片實現一些基本的處理：平移、縮放、百葉窗顯示等。這里，我們又拓寬了一條圖像處理的道路，利用WebGL，將JavaScript和OpenGL ES2.0結合在一起，實現對二維圖像的處理。

二、圖像顯示原理

(一)Canvas2D加速原理

作為傳統的 2D 繪制接口，Canvas2D 提供了豐富的功能用以繪制 2D 對象。有一套以 begin Path開始，以 close Path 結束的，基于過程的繪制接口，也有如 draw Image 等實時繪制接口，并且維持一個2D 變換矩陣和一組繪制模式，應用在當前繪制的圖形上。其優勢在于使用簡單，開發成本低，而缺點在于繪制方式固定，無法充分利用現代圖形硬件。它提供的繪制方式是以像素為基礎的，并且也支持瀏覽器進行硬件加速。

(二)WebGL繪制原理

WebGL是一款近幾年開發出的JavaScript渲染軟件包。它WebGL 接口的基本功能由著色器(Shader)輸入、繪制指令、狀態指令四部分組成。為了完成一次基本繪制，首先需要初始化著色器，包括編譯著色器，得到著色器內各個輸入的地址等。著色器是將要運行在GPU上的小程序，分為頂點著色器(Vertex Shader)和片段著色器(FragmentShader)，頂點著色器負責將輸入的頂點信息轉化為頂點在屏幕上的位置，并且可以計算一些頂點的屬性[2]。光柵化操作依據繪制的圖元，將屏幕上的頂點數組填充成三角形等區域，同時可以考慮遮擋關系，并且自動對三角形的頂點信息插值，將得到的像素則交給片段著色器。片段著色器依據得到像素的各個屬性，計算像素最終的顏色[3]。

三、瀏覽系統分析

(一)WebGL技術與架構

腳本，WebGL技術的核心，也就是著色器，用來定義圖形的每個像素點怎樣展現在顯示器上。WebGL的濾光鏡分為兩類：頂點和片段濾光鏡。頂點濾光鏡職責是確定位置坐標；片段濾光鏡職責是規定此處的色彩[3]。頂點濾光鏡的基本任務是進行轉換，也就是把點從三維模型轉換成二維屏幕上的坐標。片段濾光鏡的基本任務是通知WebGL，模型的某個特定的點應該要渲染哪種顏色。

(二)基于 WebGL-DMA的貼圖繪制

由于圖像選2D貼圖對象常以中心點、旋轉、縮放、紋理映射為主要屬性，根據具體應用中貼圖的屬性的活躍程度，可以設計特定的Shader[4]。文本使用的Shader的頂點屬性輸入為位置、偏移、紋理、顏色和旋轉，其中位置為該頂點所屬貼圖的中心位置，偏移為頂點相對于中心位置的偏移量，而旋轉是貼圖的旋轉角度。由Java Script定義一段頂點著色器程序的字符串，生成并且編譯成一段著色器程序傳遞給GPU。頂點著色器利用位置、偏移和旋轉計算出該頂點的實際位置，可以減少Java Script端的計算量。

四、圖像瀏覽設計

(一)特效處理庫應用

此系統應用多個特效處理庫，其中最主要的一個是Glfx.js，可以利用它在瀏覽器中實時地調整圖片。它通過作用于顯卡，以達到對圖像產生效果的目的。單單用JavaScript編輯是不可能實現實時調整圖像的效果的。對于使用glfx.js是有兩點附加說明需要注意的。第一，WebGL并非所有瀏覽器可以適用它，等到所有用戶可以使用它，需要經過一段相當長的發展期。第二，基于同源的政策，JavaScript只允許讀取某些符合特定標準的圖片，這些圖像必須滿足來自同一個域的腳本[5]。

(二)著色器功能實現

對于畫布對象來說，所有的著色器都是一種作用方法，它們將會修改當前畫布上呈現的圖像。在使用一個著色器之前，需要在當前的畫布上draw()繪制出紋理[6]。基于效率等因素，當每次著色器應用時，內部的圖像緩存不會每次都呈現在屏幕上。當完成了某個過濾器的調用，并且能夠看到圖像效果之后，必須在畫布上主動應用update()刷新頁面，以保證下一個著色器的正常使用。調整區域應用canvas.curves(red,green,blue);函數，這是一個功能十分強大的映射工具，它可以通過調用任何一個函數來實現對圖像上的顏色的轉換。這個函數其實是一個樣條函數，并且是由函數插值之間的一組二維點組成的[7][8]。曲線濾波器可以拾取一個或三個參數，并且分別應用這些映射到亮度或者RGB數值上。