用GPU讓HTML5內容在嵌入式平臺有高效能之表現
HTML5是近兩年在網路業界非常熱門的話題，有許多人因它的跨平臺與強大的圖形功能支援而看好他的未來性，也有不少人認為HTML5未必能確實解決目前WWW網頁規格不一的相容性問題。目前已有許多文章或書籍介紹HTML5技術規格，但在HTML5的處理與繪製方式的說明文件較少。本文著重在應用Embedded GPU(嵌入式繪圖處理器)加速HTML5內容繪製此議題之上，期望可以讓讀者對於HTML5內容之繪製流程以及那些部分可以透過GPU加速有初步的瞭解。

嵌入式繪圖處理器發展現況
晶片設計與製造技術的不停演進以及市場的高度競爭，讓高階嵌入式裝置產品的規格在不到一年的時間，成為中階甚至是低階產品的主流規格。這情形在智慧型手機的市場更為明顯。主要的低階智慧型手機晶片提供商已經喊出明年要推出針對千元人民幣手機的四核心解決方案，而市調機構Gartner也認為明年有可能出現運作時脈在1GHz左右針對50美元手機的解決方案。

不論是高階或低階的智慧型手機晶片中，除了CPU之外，嵌入式繪圖處理器(embedded GPU)已經成為必要的配備。目前嵌入式繪圖處理器的主流規格以支援OpenGL ES 2.0為主。OpenGL ES 2.0為可程式化繪圖管線架構(Programmable Pipeline)，支援Vertex Shader與Pixel Shader兩個可程式化的繪圖處理階段。Vertex Shader依據使用者提供的Vertex Shader程式碼，負責計算每個頂點(vertex)之座標轉換與其他的輔助運算資訊；Pixel shader依據使用者提供的Pixel Shader程式碼，負責計算每個像素點(pixel)之顏色值。在今年的SIGGRAPH圖學研討會中，負責制定OpenGL ES、OpenMax、OpenCL等規格的Khronos Group組織發表了新的OpenGL ES 3.0規格。不同於微軟DirectX的演進歷程，新3.0版的OpenGL ES並未支援Geometry Shader，也因此有人認為此版應該稱之為2.5版。

不過，除了完整規範貼圖壓縮(Texture compression)標準之外，OpenGL ES 3.0增加了許多可以有效率繪製複雜3D場景的功能，如：Multiple Instancing、Multiple Render Target (MRT)、Transformation Feedback、Occlusion Query等，且在shader中可運用的資源更多。OpenGL ES 3.0所新增的功能都是在PC環境非常成熟且幾乎每個遊戲引擎都已經支持的功能，因此可以預料，當作業環境開始支援OpenGL ES 3.0時，遊戲引擎多能同步支援OpenGL ES 3.0。目前主要的Embedded GPU提供商，如:Imagination、DMP、ARM等，都已經宣稱可以支援OpenGL ES 3.0。比較特別的是DMP這家公司，其GPU方案(代號SMAPH-S)由低階到高階的型號都能支援OpenGL ES 3.0，讓其客戶在產品設計時能有更多的選擇。


▲ 圖1 OpenGL ES 3.0與其他OpenGL版本之關係(資料來源: Khronos group)。


在3D繪圖處理過程中，多數的情形都是在處理各別獨立的vertex與pixel，如:Vertex Shader，因此Embedded GPU的架構中大幅應用了平行處理的方式來提高GPU的處理流量。再加上GPU內部有混色(Blending)與貼圖硬體，因此，GPU比CPU更適合用來加速與圖形有關的處理動作。我們將於最後一節介紹如何利用Embedded GPU加速HTML5網頁繪製。

HTML5技術規格概述與發展現況
HTML5是新一代網頁與Web Application技術的統稱，其規格並非W3C官方所一手主導，而是先由Apple、Opera等業界所組成的WHATWG (Web Hypertext Application Technology Working Group) 所制定，後來再整入W3C體系中。與過去的HTML規格相比，HTML5的特點之一，就是不需要透過Flash等外掛程式(plug-in)，能夠直接在瀏灠器或是HTML5相容的執行平臺上，呈現整合2D/3D與影音的即時互動rich media效果。近兩年來越來越多的裝置、網路服務或內容廠商開始投入HTML5技術的開發或是改使用HTML5技術發展其內容。例如: Amazon在2011/8推出以 HTML5 內容為主的雲端電子書平臺；Financial Times 在2011年將其 iOS App版本的閱讀程式全部改成HTML5 Web App版本，並在10個月內吸引到 2百萬的讀者使用；經濟學人也在 2012 年初捨棄 native App改採 HTML5 Web App；LG 和 Philips / TP Vision 組成 Smart TV 聯盟，鼓勵開發者以 HTML5 為基礎開發跨平臺的獨立應用程式；Google力推其 Chrome 為 Web Game Console等。可以預見的，HTML5 Web App的應用將會越來越廣泛。

不過最新的發展是WHATWG與W3C再度分家，WHATWG將專注在維護與更新HTML Living Standard (持續更新版)，而W3C則是會負責把HTML5標準給制定下來 (標準版)。此一分家對HTML5後續之發展為何，值得整個業界關注。本文則對HTML5有個比較寬鬆的定義，包括由Khronos group所制定的Web 3D graphics介面等，若可以用來開發Web Application且為主要的瀏覽器所支援(如:Webkit)，我們在此都統稱它是HTML5技術。



Web網頁處理流程介紹
Web網頁通常透過瀏覽器解析後呈現給消費者。瀏覽器的核心是一個Layout引擎，負責HTML文件格式的計算規劃與顯示。Apple Safari和Google Chrome，使用的是開放原始碼套件 - WebKit。WebKit也被廣泛的應用在其他瀏覽器上，如:海豚瀏覽器、Konqueror、Maxthon等等。WebKit的結構相當的有組織性，如下圖所示的架構圖:


▲ 圖2 WebKit架構圖（來源：專案製作）。


Webkit的主要功能是要將HTML文件繪製出來，而其工作流程如下圖：


▲ 圖3 WebKit工作流程圖（來源：專案製作）。


首先會將位於URL位置的文件下載，分析其語法後建立DOM Tree (Document Object Model –HTML文件中的標籤為可被操作物件的結構)，並依據CSS定義計算網頁的呈現結構(Layout) ，再產生Render Tree。此Render Tree是一個繪製網頁的場景結構，跟DOM tree結構類似。接下來的Painting流程會呼叫物件定義的繪製函式將物件繪製出來。全部物件都繪製完畢後，將這些結果疊加合成為要顯示的影像，再將之顯示於螢幕上。

Webkit中之關鍵繪製流程，為一連串的樹狀結構之轉換，如下圖所示：


▲ 圖4 WebKit繪製結構概念流程圖（來源：專案製作）。


首先，在DOM Tree中，只有會顯示在螢幕上的物件才會轉換成Render物件，而這些Render物件都會有自己繪製的函式，讓繪製場景的引擎呼叫。Render物件最後繪製完成後的結果，會被疊加合成成一張最後顯示的影像。Layer的作用是為了減少繪製的結構，如果物件是沒有順序關係或是靜止的，便可以共用同一層Render Layer。Graphics Layer是一個對應到平台實作的抽象結構，不同平台會有不同的實作層。最後，Webkit中的Compositor會將這些Graphics Layer的影像疊加合成最後顯示在螢幕上。

應用嵌入式繪圖處理器加速HTML5網頁繪製
HTML5內容繪製流程中最重要的模組是Paint與Composition。Paint模組負責繪製物件，除了整合GPU硬體來加速繪製，並可應用像是Decouple CPU & GPU和利用Texture Atlas來減少貼圖的切換等方式提昇GPU繪製效率。Composition的是將所有的東西合成疊合，也是可以利用GPU硬體來加速繪製，並可以進階將Layer切成許多小的Tile，這樣更新時可以只更新有變動的部分，可以大幅的減少記憶體的傳輸和運算，增進效能。

下圖是Webkit Rendering的流程架構圖，大致上分為三層來說明，WebCore、Glue Layer和Graphics Backend。這裡可以看出Webkit對於平台移植有一個很好的設計。最上面這部份是屬於WebCore的Layout Engine的實作層，中間則是連接這兩層的Glue Layer。最下面是平台相關的圖形功能實作層，也就是能使用GPU硬體加速的地方。


▲ 圖5 WebKit繪製模組架構圖（來源：專案製作）。


這裡有兩個重要的模組，一個是2D Draw模組，另一個是Platform Compositor模組。圖形功能實作層最好的方案就是使用GPU來加速繪製，效能可以大大的增加。根據我們拆解Webkit的經驗，雖然Glue Layer乾淨的將平台相關的實作切分開來，但是仍是相當複雜，尤其是要新增不同的實作模組時，Glue Layer也必須要有一番的修改，而且這部分對於執行效能也是相當關鍵的。因為這一層相當於管控底下的GPU硬體資源，當有很多的模組都會使用到GPU時，管控的效率就會變得很重要。