Accelerated compositing in WebKit: Now and in the future (DEVIEW 2015)
•
1 like•1,003 views
By Gwang Yoon Hwang. Slides at http://blog.ryumiel.net/deview2015 GPU Accelerated Compositing이 웹엔진에 적용된지는 여러 해가 지났습니다. 그럼에도 불구하고, 이 기술은 완성된 것이 아니며, 개선되어야 할 부분이 많습니다. 이 세션에서 우리는 현재 구현된 Accelerated Compositing들을 간략히 살펴볼 것입니다. 그리고 현재 WebKitGTK+/EFL에서 사용되는 Coordinated Graphics의 현재 상황과 앞으로의 개발 방향을 이야기할 것입니다. 또한 GPU 가속이 적용되는 WebGL, HTML5 2D Canvas 그리고 HTML5 Video를 compositing할 때 성능향상을 위한 zero-copy platform layer compositing에 대하여 이야기하고자 합니다.
Recommended
More Related Content
What's hot
What's hot (16)
Viewers also liked
Viewers also liked (14)
Similar to Accelerated compositing in WebKit: Now and in the future (DEVIEW 2015)
Similar to Accelerated compositing in WebKit: Now and in the future (DEVIEW 2015) (20)
More from Igalia
More from Igalia (20)
Recently uploaded
Recently uploaded (20)
Accelerated compositing in WebKit: Now and in the future (DEVIEW 2015)
- 2. WHOAMI?WHOAMI? Gwang Yoon Hwang Hacker in Igalia, S. L. Working on WebKit/Chromium Project Focused on the rendering performance in embedded environment DEVIEW 2015
- 4. If we have a single backing store, we need to redraw almost everything for each frame If green and red have their own backing stores, then nothing needs "re-rasterizing" while this example animates. DEVIEW 2015
- 5. COMPOSITINGCOMPOSITING THEUSEOFMULTIPLEBACKINGSTORESTOCACHEANDTHEUSEOFMULTIPLEBACKINGSTORESTOCACHEAND GROUPCHUNKSOFTHERENDERTREE.GROUPCHUNKSOFTHERENDERTREE. From Shawn Singh's talk: https://docs.google.com/presentation/d/1dDE5u76ZBIKmsqkWi2apx3BqV8HOcNf4xxBdyNywZR8 DEVIEW 2015
- 6. STEPSFORRENDERINGSTEPSFORRENDERING Parsing: Nodes to DOM Tree Constructing RenderObject Tree to RenderLayer Tree DEVIEW 2015
- 7. PARSING:CREATESTHEDOMTREEFROMSOURCEPARSING:CREATESTHEDOMTREEFROMSOURCE From: Under the Creative Commons Attribution 3.0 Licenses https://developers.google.com/web/fundamentals/performance/critical-rendering-path/ DEVIEW 2015
- 8. CREATINGTHERENDERTREECREATINGTHERENDERTREE From: Under the Creative Commons Attribution 3.0 Licenses https://developers.google.com/web/fundamentals/performance/critical-rendering-path/ DEVIEW 2015
- 9. CREATINGTHEGRAPHICSLAYERTREEANDCOMPOSITINGITCREATINGTHEGRAPHICSLAYERTREEANDCOMPOSITINGIT DEVIEW 2015
- 10. ACCELERATECOMPOSITINGACCELERATECOMPOSITING Do not have to re-rasterize entire page for each animated frame Rasterization is expensive operation Composite page layers on the GPU can achieve far better e�ciency than the CPU GPU is specialized to handle large number of pixels Provide more e�cent/practical ways to support features Scrolling, 3D CSS, opacity, �lters, WebGL, hardware video decoding, etc. DEVIEW 2015
- 12. UNFORTUNATELY,WESTILLHAVEPROBLEMSUNFORTUNATELY,WESTILLHAVEPROBLEMS The main-thread is always busy (Parsing, Layout, JS ...) The main-thread can be blocked by VSync And we want awesome webpages which uses HTML5 features DEVIEW 2015
- 18. DEVIEW 2015
- 19. COMPOSITINGINTHEDEDICATEDTHREADCOMPOSITINGINTHEDEDICATEDTHREAD ORPROCESSORPROCESS The main-thread don't have to care about Vsync and compositing operations It shows more smooth CSS animations, zoom, and scale operations. DEVIEW 2015
- 21. WHATWEARE(GOINGTO)USINGNOWWHATWEARE(GOINGTO)USINGNOW COORDINATEDGRAPHICSWITHTHREADEDORPROCESSCOORDINATEDGRAPHICSWITHTHREADEDORPROCESS MODELMODEL It implement a dedicated compositing thread in WebProcess or UIProcess. Depends on OpenGL[ES] only: Easy to port to other enviroment DEVIEW 2015
- 22. DEVIEW 2015
- 27. SO,OFF-THE-MAIN-THREADCOMPOSITING:SO,OFF-THE-MAIN-THREADCOMPOSITING: Utilize multi-core CPUs and GPU Play CSS Animation o�-the-main-thread Reduce latencies of scrolling and scaling operations DEVIEW 2015
- 29. PROBLEMOFSUPPORTINGWEBGLPROBLEMOFSUPPORTINGWEBGL WebGL executes OpenGLES commands at the main-thread in WebProcess Synchronization! Anti-aliasing consumes a lot of memory bandwidth DEVIEW 2015
- 31. CROSSPROCESSSHAREABLEGLSURFACECROSSPROCESSSHAREABLEGLSURFACE Texture is not shareable across processes X Windows System Allocate memory in the X server via pixmap or o�screen window The rendered texture should be copied to a cross-process-sharable GL surface Needs cross process synchronization between updates No standards DEVIEW 2015
- 33. SYNCHRONIZATION:THREADEDCASESYNCHRONIZATION:THREADEDCASE Uses normal texture from GraphicsContext3D Uses double bu�er without coping textures Needs cross thread synchronization between updates EGLSyncObject (Unstable) DEVIEW 2015
- 34. PROBLEMOFSUPPORTINGHTML52DPROBLEMOFSUPPORTINGHTML52D CANVASCANVAS SAMEWITHWEBGL'SCASESAMEWITHWEBGL'SCASE GPU Accelerated 2D vector graphics library executes OpenGLES commands at the main-thread in WebProcess Synchronization! Anti-aliasing consumes a lot of memory bandwidth DEVIEW 2015
- 35. SOLUTIONSAREALSOALMOSTSAMEWITHWEBGL,EXCEPT:SOLUTIONSAREALSOALMOSTSAMEWITHWEBGL,EXCEPT: We cannot avoid texture copy operations to support accumulate rendering DEVIEW 2015
- 37. PROBLEMOFSUPPORTINGHTML52DVIDEOPROBLEMOFSUPPORTINGHTML52DVIDEO ALITTLEBITDIFFERENTWITHWEBGL'SCASEALITTLEBITDIFFERENTWITHWEBGL'SCASE GPU Accelerated video decoder uses GPU's API at the decoder threads in WebProcess Synchronization! DEVIEW 2015
- 38. SOLUTIONSAREALSOALMOSTSAMEWITHWEBGL,EXCEPT:SOLUTIONSAREALSOALMOSTSAMEWITHWEBGL,EXCEPT: Need to implement multimedia backend speci�c codes to avoid texture copies Need to implement a S/W fallback DEVIEW 2015
- 40. Overview: Putting It All Together DEVIEW 2015
- 42. CURRENTSTATUSOFCOORDINATEDGRAPHICSCURRENTSTATUSOFCOORDINATEDGRAPHICS THREADEDMODETHREADEDMODE You can build WebKitGTK+ with a --threaded-compositor �ag However, It doesn't support WebGL, Canvas and Video yet in the upstream Most of codes to support those features are ready, however we need to test it seriously before using it as a default DEVIEW 2015
- 43. CURRENTSTATUSOFCOORDINATEDGRAPHICSCURRENTSTATUSOFCOORDINATEDGRAPHICS PROCESSMODEPROCESSMODE WebKitEFL uses it as a default Fully functional DEVIEW 2015