SlideShare una empresa de Scribd logo
1 de 12
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

Más contenido relacionado

Similar a CanvasGL, a GPU-accelerated WebKit

Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012
philogb
 
ngGoBuilder and collaborative development between San Francisco and Tokyo
ngGoBuilder and collaborative development between San Francisco and TokyongGoBuilder and collaborative development between San Francisco and Tokyo
ngGoBuilder and collaborative development between San Francisco and Tokyo
notolab
 
JUI 2009 O3D Programming
JUI 2009 O3D ProgrammingJUI 2009 O3D Programming
JUI 2009 O3D Programming
gyuque
 
JavaME Deploy and Test - JMDF 2005
JavaME Deploy and Test - JMDF 2005JavaME Deploy and Test - JMDF 2005
JavaME Deploy and Test - JMDF 2005
Edoardo Schepis
 
Boot to Gecko Introduction
Boot to Gecko IntroductionBoot to Gecko Introduction
Boot to Gecko Introduction
陳 鵬宇
 
LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+
LCA2013 :  Implementing threaded accelerated compositing in WebKitGtk+LCA2013 :  Implementing threaded accelerated compositing in WebKitGtk+
LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+
Gwang Yoon Hwang
 
GPGPU Programming @DroidconNL 2012 by Alten
GPGPU Programming @DroidconNL 2012 by AltenGPGPU Programming @DroidconNL 2012 by Alten
GPGPU Programming @DroidconNL 2012 by Alten
Arjan Somers
 
Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3
Karambir Singh Nain
 

Similar a CanvasGL, a GPU-accelerated WebKit (20)

Introduction to Android by Demian Neidetcher
Introduction to Android by Demian NeidetcherIntroduction to Android by Demian Neidetcher
Introduction to Android by Demian Neidetcher
 
Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012Leaving Flatland: Getting Started with WebGL- SXSW 2012
Leaving Flatland: Getting Started with WebGL- SXSW 2012
 
ngGoBuilder and collaborative development between San Francisco and Tokyo
ngGoBuilder and collaborative development between San Francisco and TokyongGoBuilder and collaborative development between San Francisco and Tokyo
ngGoBuilder and collaborative development between San Francisco and Tokyo
 
W3C HTML5 KIG-HTML5 Game Performance Issue
W3C HTML5 KIG-HTML5 Game Performance IssueW3C HTML5 KIG-HTML5 Game Performance Issue
W3C HTML5 KIG-HTML5 Game Performance Issue
 
JUI 2009 O3D Programming
JUI 2009 O3D ProgrammingJUI 2009 O3D Programming
JUI 2009 O3D Programming
 
mago3D, a web based BIM/GIS integration platform on top of open source
mago3D, a web based BIM/GIS integration platform on top of open sourcemago3D, a web based BIM/GIS integration platform on top of open source
mago3D, a web based BIM/GIS integration platform on top of open source
 
JavaME Deploy and Test - JMDF 2005
JavaME Deploy and Test - JMDF 2005JavaME Deploy and Test - JMDF 2005
JavaME Deploy and Test - JMDF 2005
 
Boot to Gecko Introduction
Boot to Gecko IntroductionBoot to Gecko Introduction
Boot to Gecko Introduction
 
Analyzing Web App Performance using Chromium DevTool
Analyzing Web App Performance using Chromium DevTool Analyzing Web App Performance using Chromium DevTool
Analyzing Web App Performance using Chromium DevTool
 
ニコニコ動画でのHTML5
ニコニコ動画でのHTML5ニコニコ動画でのHTML5
ニコニコ動画でのHTML5
 
LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+
LCA2013 :  Implementing threaded accelerated compositing in WebKitGtk+LCA2013 :  Implementing threaded accelerated compositing in WebKitGtk+
LCA2013 : Implementing threaded accelerated compositing in WebKitGtk+
 
GPGPU Programming @DroidconNL 2012 by Alten
GPGPU Programming @DroidconNL 2012 by AltenGPGPU Programming @DroidconNL 2012 by Alten
GPGPU Programming @DroidconNL 2012 by Alten
 
Let's integrate CAD/BIM/GIS on the same platform: A practical approach in rea...
Let's integrate CAD/BIM/GIS on the same platform: A practical approach in rea...Let's integrate CAD/BIM/GIS on the same platform: A practical approach in rea...
Let's integrate CAD/BIM/GIS on the same platform: A practical approach in rea...
 
Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3Building a Better Web with HTML5 and CSS3
Building a Better Web with HTML5 and CSS3
 
Comparing JVM Web Frameworks - Devoxx 2010
Comparing JVM Web Frameworks - Devoxx 2010Comparing JVM Web Frameworks - Devoxx 2010
Comparing JVM Web Frameworks - Devoxx 2010
 
Google Android @ AlphaCSP's JavaEdge
Google Android @ AlphaCSP's JavaEdgeGoogle Android @ AlphaCSP's JavaEdge
Google Android @ AlphaCSP's JavaEdge
 
Kick ass code editing and end to end JavaScript debugging
Kick ass code editing and end to end JavaScript debuggingKick ass code editing and end to end JavaScript debugging
Kick ass code editing and end to end JavaScript debugging
 
State of GeoServer 2.10
State of GeoServer 2.10State of GeoServer 2.10
State of GeoServer 2.10
 
You Don't Know WebGL at GREE Tech Talk #08
You Don't Know WebGL at GREE Tech Talk #08You Don't Know WebGL at GREE Tech Talk #08
You Don't Know WebGL at GREE Tech Talk #08
 
[GREE Tech Talk #08] You Don't Know WebGL
[GREE Tech Talk #08] You Don't Know WebGL[GREE Tech Talk #08] You Don't Know WebGL
[GREE Tech Talk #08] You Don't Know WebGL
 

Último

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Último (20)

Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, AdobeApidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
 

CanvasGL, a GPU-accelerated WebKit

  • 2. Full Acceleration • CSS3 Animation (Accelerated Composition) • HTML5 2D Canvas (Accelerated 2D Canvas)
  • 3. Maximizing GPU, Minimizing CPU 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 Super fast 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.

Notas del editor

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