hardware accelerated rendering in webkit for android
DESCRIPTION
Introduce the HW accelerated rendering in WebKit for Android. Focus on the platform graphics level.TRANSCRIPT
![Page 1: Hardware accelerated rendering in WebKit for android](https://reader035.vdocument.in/reader035/viewer/2022062617/54b731f24a795912438b45ab/html5/thumbnails/1.jpg)
How to Achieve 60 fpsHW Rendering in WebKit for Android
Xijun Chen
![Page 2: Hardware accelerated rendering in WebKit for android](https://reader035.vdocument.in/reader035/viewer/2022062617/54b731f24a795912438b45ab/html5/thumbnails/2.jpg)
2
Agenda
• Overview of rendering in Android WebKit
• Key process of rendering and bottlenecks
• Break bottlenecks• Details of HW rendering
![Page 3: Hardware accelerated rendering in WebKit for android](https://reader035.vdocument.in/reader035/viewer/2022062617/54b731f24a795912438b45ab/html5/thumbnails/3.jpg)
3
Overview of rendering (flattened)
DOM Tree(Render Object Tree)
Render Layer Tree
Layout Painting
Screen
RasterizationContent
Web Contents
![Page 4: Hardware accelerated rendering in WebKit for android](https://reader035.vdocument.in/reader035/viewer/2022062617/54b731f24a795912438b45ab/html5/thumbnails/4.jpg)
4
rendering bottleneck
Reasonscroll & zoom
(viewport change)
animation
content change
ImpactRasterization
Painting
Layout
![Page 5: Hardware accelerated rendering in WebKit for android](https://reader035.vdocument.in/reader035/viewer/2022062617/54b731f24a795912438b45ab/html5/thumbnails/5.jpg)
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
![Page 6: Hardware accelerated rendering in WebKit for android](https://reader035.vdocument.in/reader035/viewer/2022062617/54b731f24a795912438b45ab/html5/thumbnails/6.jpg)
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
![Page 7: Hardware accelerated rendering in WebKit for android](https://reader035.vdocument.in/reader035/viewer/2022062617/54b731f24a795912438b45ab/html5/thumbnails/7.jpg)
7
Overview of rendering (composited)
DOM Tree(Render Object Tree)
Render Layer TreeDisplay Tree
(LayerAndroid Tree)
Layout Painting
Screen
Rasterization (SW)
Raste
rizati
on (H
W)
Tile Grid
Display (HW)
(Ren
derin
g thr
ead)
(GPU)
![Page 8: Hardware accelerated rendering in WebKit for android](https://reader035.vdocument.in/reader035/viewer/2022062617/54b731f24a795912438b45ab/html5/thumbnails/8.jpg)
8
HW Rendering Structure
Drawing Collection
Painting Collection
Queued Collection
SurfaceCollectionManager Surfaces
SurfaceCollection
Surface Backing
Display Layers
Surface
![Page 9: Hardware accelerated rendering in WebKit for android](https://reader035.vdocument.in/reader035/viewer/2022062617/54b731f24a795912438b45ab/html5/thumbnails/9.jpg)
9
HW Rendering Structure
Front TileGrid
Back TileGrid
Low Res TileGrid
SurfaceBacking
(0, 0) (0, 1)
(1, 0) (1, 1)
(2, 0) (2, 1)
TileGrid
TileGrid
ImageTexture
![Page 10: Hardware accelerated rendering in WebKit for android](https://reader035.vdocument.in/reader035/viewer/2022062617/54b731f24a795912438b45ab/html5/thumbnails/10.jpg)
10
HW Rendering Structure
Front Texture
Back Texture
Tile Tile Texture
• TextureInfo• Size
![Page 11: Hardware accelerated rendering in WebKit for android](https://reader035.vdocument.in/reader035/viewer/2022062617/54b731f24a795912438b45ab/html5/thumbnails/11.jpg)
11
HW Rendering Process
![Page 12: Hardware accelerated rendering in WebKit for android](https://reader035.vdocument.in/reader035/viewer/2022062617/54b731f24a795912438b45ab/html5/thumbnails/12.jpg)
12
Some code – SurfaceCollectionManager::drawGL
![Page 13: Hardware accelerated rendering in WebKit for android](https://reader035.vdocument.in/reader035/viewer/2022062617/54b731f24a795912438b45ab/html5/thumbnails/13.jpg)
13
Some code - SurfaceBacking::prepareGL
![Page 14: Hardware accelerated rendering in WebKit for android](https://reader035.vdocument.in/reader035/viewer/2022062617/54b731f24a795912438b45ab/html5/thumbnails/14.jpg)
14
Some code - PaintTileOperation
TileGrid::prepareTile
Use painter to paint tile.The painter is either Surface or ImageTexture
![Page 15: Hardware accelerated rendering in WebKit for android](https://reader035.vdocument.in/reader035/viewer/2022062617/54b731f24a795912438b45ab/html5/thumbnails/15.jpg)
15
Some code - Tile
![Page 16: Hardware accelerated rendering in WebKit for android](https://reader035.vdocument.in/reader035/viewer/2022062617/54b731f24a795912438b45ab/html5/thumbnails/16.jpg)
16
Some code – Interact with GLTransferQueue::updateDirtyTiles
TileTexture::drawGL
![Page 17: Hardware accelerated rendering in WebKit for android](https://reader035.vdocument.in/reader035/viewer/2022062617/54b731f24a795912438b45ab/html5/thumbnails/17.jpg)
17
Q & AThanks!