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

Thank You

Tesspathygithub.com/gree/tesspathy