SlideShare a Scribd company logo
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

More Related Content

Similar to CanvasGL, a GPU-accelerated WebKit

Introduction to Android by Demian Neidetcher
Introduction to Android by Demian NeidetcherIntroduction to Android by Demian Neidetcher
Introduction to Android by Demian Neidetcher
Matthew McCullough
 
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 2012philogb
 
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 Tokyonotolab
 
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
Changhwan Yi
 
JUI 2009 O3D Programming
JUI 2009 O3D ProgrammingJUI 2009 O3D Programming
JUI 2009 O3D Programminggyuque
 
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
SANGHEE SHIN
 
JavaME Deploy and Test - JMDF 2005
JavaME Deploy and Test - JMDF 2005JavaME Deploy and Test - JMDF 2005
JavaME Deploy and Test - JMDF 2005Edoardo Schepis
 
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
Jincheol Jo
 
ニコニコ動画でのHTML5
ニコニコ動画でのHTML5ニコニコ動画でのHTML5
ニコニコ動画でのHTML5
Sho KUSANO
 
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
 
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...
SANGHEE SHIN
 
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 CSS3Karambir Singh Nain
 
Comparing JVM Web Frameworks - Devoxx 2010
Comparing JVM Web Frameworks - Devoxx 2010Comparing JVM Web Frameworks - Devoxx 2010
Comparing JVM Web Frameworks - Devoxx 2010
Matt Raible
 
Google Android @ AlphaCSP's JavaEdge
Google Android @ AlphaCSP's JavaEdgeGoogle Android @ AlphaCSP's JavaEdge
Google Android @ AlphaCSP's JavaEdge
yuvalb
 
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
Fabian Jakobs
 
State of GeoServer 2.10
State of GeoServer 2.10State of GeoServer 2.10
State of GeoServer 2.10
Jody Garnett
 
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
Guangyao Liu
 
[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
gree_tech
 

Similar to 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
 

Recently uploaded

FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
DianaGray10
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Albert Hoitingh
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
DianaGray10
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
91mobiles
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
Paul Groth
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
Thijs Feryn
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Product School
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Tobias Schneck
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
Product School
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
DianaGray10
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
Product School
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 

Recently uploaded (20)

FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdfFIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
FIDO Alliance Osaka Seminar: The WebAuthn API and Discoverable Credentials.pdf
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
Connector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a buttonConnector Corner: Automate dynamic content and events by pushing a button
Connector Corner: Automate dynamic content and events by pushing a button
 
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
 
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdfSmart TV Buyer Insights Survey 2024 by 91mobiles.pdf
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
Accelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish CachingAccelerate your Kubernetes clusters with Varnish Caching
Accelerate your Kubernetes clusters with Varnish Caching
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...Designing Great Products: The Power of Design and Leadership by Chief Designe...
Designing Great Products: The Power of Design and Leadership by Chief Designe...
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 

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.

Editor's Notes

  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?