[GREE Tech Talk #08] You Don't Know WebGL
2 likes2,676 views
The document discusses common misconceptions about WebGL, clarifying that it is not solely a 3D graphics API nor guaranteed to be super fast. It emphasizes the significance of correctly utilizing WebGL for rendering both 2D and 3D graphics, with a focus on performance optimization and its capabilities. The content also stresses that WebGL is not just another 'magic' tool but a valuable framework for efficient hardware-accelerated graphics on the web.
[GREE Tech Talk #08] You Don't Know WebGL
- 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?
- 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
- 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
- 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