基于WebGL的在線圖像瀏覽器的設(shè)計(jì)與實(shí)現(xiàn)

(華北電力大學(xué)控制與計(jì)算機(jī)工程學(xué)院 北京 102206)

一、引言

伴隨網(wǎng)絡(luò)程序的應(yīng)用頻率加強(qiáng)，之前慣用的2D圖像已經(jīng)不能達(dá)到應(yīng)用的要求，隨之產(chǎn)生了3D圖像交互式的網(wǎng)頁技術(shù)。然而網(wǎng)頁互動式3D顯示技術(shù)是有缺陷的，如Java Applet需求空間大，功能差，不能實(shí)現(xiàn)圖像硬件加速效果；插件Flash及微軟銀光的效果很好、很實(shí)用，但有一個(gè)需要插件實(shí)現(xiàn)，很難兼容平臺使用的問題。

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

二、圖像顯示原理

(一)Canvas2D加速原理

作為傳統(tǒng)的 2D 繪制接口，Canvas2D 提供了豐富的功能用以繪制 2D 對象。有一套以 begin Path開始，以 close Path 結(jié)束的，基于過程的繪制接口，也有如 draw Image 等實(shí)時(shí)繪制接口，并且維持一個(gè)2D 變換矩陣和一組繪制模式，應(yīng)用在當(dāng)前繪制的圖形上。其優(yōu)勢在于使用簡單，開發(fā)成本低，而缺點(diǎn)在于繪制方式固定，無法充分利用現(xiàn)代圖形硬件。它提供的繪制方式是以像素為基礎(chǔ)的，并且也支持瀏覽器進(jìn)行硬件加速。

(二)WebGL繪制原理

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

三、瀏覽系統(tǒng)分析

(一)WebGL技術(shù)與架構(gòu)

腳本，WebGL技術(shù)的核心，也就是著色器，用來定義圖形的每個(gè)像素點(diǎn)怎樣展現(xiàn)在顯示器上。WebGL的濾光鏡分為兩類：頂點(diǎn)和片段濾光鏡。頂點(diǎn)濾光鏡職責(zé)是確定位置坐標(biāo)；片段濾光鏡職責(zé)是規(guī)定此處的色彩[3]。頂點(diǎn)濾光鏡的基本任務(wù)是進(jìn)行轉(zhuǎn)換，也就是把點(diǎn)從三維模型轉(zhuǎn)換成二維屏幕上的坐標(biāo)。片段濾光鏡的基本任務(wù)是通知WebGL，模型的某個(gè)特定的點(diǎn)應(yīng)該要渲染哪種顏色。

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

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

四、圖像瀏覽設(shè)計(jì)

(一)特效處理庫應(yīng)用

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

(二)著色器功能實(shí)現(xiàn)

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