SlideShare uma empresa 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

Mais conteúdo relacionado

Semelhante 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
 

Semelhante 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

+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@
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 

Último (20)

Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
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
 
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
 
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...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
+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...
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
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
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Real Time Object Detection Using Open CV
Real Time Object Detection Using Open CVReal Time Object Detection Using Open CV
Real Time Object Detection Using Open CV
 
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
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 

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 do 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?