Slide 1
Slide 1 text
Beating Canvas 2D in Its Own
Territory
WebGL + Tesspathy
Guangyao Liu
twitter:@brilliun, github:@brilliun
GREE, Inc.
Slide 2
Slide 2 text
What We Do
Slide 3
Slide 3 text
JS Animation
Engine
2D
Vector
Contents
e.g. SWF
Contents
Provider
User’s
Browser
Slide 4
Slide 4 text
JS Game/Animation
Canvas 2D WebGL
We used to
use this only
Slide 5
Slide 5 text
Canvas 2D WebGL
● 2D
● Vector data
● 3D (mainly)
● Mesh data
● Hardware
acceleration
Slide 6
Slide 6 text
Canvas 2D WebGL
● 2D
● Vector data
● Hardware
acceleration
● 3D (mainly)
● Mesh data
● Hardware
acceleration
Browser Vendor
Slide 7
Slide 7 text
HTML5 Game/Animation
Canvas 2D WebGL
Content
2D Vector 2/3D Mesh
Slide 8
Slide 8 text
Canvas 2D WebGL
● 2D
● Vector data
● Hardware
acceleration
● 3D (mainly)
● Mesh data
● Hardware
acceleration
Still Not
Enough
Slide 9
Slide 9 text
Canvas 2D WebGL
● 2D
● Vector data
● 3D (mainly)
● Mesh data
Hardware acceleration
Slide 10
Slide 10 text
HTML5 Game/Animation
WebGL
Content
2D Vector 2/3D Mesh
Slide 11
Slide 11 text
Only one problem
WebGL Just Can’t Handle
Vector Graphics
Slide 12
Slide 12 text
Tesspathy
A JS library converting vector graphics for GL-
like APIs
● Convert on the fly
● Resolution-independent Curves
● Almost no assumption of input data
github.com/gree/tesspathy
Slide 13
Slide 13 text
No need to pre-process
your vector data
Slide 14
Slide 14 text
Remember the Demo?
Now let’s try it with
WebGL + Tesspathy
Slide 15
Slide 15 text
Canvas 2D WebGL
Tessellation
Hardware
Acceleration
Newly added
this year
skia/src/gpu/*.cpp
Slide 16
Slide 16 text
Canvas 2D Tesspathy
Tessellation
Hardware
Acceleration
skia/src/gpu/*.cpp
WebGL
Hardware
Acceleration
your/self/code.js
Slide 17
Slide 17 text
Thank You
Tesspathy
github.com/gree/tesspathy