[GREE Tech Talk #08] You Don't Know WebGL

「You Don't Know WebGL」Guangyao Liu / 劉光耀（グリー株式会社）

※GREE Tech Talk #08「WebGL」での登壇資料です。
http://techtalk.labs.gree.jp/08/

Transcript

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> 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
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 acceleration WebGL 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