The document discusses the integration of WebGL and a JavaScript library called Tesspathy for enhancing 2D vector graphics in browser-based animations and games. It highlights WebGL's limitations in handling vector graphics and emphasizes the library's ability to convert vector data for rendering on the fly, improving resolution independence. The presentation includes technical details and encourages developers to utilize these tools for better performance and visual quality.

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