You Don't Know WebGL at GREE Tech Talk #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”?

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)

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

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

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

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

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

Guangyao Liu

Transcript