You Don’t Know WebGLGREE, Inc.MM Team

MM Team

Kuu Miyazaki@miyazaqui, github:@kuu

Jason Parrott+JasonParrott, github:@Moncader

Guangyao Liu@brilliun, github:@brilliun

Daijiro Wachi@watilde, github:@watilde

WebGL Misconceptions

● WebGL === 3D?

● WebGL === Super fast?

● WebGL === Another new “magic”?

WebGL Misconceptions

● WebGL === 3D?

● WebGL === Super fast?

● WebGL === Another new “magic”?

When Talking About WebGL

This work is a derivative of a photo by Paranoidray, used under CC BY-SA.It is licensed under CC BY-SA by GREE, Inc.

This work is a derivative of a photo by Mr mr ben, used under CC BY-SA.It is licensed under CC BY-SA by GREE, Inc.

What About 2D Contents

● Lots of 2D contents on the web

● WebGL used for 2D in serious applications?

Theatrical Suite

WebGL in Theatrical Suite

● WebGL used in real-world product

● For rendering 2D graphics

2D Graphics By WebGL

● Extremely challenging task

● Rarely implemented even in OpenGL

2D Graphics

Vector graphics Raster graphics

https://signalizenj.wordpress.com/2015/01/29/vector-vs-raster/

Canvas 2D API

The 2D graphics API works in <canvas>

elementctx.beginPath();ctx.moveTo(x1, y1);ctx.lineTo(x2, y2);ctx.quadraticCurveTo( x3, y3, x4, y4);ctx.stroke();ctx.fill();

ctx.drawImage( img, srcX, srcY, srcWidth, srcHeight, x, y, width, height);

Vector graphics Raster graphics

WebGL APIgl.drawArrays(mode, first, count);gl.drawElements(mode, count, type, offset);

mode: gl.POINTS gl.LINES gl.LINE_LOOP gl.LINE_STRIP gl.TRIANGLES gl.TRIANGLE_STRIP gl.TRIANGLE_FAN

Triangles

Lines

How to render 2D graphics by WebGL?

Raster Graphics

R ROne image(Rectangle)

Two triangles

Vector Graphics

?Sequence of

outlines

Why not convert vector to raster in advance?

Vector Graphics

● Resolution independant

● Small data size

● Existing assets

This work is a derivative of a photo by Darth Stabro, used under CC BY-SA.It is licensed under CC BY-SA by GREE, Inc.

How common libraries deal with vector

graphics?

CreateJS

Layered canvases

● Extra composition cost

Web Page

WebGL

Canvas 2D

Pixi.js

Drawing filled polygons using stencil buffer

● Extra rendering cost

http://www.cs.sun.ac.za/~lvzijl/courses/rw778/grafika/OpenGLtuts/Big/graphicsnotes014.html

three.js

Triangulation

● but with restrictions

http://mathworld.wolfram.com/Triangulation.html

How Theatrical deal with vector graphics?

Tesspathy

And it’s open source now!

github.com/gree/tesspathy

Vector in Theatrical

● We do triangulation

● With almost no restrictions

● Produce resolution independent curves

Now let’s watch the SWF again.

(with a special build of Theatrical)

“Isn’t it weird to render vector graphics in this

way?”

“Why not just use Canvas 2D?”

First,guess how Canvas 2D is

implemented in browser?

Canvas Path in Chrome

● Chrome(Skia) do triangulation too!

○ With a combination of other approaches

Second,we use WebGL for

better performance.

Let’s see the difference

“Ah, I know, WebGL is super fast”

(Everyone says so)

WebGL Misconceptions

● WebGL === 3D?

● WebGL === Super fast?

● WebGL === Another new “magic”?

WebGL Is Super Fast?

Hardware accelerationWebGL Super fast?

Hardware acceleration itself does NOT guarantee good

performance

Hardware Acceleration

Modern browsers have already been utilizing

hardware acceleration for several tasks.

chrome://gpu

Hardware Acceleration

Then why WebGL beats Canvas 2D?

chrome://tracing

WebGL Performance

● Performance boosts not ONLY because we

use WebGL

● It is the way how we use it that matters

WebGL Performance

● Draw calls

○ drawElements/drawArrays

● Texture updates

● Shader operations

○ especially Fragment Shader

WebGL Performance

● Otherwise, easy to get bad performance.

● Not to mention WebGL on mobile

○ weaker hardware

○ restricted GL features & extensions

WebGL Misconceptions

● WebGL === 3D?

● WebGL === Super fast?

● WebGL === Another new “magic”?

Extensible Web

“Avoid New Magic”

Magic In Browser

● A lot of “magic” going on in browser

○ Canvas 2D API

○ <video>

● Doing complex tasks silently in C++ w/o

letting web developers know how

WebGL is New Magic?

● WebGL is a new API

● WebGL brings plug-in free 3D into browser

● WebGL is complex

WebGL is New Magic?

var canvas2D = canvas.getContext(‘2d’); // Existing magic

var webgl = canvas.getContext(‘webgl’); // Aha! New magic!!!

No,WebGL is a good

practice for extensible web

Extensible Web

● New low-level capabilities should be exposed

to Javascript

● Existing high-level capabilities should be

explained in terms of Javascript

Extensible Web

● New low-level capabilities should be exposed

to Javascript

● Existing high-level capabilities should be

explained in terms of Javascript

Low-level Capabilities

With WebGL, we can

● Write and execute GLSL programs on GPU

● Trigger GL/Direct3D commands through

browser

WebGL exposes access to hardwares and GL/D3D bindings

Things restricted to native apps before

Extensible Web

● New low-level capabilities should be exposed

to Javascript

● Existing high-level capabilities should be

explained in terms of Javascript

Hardware acceleration can be instructed using

WebGL

High-level Capabilities

● Hardware acceleration used to be a black

box to web developers

● Relying on browser vendors to gift us with

performance improvement

Hardware Acceleration

Hardware Acceleration

Without WebGL

Hardware Acceleration

Hardware Acceleration

Vertex Buffer

Draw CallTexture Shader

Program

With WebGL

Hardware Acceleration

“truly hardware accelerating graphics on the

web means giving developers access to a

programmable 3D graphics pipeline with

WebGL”

-- Chrome blog

For those really care about rendering

performance in web

Don’t rely on browsers any more

Use WebGL to render your hardware

accelerating graphics

Conclusion

WebGL !== 3D

Unleash the power of WebGL in 2D world

WebGL !== Super fast

Be careful, and optimize your particular app

WebGL !== Another New “Magic”

Open the black box and happy hacking!

Thank you

Q&A