The fastest GPU-Accelerated WebKit
Full Acceleration

• CSS3 Animation (Accelerated Composition)

• HTML5 2D Canvas (Accelerated 2D Canvas)
Maximizing GPU,
 Minimizing CPU
Through a smart batching system
 that minimizes draw call batch.
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
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
What you experience


Super fast web experience

High quality mobile HTML5 games on your browser

Easy and fast contents development and maintenance
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
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
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
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
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         Poor




Minimizing 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.
CanvasGL, a GPU-accelerated WebKit

CanvasGL, a GPU-accelerated WebKit

  • 1.
  • 2.
    Full Acceleration • CSS3Animation (Accelerated Composition) • HTML5 2D Canvas (Accelerated 2D Canvas)
  • 3.
    Maximizing GPU, MinimizingCPU Through a smart batching system that minimizes draw call batch.
  • 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.
    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.
    What you experience Superfast web experience High quality mobile HTML5 games on your browser Easy and fast contents development and maintenance
  • 7.
    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
  • 8.
    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
  • 9.
    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
  • 10.
    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
  • 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 Poor Minimizing 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.

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.
  • #5 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.
  • #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 This structure is the problem.How do we solve this?