基于WebGL的Canvas元素2D繪制加速

謝賢博，聶 蕓，鄧紅艷，張 宇

（華北計(jì)算技術(shù)研究所 地理信息與圖形圖像技術(shù)研發(fā)中心，北京 郵編 100083）

基于WebGL的Canvas元素2D繪制加速

謝賢博，聶 蕓，鄧紅艷，張 宇

（華北計(jì)算技術(shù)研究所 地理信息與圖形圖像技術(shù)研發(fā)中心，北京 郵編 100083）

HTML5中的Canvas元素極大地豐富了網(wǎng)頁所能呈現(xiàn)的圖像信息。Canvas元素具有兩種繪圖模式：Canvas2D接口類似于畫布，用于渲染2D內(nèi)容，使用簡單，可由瀏覽器負(fù)責(zé)硬件加速；WebGL接口類似于OpenGL-ES，負(fù)責(zé)渲染3d場(chǎng)景，使用復(fù)雜，但可以直接使用硬件。當(dāng)繪制的2D基本圖元數(shù)量較多時(shí)，實(shí)時(shí)性要求高時(shí)，Canvas2D接口性能不足。本文將以WebGL為基礎(chǔ)，提出一種優(yōu)化思想，通過緩沖技術(shù)、常量屬性化技術(shù)、幀間緩存技術(shù)、DMA技術(shù)，加速不同2D基本圖元的繪制。本文對(duì)不同的2D圖元繪制方式性能進(jìn)行對(duì)比實(shí)驗(yàn)，證實(shí)以WebGL加速Canvas的2D繪制是可行并且有效的，并且給出一個(gè)實(shí)際應(yīng)用實(shí)例。

計(jì)算機(jī)圖形學(xué)；WebGL繪制；設(shè)計(jì)與實(shí)現(xiàn)；高性能渲染；HTML5

0 引言

隨著HTML5的普及，網(wǎng)頁可以承載更多以往桌面或移動(dòng)客戶端的內(nèi)容。Canvas是HTML5引入的新畫布元素，開發(fā)者可以用JavaScript腳本在該元素上繪制任意圖形。Canvas本身不具備畫圖屬性，而是通過獲取Canvas中的繪制上下文(Rendering Context)，利用繪制上下文實(shí)現(xiàn)繪制。目前有兩種繪制上下文：Canvas2D是用于繪制2D圖形的API，包括基本圖形繪制、文字繪制、圖形變換、圖片繪制和合成等；而WebGL是目前用于繪制3d圖形的API，擁有一套簡化的OpenGL-ES的功能，可以操作硬件，也可以使用封裝好的圖形庫簡化開發(fā)[1,2]。

目前瀏覽器上的主流的基于Canvas的2D引擎，盡管封裝各不相同，都是用Canvas2D進(jìn)行底層渲染；而主流3D引擎繪制2D畫面的性能并不比2D引擎好。當(dāng)需要繪制的物體過多，或者要求實(shí)時(shí)互動(dòng)性強(qiáng)時(shí)，主流方法的渲染性能不足以滿足。但是在桌面應(yīng)用方面，使用3D加速2D繪制是很常見的方法。本文將探討瀏覽器端使用WebGL加速2D繪制所遇到的和桌面端不同的問題，給出WebGL加速的具體原理和方法，通過實(shí)驗(yàn)驗(yàn)證WebGL繪制幾種2D圖形的性能，并分析具體的WebGL繪制方案。

1 加速原理

1.1 Canvas2D繪制原理

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

1.2 WebGL繪制原理

WebGL接口的基本功能由著色器（Shader）[3]、輸入、繪制指令、狀態(tài)指令四部分組成。

為了完成一次基本繪制，首先需要初始化著色器，包括編譯著色器，得到著色器內(nèi)各個(gè)輸入的地址等。著色器是將要運(yùn)行在GPU上的小程序，分為頂點(diǎn)著色器（Vertex Shader）和片段著色器（Fragment Shader），頂點(diǎn)著色器負(fù)責(zé)將輸入的頂點(diǎn)信息轉(zhuǎn)化為頂點(diǎn)在屏幕上的位置，并且可以計(jì)算一些頂點(diǎn)的屬性。光柵化操作依據(jù)繪制的圖元，將屏幕上的頂點(diǎn)數(shù)組填充成三角形等區(qū)域，同時(shí)可以考慮遮擋關(guān)系，并且自動(dòng)對(duì)三角形的頂點(diǎn)信息插值，將得到的像素則交給片段著色器。片段著色器依據(jù)得到像素的各個(gè)屬性，計(jì)算像素最終的顏色。

之后，需要輸入數(shù)據(jù)。著色器有兩種輸入，一種是頂點(diǎn)屬性（Vertex Attribute），一種是常量（uniform）。頂點(diǎn)屬性是依據(jù)需要繪制對(duì)象頂點(diǎn)數(shù)量而定的WebGL接口的基本功能由著色器（Shader）、輸入、繪制指令、狀態(tài)指令四部分組成。數(shù)組，一個(gè)頂點(diǎn)可以包含多個(gè)頂點(diǎn)屬性，常常包括位置、顏色、紋理信息等。常量是和頂點(diǎn)無關(guān)的量，常常包括環(huán)境光、投影矩陣、變換矩陣等。對(duì)于不同的物體，常量可能不同。

然后需要設(shè)置狀態(tài)。狀態(tài)包括是否啟用深度檢測(cè)、是否啟用混合、混合的類型等。

最后使用繪制指令，繪制指定數(shù)量的某種圖元。

1.3 WebGL繪制特點(diǎn)

WebGL[4]是一套可以使用硬件的繪制接口，但是和傳統(tǒng)的桌面OpenGL[5]相比，WebGL經(jīng)過多次簡化，刪減了專用的3D投影、光照等內(nèi)置功能，使其更容易被支持[6]。WebGL的優(yōu)勢(shì)是繪制靈活，著色器程序的性能高，可以繪制大量復(fù)雜的對(duì)象，可以使用更多的優(yōu)化策略，而劣勢(shì)是使用復(fù)雜，API調(diào)用開銷大。

其中API調(diào)用的開銷經(jīng)常被程序員忽視。調(diào)用WebGL的API時(shí)，比如clearColor(0,0,0,1)，其內(nèi)容要被瀏覽器驗(yàn)證有效，并最終將被確實(shí)寫入GPU，并且GPU確認(rèn)后才能返回，并執(zhí)行下一條指令。而Canvas2D的API則不同。與之前類似的fillStyle則直接是一個(gè)變量，甚至不需要進(jìn)入CPU層。而一些繪制控制API比如beginPath、moveTo等，則只用傳遞給CPU層瀏覽器的繪制引擎，就可以返回。只有切實(shí)繪制內(nèi)容的API調(diào)用會(huì)導(dǎo)致GPU訪問。這種缺點(diǎn)使得通過WebGL直接實(shí)現(xiàn)Canvas2D的API而加速并不可行，這種方法只適用于在WebGL中兼容Canvas2D的一些繪制方式。

因此WebGL提升性能的重要途徑之一就是減少API調(diào)用，可以使用緩沖技術(shù)和常量屬性化技術(shù)。

1.3.1 緩沖技術(shù)

緩沖技術(shù)（Batch）[7]是指在繪制時(shí)，利用腳本將不同的繪制對(duì)象的繪制信息合并在一個(gè)緩沖器中，最終調(diào)用一次WebGL繪制指令，一次性將緩沖器的內(nèi)容繪制出來。緩沖技術(shù)依賴于WebGL的繪制功能，必須同一類物體才能緩沖在一起繪制。常量屬性化技術(shù)可以增加緩沖技術(shù)的適用范圍。

1.3.2 常量屬性化技術(shù)

常量屬性化技術(shù)是指在設(shè)計(jì)著色器時(shí)，將uniform常量轉(zhuǎn)換為attribute頂點(diǎn)屬性，增加內(nèi)存開銷和頂點(diǎn)渲染器的運(yùn)算量以減少或消除常量變化的技術(shù)。比如將全局屬性的顏色，拷貝進(jìn)頂點(diǎn)屬性數(shù)組中，在著色器里使用頂點(diǎn)屬性來訪問全局顏色，這樣就可以將不同全局顏色下繪制的對(duì)象緩沖在一起繪制。

1.3.3 幀間緩存技術(shù)

幀間緩存技術(shù)是將一次性的緩沖變?yōu)榫彺鎯?chǔ)存起來，供多幀渲染的技術(shù)。當(dāng)每幀之間繪制的物體基本不變時(shí)，幀間緩存技術(shù)可以大大加快每幀進(jìn)行對(duì)象繪制信息緩沖的速度?？梢詫?duì)采用緩沖技術(shù)的一組物體進(jìn)行緩存，但是當(dāng)物體屬性發(fā)生變化，或者物體的數(shù)量發(fā)生改變時(shí)，維護(hù)緩存將很復(fù)雜。所以幀間緩存一般用于擁有復(fù)雜渲染單元的單個(gè)物體。

1.4 WebGL-DMA

WebGL-DMA（以下簡稱WDMA）是為了加速零碎對(duì)象WebGL繪制而設(shè)計(jì)的繪制接口，主要解決了采用幀間緩存技術(shù)時(shí)，物體與緩存的對(duì)接和緩存數(shù)據(jù)的維護(hù)問題。WDMA由WebGL緩沖、屬性緩存、物體緩沖和物體解釋器和繪制器組成。

WDMA參考特定的Shader，得到Shader中的所有頂點(diǎn)屬性輸入，參考默認(rèn)的更新頻率、頂點(diǎn)屬性位置，建立內(nèi)部的WebGL緩沖和屬性緩存。

WDMA緩沖分為WebGL緩沖和屬性緩存，其中屬性緩存中每個(gè)屬性數(shù)組為Float32Array類型，并且大小指定，將在每次繪制之間維持，即對(duì)應(yīng)一片內(nèi)存空間。當(dāng)實(shí)際物體數(shù)量將要超過當(dāng)前的容量時(shí)，屬性緩存會(huì)對(duì)每個(gè)數(shù)組申請(qǐng)一片更大的空間并復(fù)制；WebGL緩沖則存儲(chǔ)了每個(gè)屬性對(duì)應(yīng)的glBuffer。按照屬性更新頻率的不同，活躍屬性的glBuffer由WDMA在每幀繪制時(shí)載入屬性緩存中的全部數(shù)據(jù)，而不活躍的屬性則由物體解釋器負(fù)責(zé)更新WebGL緩沖和屬性緩存。不活躍屬性的屬性緩存僅僅是為了在擴(kuò)大容量時(shí)復(fù)原glBuffer。

WDMA物體解釋器是由特定的物體對(duì)象格式和Shader定義的，可以將某個(gè)類型物體信息更新至WDMA緩沖中的函數(shù)，也就是完成直接內(nèi)存操作。因?yàn)閃ebGL某些繪制使用的頂點(diǎn)屬性，并不需要被其他腳本使用，如果由物體自身的腳本計(jì)算，不僅計(jì)算量大，數(shù)據(jù)零碎而且有重復(fù)，每一幀還需要拷貝進(jìn)頂點(diǎn)數(shù)組。物體解釋器則可以直接把運(yùn)算結(jié)果存儲(chǔ)入WDMA緩沖中的指定位置，并且決定是否更新。同時(shí)，解釋器還負(fù)責(zé)更新物體緩沖，決定需要繪制的對(duì)象。

WDMA物體緩沖存儲(chǔ)了當(dāng)前幀WDMA緩沖中的物體映射狀態(tài)。每個(gè)對(duì)象在其第一次加入WDMA時(shí)，會(huì)獲得一個(gè)當(dāng)前空閑的索引號(hào)，并且一直維持到物體被標(biāo)記為銷毀，同時(shí)物體被存入相應(yīng)的物體數(shù)組，而索引號(hào)被添加到物體上。每一幀當(dāng)物體調(diào)用物體解釋器時(shí)，物體解釋器將索引號(hào)解釋成繪制命令存入物體緩沖。

WDMA繪制器則使用drawElements函數(shù)將物體緩沖中的內(nèi)容繪制出來。使用drawElements與drawArrays相比，可以降低維護(hù)屬性緩存的開銷，并且維持繪制順序穩(wěn)定性。

使用WDMA的限制是所有Uniform變量必須一致。為此在設(shè)計(jì)系統(tǒng)時(shí)，要使用常量屬性化技術(shù)，然后按照其他輸入（比如紋理）聚類，建立多個(gè)WDMA，繪制時(shí)依次設(shè)置Uniform變量繪制所有的WDMA。

圖1 一個(gè)渲染Sprite對(duì)象的WebGL-DMA結(jié)構(gòu)Fig.1 Structure of a sprite WebGL-DMA renderer

2 2D貼圖繪制加速

2D貼圖（sprite）繪制是指將圖片的矩形區(qū)域畫至畫面中的指定矩形區(qū)域，是2D游戲繪制引擎最重要的一個(gè)部分。在Canvas2D中，2D貼圖使用drawImage實(shí)現(xiàn)，其完整輸入包括圖片、源矩形、目標(biāo)矩形，并且應(yīng)用transform控制以實(shí)現(xiàn)平移和旋轉(zhuǎn)等效果。這種繪制模式比較符合OpenGL類的繪制，因此在瀏覽器優(yōu)化下，實(shí)際性能也相當(dāng)出色。在典型的Canvas2D渲染系統(tǒng)中，腳本將針對(duì)每一個(gè)貼圖，操作transform矩陣，然后執(zhí)行drawImage指令，這樣API調(diào)用的次數(shù)與貼圖數(shù)量成正比。這種渲染方式不適用于WebGL。

2.1 基于WebGL-DMA的2D貼圖繪制

為了解決WebGL繪制2D貼圖的瓶頸，本文依據(jù)2D貼圖的存儲(chǔ)特點(diǎn)，改變了2D貼圖的繪制方式。2D貼圖對(duì)象常以中心點(diǎn)、旋轉(zhuǎn)、縮放、紋理映射為主要屬性，根據(jù)具體應(yīng)用中貼圖的屬性的活躍程度，可以設(shè)計(jì)特定的Shader。文本使用的Shader的頂點(diǎn)屬性輸入為位置、偏移、紋理、顏色和旋轉(zhuǎn)，其中位置為該頂點(diǎn)所屬貼圖的中心位置，偏移為頂點(diǎn)相對(duì)于中心位置的偏移量，而旋轉(zhuǎn)是貼圖的旋轉(zhuǎn)角度。頂點(diǎn)著色器利用位置、偏移和旋轉(zhuǎn)計(jì)算出該頂點(diǎn)的實(shí)際位置，可以減少JavaScript端的計(jì)算量。

圖2 WebGL-DMA用于繪制貼圖的頂點(diǎn)ShaderFig.2 Vertex-shader of WebGL-DMA sprite renderer

在初始化時(shí)，使用Shader建立WebGL-DMA。貼圖對(duì)象儲(chǔ)存了中心坐標(biāo)、旋轉(zhuǎn)角度、X軸和Y軸縮放比率、紋理坐標(biāo)，在繪制時(shí)，貼圖被傳入WebGL-DMA，并且由貼圖繪制器將貼圖對(duì)象的屬性依次拷貝至WebGL-DMA緩存中，最后調(diào)用WebGL-DMA繪制。

2.2 實(shí)驗(yàn)

實(shí)驗(yàn)采用在1600*900的Canvas中，隨機(jī)位置繪制10000個(gè)32*32大小的貼圖，并應(yīng)用隨機(jī)旋轉(zhuǎn)。繪制分為初次繪制和重復(fù)繪制。采用幀間緩存的繪制方法初次繪制性能會(huì)差于重復(fù)繪制，但是考慮到實(shí)際應(yīng)用很少同時(shí)新增大量對(duì)象，而且第一幀可以采用載入方式過渡，所以重復(fù)繪制性能的重要性要大于初次繪制。

除了Canvas2D貼圖和WebGL-DMA的2D貼圖以外，實(shí)驗(yàn)還加入了使用WebGL模擬Canvas2D的貼圖接口的繪制方式，在這種方式中，每個(gè)貼圖都會(huì)調(diào)用一次drawArrays，并使用旋轉(zhuǎn)和縮放矩陣進(jìn)行變形。

瀏覽器方面，采用Chrome和FireFox，其中Chrome有激活Canvas2D硬件加速的選項(xiàng)。硬件方面，CPU為四核Intel(R) Q9450@2.66 GHz，顯卡為NVIDIA Quadro NVS 290，擁有8個(gè)通用流處理器。

表1 2D貼圖繪制實(shí)驗(yàn)結(jié)果Tab.1 Sprite-rendering test result

使用傳統(tǒng)軟件Canvas2D繪制10000貼圖時(shí)，繪制用時(shí)接近1秒，只能進(jìn)行靜態(tài)展示，無法互動(dòng)。其主要開銷為計(jì)算旋轉(zhuǎn)和紋理縮放。如果取消旋轉(zhuǎn)，并且將紋理大小與貼圖大小統(tǒng)一，即進(jìn)行像素對(duì)齊，可以大幅提升繪制性能，在瀏覽器啟用硬件加速的情況下，可以基本滿足互動(dòng)性?？紤]到除了繪制以外的開銷，如果要求60FPS的刷新率，實(shí)際應(yīng)用中往往只能做到渲染1000至2000個(gè)小型對(duì)象，并且無法應(yīng)用旋轉(zhuǎn)和縮放。

可以看到簡單封裝WebGL模擬Canvas2D的話，性能還不如普通的Canvas2D繪制。而使用WebGL-DMA的2D貼圖繪制方法可以將重繪用時(shí)縮小至10ms以內(nèi)，基本滿足了60FPS所需要的16ms幀間間隔，而維護(hù)對(duì)象的開銷要大于繪制對(duì)象的開銷。在實(shí)際應(yīng)用中，能做到以60FPS顯示4000個(gè)動(dòng)態(tài)對(duì)象。

3 2D線繪制加速

除了貼圖，直線也是2D繪制比較多的對(duì)象。一些2D應(yīng)用的模型以線為主，當(dāng)模型數(shù)量眾多時(shí)，畫線的性能決定了系統(tǒng)的性能。線有兩個(gè)重要屬性是顏色和寬度，在傳統(tǒng)繪制下，這兩個(gè)屬性存儲(chǔ)在Canvas2D的狀態(tài)機(jī)中。

3.1 基于緩沖的線繪制

使用WebGL可以把用戶繪制的線緩存起來，結(jié)束時(shí)調(diào)用一次繪制指令全部繪制。為了能一次繪制更多的線，本文將線的顏色屬性變?yōu)轫旤c(diǎn)屬性，與頂點(diǎn)的位置一起緩沖。緩沖頂點(diǎn)時(shí)，也應(yīng)用全局的坐標(biāo)變換。當(dāng)繪制結(jié)束，或者線寬發(fā)生變化時(shí)，將緩沖中所有的對(duì)象畫出。這種繪制方式對(duì)輸入沒有限制，與之后的方法相比，可以隨機(jī)輸入。

3.2 基于WebGL-DMA的線繪制

當(dāng)線作為對(duì)象的組成，對(duì)象在多次渲染間維持，WebGL-DMA就能起到作用。使用WebGL-DMA可以將對(duì)象與緩存關(guān)聯(lián)起來，降低維護(hù)緩存的開銷。

3.3 實(shí)驗(yàn)

實(shí)驗(yàn)采用的硬件環(huán)境與2.2相同，在1600*900的Canvas中隨機(jī)繪制10000條隨機(jī)顏色的線段，統(tǒng)計(jì)首次繪制和重復(fù)繪制的用時(shí)。

表2 2D線繪制實(shí)驗(yàn)結(jié)果Tab.2 Line-rendering test result

可以看出，采用緩沖加速的渲染性能和由瀏覽器帶來的硬件加速Canvas2D相似，而采用WebGL-DMA后，重繪性能還可以提升一倍。其中WebGL-DMA初繪時(shí)間較長是因?yàn)槭褂玫木€解釋器支持對(duì)繪制對(duì)象中使用多個(gè)線段情況的解釋。

4 WebGL與Canvas2D混合繪制

當(dāng)頁面需要呈現(xiàn)較豐富的內(nèi)容是，使用單一的Canvas難以滿足需求[8]。混合繪制是指在一個(gè)頁面上，同時(shí)使用多個(gè)Canvas進(jìn)行繪制，以達(dá)到加速的目的。WebGL沒有原生的文字繪制功能，需要使用Canvas2D繪制文字并轉(zhuǎn)換成紋理，無法完全代替Canvas2D，因此使用WebGL加速Canvas2D繪制時(shí)，可以采用兩層Canvas，將可以加速的交由WebGL繪制，文字和其他功能則還由Canvas2D繪制，最終將結(jié)果結(jié)合起來。以下介紹兩種繪制的方式，可以適用于特定的情況。

圖3 在屏混合繪制與離屏混合繪制Fig.3 On-screen layered rendering and off-screen layered rendering

4.1 在屏的混合繪制

在網(wǎng)頁頁面布局層垂直顯示多個(gè)Canvas，使用z-index確定遮擋關(guān)系，再利用絕對(duì)位置定位。這種混合繪制的特點(diǎn)是對(duì)瀏覽器和硬件的要求低，并且多個(gè)Canvas可以獨(dú)立設(shè)置渲染方式，兼容性較好。缺點(diǎn)是Canvas之間只能應(yīng)用DOM渲染的特效，并且由于固定位置分辨率難以調(diào)整。

4.2 離屏的混合繪制

離屏混合繪制則是指在網(wǎng)頁上只顯示一個(gè)主Canvas，其他的Canvas離屏渲染，并且轉(zhuǎn)換為紋理，最終繪制在主Canvas上，方便顯示控制。Canvas中無論是2D還是3D繪制使用紋理的接口，都可以使用另一個(gè)Canvas作為紋理對(duì)象。在主Canvas使用WebGL的情況下，離屏Canvas還可以使用WebGL的FrameBuffer虛擬。在一個(gè)比較好的離屏混合繪制方案中，主Canvas使用WebGL，離屏Canvas則使用WebGL繪制圖形、Canvas2D繪制文字。這樣在調(diào)整分辨率時(shí)，只用調(diào)整主Canvas的尺寸，而WebGL的特性使得繪制的結(jié)果自然填滿整個(gè)Canvas。并且在顯示各個(gè)離屏Canvas時(shí)，可以應(yīng)用各種特效。混合繪制的缺點(diǎn)則是需要額外的顯示離屏Canvas的過程，如果瀏覽器不支持Canvas2D的硬件加速，會(huì)使Canvas2D對(duì)象轉(zhuǎn)換為WebGL紋理的過程產(chǎn)生巨大開銷，因此兼容性較難控制。

4.3 實(shí)際應(yīng)用

本文研究并開發(fā)了一款網(wǎng)頁彈幕游戲引擎JavaSTaGe[9]。STG游戲中的指玩家需要操作一個(gè)物體或角色，發(fā)射子彈擊毀敵人，同時(shí)躲避敵人子彈的游戲。彈幕游戲是STG游戲的一類，通常是指平均子彈判定大小與玩家的判定大小相似或更大，場(chǎng)上子彈的數(shù)量眾多，姿態(tài)各異，玩家需要快速反應(yīng)并回避。由于對(duì)與畫面的連續(xù)性，操作的敏感性要求很高，彈幕游戲的畫面實(shí)際刷新率必須穩(wěn)定在60Hz，并能夠渲染上千的子彈。

JavaSTaGe引擎的設(shè)計(jì)原則是高度可編程。引擎本身并沒有渲染器，只提供紋理管理系統(tǒng)，可以由游戲腳本指定渲染器和渲染流程。JavaSTaGe自帶的游戲腳本使用了離屏混合繪制方式，將游戲背景、游戲場(chǎng)地、UI三層繪制在一個(gè)主Canvas中，因支持全屏模式，其中游戲背景為Canvas2D，只在變化時(shí)繪制一次；游戲場(chǎng)地為WebGL的Frame-Buffer，3D場(chǎng)地背景和2D角色與子彈等依次繪制在游戲場(chǎng)地中；UI為Canvas2D，由一個(gè)雜項(xiàng)渲染器繪制，主要負(fù)責(zé)繪制菜單、得分等文本信息。繪制2D與子彈的渲染器使用了WebGL-DMA技術(shù)，在保證所有物體的遮擋關(guān)系和繪制順序的前提下，將所有同一層使用同一個(gè)紋理的貼圖分配給一個(gè)WebGL-DMA對(duì)象渲染。在渲染流程復(fù)雜的同時(shí)，游戲開發(fā)者使用起來卻相對(duì)簡單，只要指定好對(duì)象所在的層和其render屬性所屬的渲染器及參數(shù)，將物體放入物體池中，引擎會(huì)自動(dòng)找到相應(yīng)的渲染流程并繪制到相應(yīng)的場(chǎng)景中。

圖4 在JavaSTaGe游戲引擎在瀏覽器中的實(shí)際運(yùn)行效果Fig.4 JavaSTaGe game demo on Chrome

圖3 為JavaSTaGe引擎的自帶游戲腳本中，開啟了3D背景和子彈對(duì)玩家的碰撞檢測(cè)，以60FPS渲染4000個(gè)隨機(jī)種類和顏色的子彈，所有的子彈都應(yīng)用了觸壁反彈并改變朝向的腳本。

除了繪制高度可編程，JavaSTaGe引擎還提供了一套完整的物理、音效、Replay、多人聯(lián)機(jī)、手柄接口，達(dá)到甚至超越了常見桌面版STG腳本引擎的特性和性能。

5 總結(jié)

本文通過對(duì)Canvas中Canvas2D接口與WebGL接口的分析，提出了使用WebGL來加速Canvas中的2D繪制的思路和原理，指出幾種能夠減少WebGL的API調(diào)用的方法，并進(jìn)一步設(shè)計(jì)了WebGL-DMA架構(gòu)，用以加速大量對(duì)象的繪制。通過對(duì)比試驗(yàn)，證實(shí)使用WebGL緩沖技術(shù)可以實(shí)現(xiàn)與硬件加速Canvas2D相似的性能，而對(duì)于在多幀之間重復(fù)繪制的對(duì)象，引入WebGL-DMA可以在此基礎(chǔ)上大幅增加重復(fù)繪制的性能。配合混合繪制技術(shù)，瀏覽器的Canvas應(yīng)用可以達(dá)到接近以前桌面版應(yīng)用的水準(zhǔn)。如何進(jìn)一步擴(kuò)大WebGL加速的應(yīng)用范圍，以及優(yōu)化數(shù)據(jù)管理，是未來Canvas高性能繪制的研究方向。

[1] 張玄, 黃蔚. 3D機(jī)房運(yùn)維可視化系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J]. 軟件, 2016, 37(7). ZHANG X, HUANG W. Design and Implementation of 3D Data Room Opration and Maintenance Visualization System [J]. Software, 2016, 37(7). (in Chinese)

[2] Chen B, Xu Z. A framework for browser-based Multiplayer Online Games using WebGL and WebSocket[C]. Multimedia Technology (ICMT), 2011 International Conference on. IEEE, 2011: 471-474.

[3] Rost R J. OpenGL(R) Shading Language[J]. Paperd Labs, 2004, 6(2): 201-207.

[4] Khronos Group. OpenGL ES 2. 0 for the Web[OL]. [2016]. https://www.khronos.org/webgl/

[5] 田金琴, 丁紅勝. 基于OpenGL程序設(shè)計(jì)的優(yōu)化探討[J]. 計(jì)算機(jī)系統(tǒng)應(yīng)用, 2006, 10: 65-68 TIAN J Q, DING H SH. The research of optimization based on OpenGL program design [J]. Computer Systems & Applications, 2006, 10: 65-68. (in Chinese)

[6] Liu Q, Chi X. Similarities and differences between OpenGL and OpenGL ES[J]. Journal of Liaoning Technical University, 2008.

[7] Krzeminski M. OpenGL Batch Rendering[OL]. [2014]. http:// www.gamedev.net/page/resources/_/technical/opengl/openglbatch-rendering-r3900.

[8] 龔昊, 張琦. 數(shù)據(jù)中心三維可視化管理軟件的設(shè)計(jì)與實(shí)現(xiàn)[J]. 軟件, 2012, 33(11): 68-71. GONG H, ZHANG Q. The Design and Implementation of the 3D Visualization of Data Center Management[J]. Software, 2012, 33(11): 68-71. (in Chinese).

[9] 謝賢博. JavaSTaGe README. md[OL]. [2016]. https:// github. com/ExboCooope/JavaSTaGe/blob/master/README. Md.

Accelerated 2D Rendering for Canvas Element based on WebGL

XIE Xian-bo, NIE Yun, DENG Hong-yan, ZHANG Yu
(North China Institute of Computer Technology, Beijing 100083, China)

HTML5 introduced canvas element which significantly enhanced the graphic expressiveness of web pages. Two rendering context is based on Canvas element. Canvas 2D context is used for rendering 2D content. WebGL context is a subset of OpenGL-ES aiming at rendering 3d content with scripts directly controlling hardware. Canvas 2D context is simple to use but cannot handle massive 2D objects in time. This paper discusses about the practice of accelerating 2D drawings using WebGL based on buffering, uniform-attributifying, caching and direct-memory-accessing techniques. Experiments and example prove the efficiency of WebGL 2D acceleration.

Computer graphics; WebGL rendering; Design and implementation; High-performance rendering; HTML5

TP391.41

A

10.3969/j.issn.1003-6970.2016.12.031

謝賢博(1992-)，男，研究生，計(jì)算機(jī)軟件與應(yīng)用；鄧紅艷，教授，空軍指揮學(xué)院，研究方向：模擬仿真專業(yè)；張宇，工程師，中國電子設(shè)備系統(tǒng)工程公司研究所，研究方向：指揮自動(dòng)化專業(yè)。

聶蕓，高級(jí)工程師，主要研究方向：圖形圖像處理技術(shù)。

本文著錄格式：謝賢博，聶蕓. 基于WebGL的Canvas元素2D繪制加速[J]. 軟件，2016，37（12）：146-152