High Performance WebGL

Slides from my talk about WebGL at FEVR meetup. 21 Feb 2018

Transcript

1. HIGH PERFORMANCE WEBGL what I learned doing WebGL… FEBRUARY 21TH, 2018
2. @luruke
3. EPIC is a digital agency made of passion 
 and creativity. 
 We dedicate ourselves to crafting awesome 
 and eye-catching digital experiences that change the way your brand connects with your clients.
6. HTTPS://GITHUB.COM/LURUKE/DEV-EXCUSES-CHROME
8. WE ARE EPIC 1
9. WE ARE EPIC 1
10. JUST A RASTERIZATION ENGINE! UEBBGL?
11. WEBGL IS NOT 3D
12. HTTPS://NICKDESAULNIERS.GITHUB.IO/RAWWEBGL/
13. HTTPS://WWW.KHRONOS.ORG/API/OPENGLES/2_X
14. HTTPS://SIMONSCHREIBT.DE/GAT/RENDERHELL/
15. • Three.js (react-vr, a-frame…) • Babylon.js • PixiJS (2d only… for now) • Nanogl • Regl • … • Vanilla WebGL (if you are brave enough) Most used WebGL framework
16. WHAT I LEARNED After many headaches.
22. IN THE DETAIL…
23. DELIVERY DAY - Promotional game - Mobile first - Easy to play - “on the go” - Support 2-3y old phones - Multiplatform (+60 device tested)
26. CONCEPT 1.0 Make sure you know what you are doing!
28. WE ARE EPIC 1
29. WE ARE EPIC 1
30. WE ARE EPIC 1
31. WE ARE EPIC 1
32. WE ARE EPIC 1
33. WE ARE EPIC 1
35. BLENDER - Great for prototyping - Open Source - Three.js exporter - All-in-one solution (modelling + texturing + sculpturing…) 1.1 Is not just for 3D artist!
36. WE ARE EPIC 1
37. WE ARE EPIC 1
38. WE ARE EPIC 1
39. WE ARE EPIC 1
40. WE ARE EPIC 1
41. WE ARE EPIC 1
42. WE ARE EPIC 1
43. WE ARE EPIC 1
45. LOGIC + RENDER 1.2 Divide et impera
46. • Just logic! • Expose the “info” (score, parcels, …) • Event based • Unit tested (well…partially) • Rendering independent (css, terminal, canvas, webgl….) Game engine
47. • Passive - read info from game engine • Handles interaction (touch, click, gyroscope…) • Can just send events • Full WebGL (but we also won CSSDesignAward…) • Three.js + PixiJS Rendering
48. 16.6MS
49. >
50. WEBGL AND HTML? 1.3 Sometimes are not good friends
52. WE ARE EPIC 1
54. CPU & GPU 1.4 Less they talk each other, the better
55. HTTPS://SIMONSCHREIBT.DE/GAT/RENDERHELL/
57. WE ARE EPIC 1
58. WE ARE EPIC 1
59. TEXTURES = DATA 1.5 Textures are more than an image
61. HTTPS://WWW.PATREON.COM/MINIONSART
62. HTTPS://WWW.PATREON.COM/MINIONSART
63. HTTPS://WWW.PATREON.COM/MINIONSART
64. HTTPS://WWW.PATREON.COM/MINIONSART
65. HTTPS://WWW.PATREON.COM/MINIONSART
66. WE ARE EPIC 1 HTTPS://GITHUB.COM/SPITE/THREE.FBOHELPER
67. WE ARE EPIC 1
68. WE ARE EPIC 1
71. 1.6 “With Great Power Comes Great Responsibility” FORCE GPU UPLOAD
72. HTTP://GLUMPY.READTHEDOCS.IO/
73. WE ARE EPIC 1
77. OBJECT POOLING 1.7
81. MULTIPLATFORM WEBGL 1.8 Make WebGL run (almost) everywhere
87. WE ARE EPIC 1
88. WE ARE EPIC 1
89. WE ARE EPIC 1
90. WE ARE EPIC 1
91. WE ARE EPIC 1
92. I NEED MORE POWER! 1.9 Do you?
96. DEBUGGING IS HARD 2.0 But not impossible
100. WE ARE EPIC 1
103. HOW TO START? 2.1 The hard way
104. • How Computer Graphic works • How 3D works (math, vectors, light, matrix…) • How WebGL/OpenGL works • Write tons of Shaders • Success Learn WebGL like a BOSS:
105. WE ARE EPIC 1
106. WE ARE EPIC 1
107. WE ARE EPIC 1
108. Thank you! YOU GOT QUESTIONS? @luruke
109. Thank you! YOU GOT QUESTIONS? @luruke HTTP://SOLVERSGB.UPS.COM/DELIVERY-DAY/