Slide 1
Slide 1 text
You Don’t Know
WebGL
GREE, Inc.
MM Team
Slide 2
Slide 2 text
MM Team
Kuu Miyazaki
@miyazaqui, github:@kuu
Jason Parrott
+JasonParrott, github:@Moncader
Guangyao Liu
@brilliun, github:@brilliun
Daijiro Wachi
@watilde, github:@watilde
Slide 3
Slide 3 text
WebGL Misconceptions
● WebGL === 3D?
● WebGL === Super fast?
● WebGL === Another new “magic”?
Slide 4
Slide 4 text
WebGL Misconceptions
● WebGL === 3D?
● WebGL === Super fast?
● WebGL === Another new “magic”?
Slide 5
Slide 5 text
When Talking About WebGL
Slide 6
Slide 6 text
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.
Slide 7
Slide 7 text
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.
Slide 8
Slide 8 text
What About 2D Contents
● Lots of 2D contents on the web
● WebGL used for 2D in serious applications?
Slide 9
Slide 9 text
Theatrical Suite
Slide 10
Slide 10 text
WebGL in Theatrical Suite
● WebGL used in real-world product
● For rendering 2D graphics
Slide 11
Slide 11 text
2D Graphics By WebGL
● Extremely challenging task
● Rarely implemented even in OpenGL
Slide 12
Slide 12 text
2D Graphics
Vector graphics Raster graphics
https://signalizenj.wordpress.com/2015/01/29/vector-vs-raster/
Slide 13
Slide 13 text
Canvas 2D API
The 2D graphics API works in
element
ctx.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
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
How to render 2D
graphics by WebGL?
Slide 16
Slide 16 text
Raster Graphics
R R
One image
(Rectangle)
Two triangles
Slide 17
Slide 17 text
Vector Graphics
?
Sequence of
outlines
Slide 18
Slide 18 text
Why not convert vector
to raster in advance?
Slide 19
Slide 19 text
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.
Slide 20
Slide 20 text
How common libraries
deal with vector
graphics?
Slide 21
Slide 21 text
CreateJS
Layered canvases
● Extra composition cost
Web Page
WebGL
Canvas 2D
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
three.js
Triangulation
● but with restrictions
http://mathworld.wolfram.com/Triangulation.html
Slide 24
Slide 24 text
How Theatrical deal
with vector graphics?
Slide 25
Slide 25 text
Tesspathy
Slide 26
Slide 26 text
And it’s open source
now!
github.com/gree/tesspathy
Slide 27
Slide 27 text
Vector in Theatrical
● We do triangulation
● With almost no restrictions
● Produce resolution independent curves
Slide 28
Slide 28 text
Now let’s watch the
SWF again.
(with a special build of Theatrical)
Slide 29
Slide 29 text
“Isn’t it weird to render
vector graphics in this
way?”
Slide 30
Slide 30 text
“Why not just use
Canvas 2D?”
Slide 31
Slide 31 text
First,
guess how Canvas 2D is
implemented in
browser?
Slide 32
Slide 32 text
Canvas Path in Chrome
● Chrome(Skia) do triangulation too!
○ With a combination of other approaches
Slide 33
Slide 33 text
Second,
we use WebGL for
better performance.
Slide 34
Slide 34 text
Let’s see the difference
Slide 35
Slide 35 text
“Ah, I know, WebGL is
super fast”
(Everyone says so)
Slide 36
Slide 36 text
WebGL Misconceptions
● WebGL === 3D?
● WebGL === Super fast?
● WebGL === Another new “magic”?
Slide 37
Slide 37 text
WebGL Is Super Fast?
Hardware
acceleration
WebGL Super fast?
Slide 38
Slide 38 text
Hardware acceleration
itself does NOT
guarantee good
performance
Slide 39
Slide 39 text
Hardware Acceleration
Modern browsers have already been utilizing
hardware acceleration for several tasks.
Slide 40
Slide 40 text
chrome://gpu
Slide 41
Slide 41 text
Hardware Acceleration
Then why WebGL beats Canvas 2D?
Slide 42
Slide 42 text
chrome://tracing
Slide 43
Slide 43 text
WebGL Performance
● Performance boosts not ONLY because we
use WebGL
● It is the way how we use it that matters
Slide 44
Slide 44 text
WebGL Performance
● Draw calls
○ drawElements/drawArrays
● Texture updates
● Shader operations
○ especially Fragment Shader
Slide 45
Slide 45 text
WebGL Performance
● Otherwise, easy to get bad performance.
● Not to mention WebGL on mobile
○ weaker hardware
○ restricted GL features & extensions
Slide 46
Slide 46 text
WebGL Misconceptions
● WebGL === 3D?
● WebGL === Super fast?
● WebGL === Another new “magic”?
Slide 47
Slide 47 text
Extensible Web
“Avoid New Magic”
Slide 48
Slide 48 text
Magic In Browser
● A lot of “magic” going on in browser
○ Canvas 2D API
○
● Doing complex tasks silently in C++ w/o
letting web developers know how
Slide 49
Slide 49 text
WebGL is New Magic?
● WebGL is a new API
● WebGL brings plug-in free 3D into browser
● WebGL is complex
Slide 50
Slide 50 text
WebGL is New Magic?
var canvas2D = canvas.getContext(‘2d’);
// Existing magic
var webgl = canvas.getContext(‘webgl’);
// Aha! New magic!!!
Slide 51
Slide 51 text
No,
WebGL is a good
practice for extensible
web
Slide 52
Slide 52 text
Extensible Web
● New low-level capabilities should be exposed
to Javascript
● Existing high-level capabilities should be
explained in terms of Javascript
Slide 53
Slide 53 text
Extensible Web
● New low-level capabilities should be exposed
to Javascript
● Existing high-level capabilities should be
explained in terms of Javascript
Slide 54
Slide 54 text
Low-level Capabilities
With WebGL, we can
● Write and execute GLSL programs on GPU
● Trigger GL/Direct3D commands through
browser
Slide 55
Slide 55 text
WebGL exposes access
to hardwares and
GL/D3D bindings
Things restricted to native apps before
Slide 56
Slide 56 text
Extensible Web
● New low-level capabilities should be exposed
to Javascript
● Existing high-level capabilities should be
explained in terms of Javascript
Slide 57
Slide 57 text
Hardware acceleration
can be instructed using
WebGL
Slide 58
Slide 58 text
High-level Capabilities
● Hardware acceleration used to be a black
box to web developers
● Relying on browser vendors to gift us with
performance improvement
Slide 59
Slide 59 text
Hardware Acceleration
Hardware Acceleration
Without WebGL
Slide 60
Slide 60 text
Hardware Acceleration
Hardware Acceleration
Vertex
Buffer
Draw
Call
Texture
Shader
Program
With WebGL
Slide 61
Slide 61 text
Hardware Acceleration
“truly hardware accelerating graphics on the
web means giving developers access to a
programmable 3D graphics pipeline with
WebGL”
-- Chrome blog
Slide 62
Slide 62 text
For those really care
about rendering
performance in web
Slide 63
Slide 63 text
Don’t rely on browsers
any more
Slide 64
Slide 64 text
Use WebGL to render
your hardware
accelerating graphics
Slide 65
Slide 65 text
Conclusion
Slide 66
Slide 66 text
WebGL !== 3D
Slide 67
Slide 67 text
Unleash the power of
WebGL in 2D world
Slide 68
Slide 68 text
WebGL !== Super fast
Slide 69
Slide 69 text
Be careful, and
optimize your
particular app
Slide 70
Slide 70 text
WebGL !== Another
New “Magic”
Slide 71
Slide 71 text
Open the black box and
happy hacking!
Slide 72
Slide 72 text
Thank you
Q&A