Beating Canvas 2D in Its Own Territory WebGL + Tesspathy グリー株式会社 劉 光耀 (Guangyao Liu) ※Chrome Tech Talk Night #8でのLT資料です http://connpass.com/event/17312/

1. Beating Canvas 2D in Its Own
Territory
WebGL + Tesspathy
Guangyao Liu
twitter:@brilliun, github:@brilliun
GREE, Inc.

2. What We Do

3. JS Animation
Engine
<canvas>
2D
Vector
Contents
e.g. SWF
Contents
Provider
User’s
Browser

4. JS Game/Animation
<canvas>
Canvas 2D WebGL
We used to
use this only

5. Canvas 2D WebGL
● 2D
● Vector data
● 3D (mainly)
● Mesh data
● Hardware
acceleration

6. Canvas 2D WebGL
● 2D
● Vector data
● Hardware
acceleration
● 3D (mainly)
● Mesh data
● Hardware
acceleration
Browser Vendor

7. HTML5 Game/Animation
<canvas>
Canvas 2D WebGL
Content
2D Vector 2/3D Mesh

8. Canvas 2D WebGL
● 2D
● Vector data
● Hardware
acceleration
● 3D (mainly)
● Mesh data
● Hardware
acceleration
Still Not
Enough

9. Canvas 2D WebGL
● 2D
● Vector data
● 3D (mainly)
● Mesh data
Hardware acceleration

10. HTML5 Game/Animation
<canvas>
WebGL
Content
2D Vector 2/3D Mesh

11. Only one problem
WebGL Just Can’t Handle
Vector Graphics

12. 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

13. No need to pre-process
your vector data

14. Remember the Demo?
Now let’s try it with
WebGL + Tesspathy

15. <canvas>
Canvas 2D WebGL
Tessellation
Hardware
Acceleration
Newly added
this year
skia/src/gpu/*.cpp

16. <canvas>
Canvas 2D Tesspathy
Tessellation
Hardware
Acceleration
skia/src/gpu/*.cpp
WebGL
Hardware
Acceleration
your/self/code.js

17. Thank You
Tesspathy
github.com/gree/tesspathy