CanvasGL, a GPU-accelerated WebKit

1,872 views

Published on

Experience the Best of HTML5 with CanvasGL
* Accelerated Composition & Accelerated 2D Canvas
* Maximizing GPU Usage & Minimizing CPU Usage
* 87% to 1200% Overall Performance Improvement

CanvasGL guarantees a pleasant HTML5 experience on the mobile platform, with its GPU acceleration.

Published in: Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,872
On SlideShare
0
From Embeds
0
Number of Embeds
350
Actions
Shares
0
Downloads
16
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Good morning.I’m Gwangyoon from Company 100.Today we’re going to see CanvasGL,A true GPU-Accelerated WebKit for Android.
  • We have fully accelerated the GPU in two areas: HTML5 2D Canvas and CSS3 animation. We mean FULLY.
  • 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.
  • 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.
  • This structure is the problem.How do we solve this?
  • CanvasGL, a GPU-accelerated WebKit

    1. 1. The fastest GPU-Accelerated WebKit
    2. 2. Full Acceleration• CSS3 Animation (Accelerated Composition)• HTML5 2D Canvas (Accelerated 2D Canvas)
    3. 3. Maximizing GPU, Minimizing CPUThrough a smart batching system that minimizes draw call batch.
    4. 4. What others do 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
    5. 5. What we do JavaScript (Canvas) CanvasGL OpenGL ES CPU GPU Draw Call Draw Call Draw Call Computing Draw Call Draw Call Flush Context Draw Call
    6. 6. What you experienceSuper fast web experienceHigh quality mobile HTML5 games on your browserEasy and fast contents development and maintenance
    7. 7. Liquid Particles 22 8 2 5 1 0 5 10 15 20 25 fpsCanvasGL (Galaxy S2) Default (Galaxy Nexus) Chrome beta (Galaxy Nexus)iPhone 4S IE9 (Lumia 800) * Tested on Feb 22, 2012
    8. 8. FishIE Tank 37 22 25 53 52 0 20 40 60 fpsCanvasGL (Galaxy S2) Default (Galaxy Nexus) Chrome beta (Galaxy Nexus)iPhone 4S IE9 (Lumia 800) * Tested on Feb 22, 2012
    9. 9. Asteroids 13 3 3 9 7 0 5 10 15 fpsCanvasGL (Galaxy S2) Default (Galaxy Nexus) Chrome beta (Galaxy Nexus)iPhone 4S IE9 (Lumia 800) * Tested on Feb 22, 2012
    10. 10. Canvas Test 27 22 7 31 19 0 10 20 30 40 fpsCanvasGL (Galaxy S2) Default (Galaxy Nexus) Chrome beta (Galaxy Nexus)iPhone 4S IE9 (Lumia 800) * Tested on Feb 22, 2012
    11. 11. Maximizing 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 PoorMinimizing 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.

    ×