Introducing canvas gl (company100)
- 1. The fastest GPU-accelerated WebKit
- 2. CanvasGLis a GPU-accelerated WebKit that fully accelerates: CSS3 Animation HTML5 2D Canvas (Accelerated Composition) (Accelerated 2D Canvas)
- 3. (1) Accelerated Composition: • Reduces unnecessary works It does not repaint the unchanged layers. It composites layers with the GPU. • Uses Texture Mapper Method It removes complicated abstraction layers. It uses OpenGL ES 2.0 directly. •3 ~ 10 times faster than Android default Browser on CSS Animations
- 4. (2) Accelerated 2D Canvas: • Smart Batching System It maximizes the GPU and minimizes the CPU. It minimizes draw call batch. • Uses Texture Atlas to remove state changes • Fully accelerates HTML5 2D Canvas Shadow Composite operations Vector graphics APIs •Dramatically reduces CPU overhaed
- 5. What CanvasGLdoes JavaScript (Canvas) CanvasGL OpenGL ES CPU GPU Draw Call Draw Call Draw Call Computing Draw Call Draw Call Flush Context Draw Call
- 6. What others do (Skia-GPU, Google chrome) JavaScript (Canvas) OpenGL ES CPU GPU Computing Draw Call Draw Call Context Computing Draw Call Draw Call Context Computing Draw Call Draw Call Context Computing Flush Draw Call Draw Call Context Computing Draw Call Draw Call Context
- 7. SKIA-GPU: • 2D Graphics Back-end for Chrome Android • Problems calls glDrawSomethings too many times changes gl states too many times switches FBO too many times vector graphics APIs and shadows are really slow •Increases dramatically CPU overhead
- 8. Maximizes GPU usage CanvasGL QuartzGL* Direct2D** SKIA Draw Call At Once (Company 100) (Apple) (Microsoft) (Google) Bitmap Sprite Good Good Good Good Convex Path Good Good Poor Poor Concave Path Good Poor Poor Poor Bitmap Sprite + Path Good Good Good Poor Path + Different Brush Type Average Poor Poor Poor Path + Different Shadow Good Poor Poor Poor Text + Different Draw Call Good Poor Poor Poor Minimizes CPU usage CanvasGL QuartzGL Direct2D SKIA CPU Tessellation No No Yes Yes GL State Optimization Good Average Average Poor * ** QuartzGL and Direct2D are proprietary software without source codes. The results are approximations based on experiments and articles.
- 9. Liquid Particles 22 8 2 5 1 0 5 10 15 20 25 fps CanvasGL (Galaxy S2) Default (Galaxy Nexus) Chrome beta (Galaxy Nexus) iPhone 4S IE9 (Lumia 800) * Tested on Feb 22, 2012
- 10. FishIE Tank 37 22 25 53 52 0 20 40 60 fps CanvasGL (Galaxy S2) Default (Galaxy Nexus) Chrome beta (Galaxy Nexus) iPhone 4S IE9 (Lumia 800) * Tested on Feb 22, 2012
- 11. Asteroids 13 3 3 9 7 0 5 10 15 fps CanvasGL (Galaxy S2) Default (Galaxy Nexus) Chrome beta (Galaxy Nexus) iPhone 4S IE9 (Lumia 800) * Tested on Feb 22, 2012
- 12. Canvas Test 27 22 7 31 19 0 10 20 30 40 fps CanvasGL (Galaxy S2) Default (Galaxy Nexus) Chrome beta (Galaxy Nexus) iPhone 4S IE9 (Lumia 800) * Tested on Feb 22, 2012
- 13. For more information • Developers blog http://dev.dorothybrowser.com/ • Company 100 http://www.company100.net/
Editor's Notes
- #2: Good morning.I’m Gwangyoon from Company 100.Today we’re going to see CanvasGL,A true GPU-Accelerated WebKit for Android.
- #3: We have fully accelerated the GPU in two areas: HTML5 2D Canvas and CSS3 animation. We mean FULLY.
- #6: Then if we have a thousand draw calls, the CPU cost will be a Thousand times higher. And this makes the GPU acceleration to be CPU bounded.This makes the GPU Accelerated 2D Canvas extremely slow.
- #7: Then if we have a thousand draw calls, the CPU cost will be a Thousand times higher. And this makes the GPU acceleration to be CPU bounded.This makes the GPU Accelerated 2D Canvas extremely slow.