You Don't Know WebGL at GREE Tech Talk #08

You Don’t Know
WebGL
GREE, 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”?

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.

What About 2D Contents
● Lots of 2D contents on the web
● WebGL used for 2D in serious applications?

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 API
gl.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 R
One 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.

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?

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.

“Ah, I know, WebGL is
super fast”
(Everyone says so)

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.

Then why WebGL beats Canvas 2D?

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

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

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

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

Without WebGL

Vertex
Buffer
Draw
Call
Texture
Shader
Program
With WebGL

“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

Unleash the power of
WebGL in 2D world

Be careful, and
optimize your
particular app

WebGL !== Another
New “Magic”

Open the black box and
happy hacking!

You Don't Know WebGL at GREE Tech Talk #08

More Related Content

What's hot

Similar to You Don't Know WebGL at GREE Tech Talk #08

Recently uploaded

You Don't Know WebGL at GREE Tech Talk #08