beating canvas 2 d in its own territory webgl+tesspathy
TRANSCRIPT
Beating Canvas 2D in Its Own Territory
WebGL + Tesspathy
Guangyao Liutwitter:@brilliun, github:@brilliunGREE, Inc.
What We Do
JS Animation Engine <canvas>
2D Vector
Contents
e.g. SWF
Contents Provider
User’s Browser
JS Game/Animation
<canvas>
Canvas 2D WebGL
We used to use this only
Canvas 2D WebGL
● 2D● Vector data
● 3D (mainly)● Mesh data● Hardware
acceleration
Canvas 2D WebGL
● 2D● Vector data● Hardware
acceleration
● 3D (mainly)● Mesh data● Hardware
acceleration
Browser Vendor
HTML5 Game/Animation
<canvas>
Canvas 2D WebGL
Content2D Vector 2/3D Mesh
Canvas 2D WebGL
● 2D● Vector data● Hardware
acceleration
● 3D (mainly)● Mesh data● Hardware
accelerationStill Not Enough
Canvas 2D WebGL
● 2D● Vector data
● 3D (mainly)● Mesh data
Hardware acceleration
HTML5 Game/Animation
<canvas>
WebGL
Content2D Vector 2/3D Mesh
Only one problem
WebGL Just Can’t Handle Vector Graphics
TesspathyA 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
No need to pre-process your vector data
Remember the Demo?
Now let’s try it with WebGL + Tesspathy
<canvas>
Canvas 2D WebGL
Tessellation
Hardware Acceleration
Newly added this year
skia/src/gpu/*.cpp
<canvas>
Canvas 2D Tesspathy
Tessellation
Hardware Acceleration
skia/src/gpu/*.cpp
WebGL
Hardware Acceleration
your/self/code.js
