Beating canvas 2 d in its own territory webgl+tesspathy

Beating Canvas 2D in Its Own Territory
WebGL + Tesspathy

グリー株式会社 劉 光耀 (Guangyao Liu)

※Chrome Tech Talk Night #8でのLT資料です
http://connpass.com/event/17312/

Transcript

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