「You Don't Know WebGL」Guangyao Liu / 劉光耀（グリー株式会社） ※GREE Tech Talk #08「WebGL」での登壇資料です。 http://techtalk.labs.gree.jp/08/

1. You Don’t Know
WebGL
GREE, Inc.
MM Team

2. MM Team
Kuu Miyazaki
@miyazaqui, github:@kuu
Jason Parrott
+JasonParrott, github:@Moncader
Guangyao Liu
@brilliun, github:@brilliun
Daijiro Wachi
@watilde, github:@watilde

3. WebGL Misconceptions
● WebGL === 3D?
● WebGL === Super fast?
● WebGL === Another new “magic”?

4. WebGL Misconceptions
● WebGL === 3D?
● WebGL === Super fast?
● WebGL === Another new “magic”?

5. When Talking About WebGL

6. 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.

7. 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.

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

9. Theatrical Suite

10. WebGL in Theatrical Suite
● WebGL used in real-world product
● For rendering 2D graphics

11. 2D Graphics By WebGL
● Extremely challenging task
● Rarely implemented even in OpenGL

12. 2D Graphics
Vector graphics Raster graphics
https://signalizenj.wordpress.com/2015/01/29/vector-vs-raster/

13. 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

14. 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

15. How to render 2D
graphics by WebGL?

16. Raster Graphics
R R
One image
(Rectangle)
Two triangles

17. Vector Graphics
?
Sequence of
outlines

18. Why not convert vector
to raster in advance?

19. 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.

20. How common libraries
deal with vector
graphics?

21. CreateJS
Layered canvases
● Extra composition cost
Web Page
WebGL
Canvas 2D

22. 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

23. three.js
Triangulation
● but with restrictions
http://mathworld.wolfram.com/Triangulation.html

24. How Theatrical deal
with vector graphics?

25. Tesspathy

26. And it’s open source
now!
github.com/gree/tesspathy

27. Vector in Theatrical
● We do triangulation
● With almost no restrictions
● Produce resolution independent curves

28. Now let’s watch the
SWF again.
(with a special build of Theatrical)

29. “Isn’t it weird to render
vector graphics in this
way?”

30. “Why not just use
Canvas 2D?”

31. First,
guess how Canvas 2D is
implemented in
browser?

32. Canvas Path in Chrome
● Chrome(Skia) do triangulation too!
○ With a combination of other approaches

33. Second,
we use WebGL for
better performance.

34. Let’s see the difference

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

36. WebGL Misconceptions
● WebGL === 3D?
● WebGL === Super fast?
● WebGL === Another new “magic”?

37. WebGL Is Super Fast?
Hardware
accelerationWebGL Super fast?

38. Hardware acceleration
itself does NOT
guarantee good
performance

39. Hardware Acceleration
Modern browsers have already been utilizing
hardware acceleration for several tasks.

40. chrome://gpu

41. Hardware Acceleration
Then why WebGL beats Canvas 2D?

42. chrome://tracing

43. WebGL Performance
● Performance boosts not ONLY because we
use WebGL
● It is the way how we use it that matters

44. WebGL Performance
● Draw calls
○ drawElements/drawArrays
● Texture updates
● Shader operations
○ especially Fragment Shader

45. WebGL Performance
● Otherwise, easy to get bad performance.
● Not to mention WebGL on mobile
○ weaker hardware
○ restricted GL features & extensions

46. WebGL Misconceptions
● WebGL === 3D?
● WebGL === Super fast?
● WebGL === Another new “magic”?

47. Extensible Web
“Avoid New Magic”

48. 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

49. WebGL is New Magic?
● WebGL is a new API
● WebGL brings plug-in free 3D into browser
● WebGL is complex

50. WebGL is New Magic?
var canvas2D = canvas.getContext(‘2d’);
// Existing magic
var webgl = canvas.getContext(‘webgl’);
// Aha! New magic!!!

51. No,
WebGL is a good
practice for extensible
web

52. Extensible Web
● New low-level capabilities should be exposed
to Javascript
● Existing high-level capabilities should be
explained in terms of Javascript

53. Extensible Web
● New low-level capabilities should be exposed
to Javascript
● Existing high-level capabilities should be
explained in terms of Javascript

54. Low-level Capabilities
With WebGL, we can
● Write and execute GLSL programs on GPU
● Trigger GL/Direct3D commands through
browser

55. WebGL exposes access
to hardwares and
GL/D3D bindings
Things restricted to native apps before

56. Extensible Web
● New low-level capabilities should be exposed
to Javascript
● Existing high-level capabilities should be
explained in terms of Javascript

57. Hardware acceleration
can be instructed using
WebGL

58. High-level Capabilities
● Hardware acceleration used to be a black
box to web developers
● Relying on browser vendors to gift us with
performance improvement

59. Hardware Acceleration
Hardware Acceleration
Without WebGL

60. Hardware Acceleration
Hardware Acceleration
Vertex
Buffer
Draw
Call
Texture
Shader
Program
With WebGL

61. Hardware Acceleration
“truly hardware accelerating graphics on the
web means giving developers access to a
programmable 3D graphics pipeline with
WebGL”
-- Chrome blog

62. For those really care
about rendering
performance in web

63. Don’t rely on browsers
any more

64. Use WebGL to render
your hardware
accelerating graphics

65. Conclusion

66. WebGL !== 3D

67. Unleash the power of
WebGL in 2D world

68. WebGL !== Super fast

69. Be careful, and
optimize your
particular app

70. WebGL !== Another
New “Magic”

71. Open the black box and
happy hacking!

72. Thank you
Q&A