How to Achieve 60 fps
HW Rendering in WebKit for Android
Xijun Chen
Agenda
• Overview of rendering in Android
WebKit
• Key process of rendering and
bottlenecks
• Break bottlenecks
• Details ...
Overview of rendering (flattened)
3
DOM Tree
(Render Object Tree)
Render Layer Tree
Layout Painting
Screen
Content
Web
Con...
rendering bottleneck
Reason
scroll & zoom
(viewport change)
animation
content change
Impact
Rasterization
Painting
Layout
4
Things we can do
• Reduce work
• Avoid duplicate work (cache)
• Avoid useless work (only work for visible area)
• Parallel...
Layers for cache
• Render Layer
• Avoid layout
• Separate the render objects to diff layer
• Graphics Layer (Layer Android...
Overview of rendering (composited)
7
DOM Tree
(Render Object Tree)
Render Layer Tree
Display Tree
(LayerAndroid Tree)
Layo...
HW Rendering Structure
8
Drawing Collection
Painting Collection
Queued Collection
SurfaceCollectionManager Surfaces
Surfac...
HW Rendering Structure
9
Front TileGrid
Back TileGrid
Low Res TileGrid
SurfaceBacking
(0, 0) (0, 1)
(1, 0) (1, 1)
(2, 0) (...
HW Rendering Structure
10
Front Texture
Back Texture
Tile Tile Texture
• TextureInfo
• Size
HW Rendering Process
11
Some code –
SurfaceCollectionManager::drawGL
12
Some code - SurfaceBacking::prepareGL
13
Some code - PaintTileOperation
14
TileGrid::prepareTile
Use painter to paint tile.
The painter is either Surface or
ImageT...
Some code - Tile
15
Some code – Interact with GL
16
TransferQueue::updateDirtyTiles
TileTexture::drawGL
Q & A
Thanks!
17
Upcoming SlideShare
Loading in …5
×

Hardware accelerated rendering in WebKit for android

1,661 views

Published on

Introduce the HW accelerated rendering in WebKit for Android. Focus on the platform graphics level.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,661
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
36
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Hardware accelerated rendering in WebKit for android

  1. 1. How to Achieve 60 fps HW Rendering in WebKit for Android Xijun Chen
  2. 2. Agenda • Overview of rendering in Android WebKit • Key process of rendering and bottlenecks • Break bottlenecks • Details of HW rendering 2
  3. 3. Overview of rendering (flattened) 3 DOM Tree (Render Object Tree) Render Layer Tree Layout Painting Screen Content Web Contents
  4. 4. rendering bottleneck Reason scroll & zoom (viewport change) animation content change Impact Rasterization Painting Layout 4
  5. 5. Things we can do • Reduce work • Avoid duplicate work (cache) • Avoid useless work (only work for visible area) • Parallelization • Bring complicate things to extra thread • Bring things to other graphics devices 5
  6. 6. Layers for cache • Render Layer • Avoid layout • Separate the render objects to diff layer • Graphics Layer (Layer Android) • Avoid painting • Merge render layers by graphic property • Tile Grids • Avoid rasterization • Merge and raster android layers to Surfaces with tile grids in it. • Composite and display Surface using GPU 6
  7. 7. Overview of rendering (composited) 7 DOM Tree (Render Object Tree) Render Layer Tree Display Tree (LayerAndroid Tree) Layout Painting Screen Tile Grid (GPU)
  8. 8. HW Rendering Structure 8 Drawing Collection Painting Collection Queued Collection SurfaceCollectionManager Surfaces SurfaceCollection Surface Backing Display Layers Surface
  9. 9. HW Rendering Structure 9 Front TileGrid Back TileGrid Low Res TileGrid SurfaceBacking (0, 0) (0, 1) (1, 0) (1, 1) (2, 0) (2, 1) TileGrid TileGrid ImageTexture
  10. 10. HW Rendering Structure 10 Front Texture Back Texture Tile Tile Texture • TextureInfo • Size
  11. 11. HW Rendering Process 11
  12. 12. Some code – SurfaceCollectionManager::drawGL 12
  13. 13. Some code - SurfaceBacking::prepareGL 13
  14. 14. Some code - PaintTileOperation 14 TileGrid::prepareTile Use painter to paint tile. The painter is either Surface or ImageTexture
  15. 15. Some code - Tile 15
  16. 16. Some code – Interact with GL 16 TransferQueue::updateDirtyTiles TileTexture::drawGL
  17. 17. Q & A Thanks! 17

×