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

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

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

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

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

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

計算機圖形學；WebGL繪制；設計與實現(xiàn)；高性能渲染；HTML5

0 引言

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

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

1 加速原理

1.1 Canvas2D繪制原理

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

1.2 WebGL繪制原理

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

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

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

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

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

1.3 WebGL繪制特點

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

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

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

1.3.1 緩沖技術

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

1.3.2 常量屬性化技術

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

1.3.3 幀間緩存技術

幀間緩存技術是將一次性的緩沖變?yōu)榫彺鎯Υ嫫饋?，供多幀渲染的技術。當每幀之間繪制的物體基本不變時，幀間緩存技術可以大大加快每幀進行對象繪制信息緩沖的速度?？梢詫Σ捎镁彌_技術的一組物體進行緩存，但是當物體屬性發(fā)生變化，或者物體的數(shù)量發(fā)生改變時，維護緩存將很復雜。所以幀間緩存一般用于擁有復雜渲染單元的單個物體。

1.4 WebGL-DMA

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

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

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

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

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

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

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

圖1 一個渲染Sprite對象的WebGL-DMA結構Fig.1 Structure of a sprite WebGL-DMA renderer

2 2D貼圖繪制加速

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

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

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

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

在初始化時，使用Shader建立WebGL-DMA。貼圖對象儲存了中心坐標、旋轉角度、X軸和Y軸縮放比率、紋理坐標，在繪制時，貼圖被傳入WebGL-DMA，并且由貼圖繪制器將貼圖對象的屬性依次拷貝至WebGL-DMA緩存中，最后調用WebGL-DMA繪制。

2.2 實驗

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

除了Canvas2D貼圖和WebGL-DMA的2D貼圖以外，實驗還加入了使用WebGL模擬Canvas2D的貼圖接口的繪制方式，在這種方式中，每個貼圖都會調用一次drawArrays，并使用旋轉和縮放矩陣進行變形。

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

表1 2D貼圖繪制實驗結果Tab.1 Sprite-rendering test result

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

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

3 2D線繪制加速

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

3.1 基于緩沖的線繪制

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

3.2 基于WebGL-DMA的線繪制

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

3.3 實驗

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

表2 2D線繪制實驗結果Tab.2 Line-rendering test result

可以看出，采用緩沖加速的渲染性能和由瀏覽器帶來的硬件加速Canvas2D相似，而采用WebGL-DMA后，重繪性能還可以提升一倍。其中WebGL-DMA初繪時間較長是因為使用的線解釋器支持對繪制對象中使用多個線段情況的解釋。

4 WebGL與Canvas2D混合繪制

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

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

4.1 在屏的混合繪制

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

4.2 離屏的混合繪制

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

4.3 實際應用

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

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

圖4 在JavaSTaGe游戲引擎在瀏覽器中的實際運行效果Fig.4 JavaSTaGe game demo on Chrome

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

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

5 總結

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

[1] 張玄, 黃蔚. 3D機房運維可視化系統(tǒng)的設計與實現(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程序設計的優(yōu)化探討[J]. 計算機系統(tǒ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ù)據中心三維可視化管理軟件的設計與實現(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-)，男，研究生，計算機軟件與應用；鄧紅艷，教授，空軍指揮學院，研究方向：模擬仿真專業(yè)；張宇，工程師，中國電子設備系統(tǒng)工程公司研究所，研究方向：指揮自動化專業(yè)。

聶蕓，高級工程師，主要研究方向：圖形圖像處理技術。

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