Chromimum Android渲染介紹

Horky發表於2017-03-14
Android

從概念上一個使用硬體加速(AC)時，頁面顯示的結構是Viewport -> Layer(s) -> Tile(s)，所謂的紋理就是Tile上顯示的內容。分塊最大的好處就是重繪的單元變小，更利於降低系統開銷。
(Tile翻成瓦片，還不如瓷磚呢 ^_^!)
Basic Concept

詳情可參考:開啟硬體加速時Web頁面繪製流程。
從WebKit核心到Chromium的cc模組，其對應關係如下:
cc_layers

Chormium通過impl-side painting實現了多執行緒的渲染(Design Document)。其目的是將WebKit核心的頁面內容繪製與實際顯示隔離開來，再將painting操作分為recording和rasterization。
其中一個重要的概念是Main Thread(side)和Impl Thread(side)。
impl-side-painting
Main Thread執行於Render執行緒，包括RenderWidget，LayerTreeHost等。Impl Thread執行於Compositor執行緒，包括LayerTreeHostImpl等。兩者通過一個Proxy進行執行緒的通訊。基本的渲染路徑就像是dot繪圖一樣，先錄製指令碼，再生成影像。它使用的物件是SkPicture, 它能做到類似Display List的功能，能夠記錄，再播放。這也是跨程式渲染的基礎（必然需要一個編碼及解碼的過程。）。
步驟如下:
* 在Main Thread裡，Chromium/WebKit的渲染到一個圖形後端(SkPicture)儲存起來, 由LayerTreeHost管理整個Layer Tree。 這個過程叫Record，並沒有真正繪製。
* 將這些資料提交到Impl Thread裡的LayerTreeHostImpl進行給制，這個過程是Upload,還有一個Commit。
* LayerTreeHostImpl再通過AwContents，使用Android的GL功能進行合成繪製，這個過程叫Rastering (光柵化，其實就是用點陣圖顯示的概念,對應於向量方式繪圖.)。

結構上，LayerTreeHost與LayerTreeHostImpl構成了Main Thread和Impl Thread的互動介面。

初始化時，流程從RenderViewImpl的建立開始，如下圖所示(ThreadProxy是Proxy的實現):
initialize

為了更好地安排Main Thread與Impl Thread的任務佇列，還會有一個Scheduler負責任務安排。 以下是類的關係，可以看到它們的生命週期管理:
basic_class_diagrams

Main Thread(Side)

LayerTreeHost/LayerTreeHostImpl只是組織和事務處理的類，實際繪製時是以OutputSurface為基礎的，可以理解為圖形後端。Android WebView和CC都是基於對OutputSurface的操作來完成後面的合成的。Chromium WebView使用同步合成器，即SynchronousCompositor，在UI執行緒上使用系統的GL能力繪製。後面有一串以SynchronousCompositor命名的類。

首先當LayerTreeHostImpl準備好後，會向LayerTreeHost請求OutputSurface, 最終由RenderWidget通過SynchronousCompositorFactory建立出一個OutputSurface,並交給LayerTreeHostImpl管理(scoped_ptr)。
content_side

Impl Thread(Side)

在Impl side, AwContents中合成器管理操作是由BrowserViewRenderer負責的，它將主要通過SynchronousCompositorImpl來向LayerTreeHostImpl和OutputSurface提供服務的。
Android WebView的設計中一個WebContents對應一個合成器，所以SynchronousCompositorOutputSurface通過routingid就可以確認所對應的SynchronousCompositorImpl。
Android上將Impl Thread實際是跑在UI執行緒上的，即child compositor執行在UI執行緒上。詳細的說明參考 Urbercomp in Android WebView，裡面有詳細的說明。

以下為主要類的關係:
impl_side
參考資料: Android 4.4 Browser渲染機制解析。

附上OutputSurface的初始化及繫結流程如下:
OutputSurface
當開始繪製時，為了支援DrawGL函式(下面有介紹)，還會建立一個OutputSurface。析構時依次析構，流程如下:
OutputSurface2

TileSet & Layer

對應於上面的TileSet和Layer,Chromium是由PictureLayerImpl來實現的。以下為其類圖，沒有深入研究，僅作參考:
更為系統的介紹看這裡Chromium Graphics: 再談Chromium WebView硬體渲染模式的演進。

參考

  1. Web頁面渲染及合成加速（二）
  2. Chromium Graphics: 再談Chromium WebView硬體渲染模式的演進
  3. 開啟硬體加速時Web頁面繪製流程
  4. Impl-Side Painting
  5. Android Graphics Architecture

相關文章