Demistifying the 3D Web
1 like685 views
The document discusses the significance of WebGL as a web-based graphics API that offers GPU access without the need for plugins, maintained by the Khronos Group. It highlights various frameworks such as Three.js, Babylon.js, and OSG.js, and their applications in real-world scenarios like Google Maps and Autodesk A360 viewer. Additionally, it addresses security considerations related to WebGL in web applications, including memory management and cross-origin resource loading.
Demistifying the 3D Web
- 1. Pietro Grandi @PietroGrandi3D Demystifying the 3D Web 1 / 44
- 2. Pietro Grandi Frontend dev at BetssonGroup Working with WebGL since 2012 Born as 3D Artist Hi! 2 / 44
- 3. Community Khronos Chapter Milano OTS WebGL workshop NodeSchool WebGL workshop Pietro Grandi 3 / 44
- 4. Why the web? 4 / 44
- 5. Web is everywhere Desktop Mobile Wearable Why the web? 5 / 44
- 6. Browser as environment for applications Fast JS interpreter Standards One stack, more platforms Why the web? 6 / 44
- 7. Why WebGL? 7 / 44
- 8. WebGL Native API Porting of OpenGL ES 2.0 GPU access Maintained by Khronos Group Why WebGL? 8 / 44
- 9. Native API Access through JavaScript No plugin required Context from canvas Why WebGL? 9 / 44
- 10. OpenGL Industry standard Shader based pipeline Khronos Group Why WebGL? 10 / 44
- 11. The Khronos Group Founded in January 2000 Including ATI, Intel, NVIDIA... Creating open standard APIs for rich media Why WebGL? 11 / 44
- 12. Shaders Define rules for visualization Vertex shader for geometry Fragment shader for pixels Why WebGL? 12 / 44
- 13. Shaders Take parameters Compiled Use GLSL 1.0 Why WebGL? 13 / 44
- 14. Shader pipeline Link shaders Load geometry data Draw data Why WebGL? 14 / 44
- 15. Immediate mode API Scene is redrawn each time No scene caching Scene is managed by the application Why WebGL? 15 / 44
- 16. Support All product names, logos, and brands are property of their respective owners. Why WebGL? 16 / 44
- 17. Yet another JS framework??? 17 / 44
- 18. WebGL API offers primitives Points and connections Triangles and connections Colors Textures Why frameworks? 18 / 44
- 19. World is bigger Polygons Solids Fluids Materials Why frameworks? 19 / 44
- 20. A trivial example A red square in 52 lines A red square in 21 lines Why frameworks? 20 / 44
- 21. So, is there a killer framework? 21 / 44
- 23. ThreeJS Developed for Flash Community driven development Game engine MIT License Which framework? 23 / 44
- 24. BabylonJS Developed for Silverlight Supported by Microsoft Game engine Apache license 2.0 Which framework? 24 / 44
- 25. OSGJS Based on OpenSceneGraph Used by Sketchfab Rendering engine MIT License Which framework? 25 / 44
- 26. SceneJS Rendering engine Declarative approach Used by BioDigital Human Custom OSS License Which framework? 26 / 44
- 27. What about 2D? Shaders for 2D effects GPU powered rendering Filters Texture blending Not just 3D 27 / 44
- 28. PixiJS Fast rendering engine Support animations WebGL blend and filters Not just 3D 28 / 44
- 29. Cool. Is someone REALLY using it? 29 / 44
- 30. Google maps Big data visualization Draw vectors instead of tiles Boost performances Case study 30 / 44
- 31. Autodesk A360 Viewer Revit WebGL Publisher Using ThreeJS Formerly using Flash Case study 31 / 44
- 32. Autodesk API for developer Convert models Display 3D Case study 32 / 44
- 33. Unity WebGL target as of 5.3 Compiles to JS with Emscripten Custom framework Case study 33 / 44
- 34. Big companies spend money. Have you ever used it in production? 34 / 44
- 35. Yes, I did it! UI to navigate environments Data visualization Online 3D viewer Me 35 / 44
- 36. Have you read Microsoft's security report? 36 / 44
- 37. Graphics is weak Real time calls for performances Less checks Buffer overflow, illegal memory access, DOS Security 37 / 44
- 38. Untrusted code Web applications are not installed Giving hardware access can be harmful No control Security 38 / 44
- 39. WebGL is not OpenGL New allocated memory is zeored Pixels outside framebuffer are set to (0,0,0,0) Array buffers have fixed size Security 39 / 44
- 40. Unknown sources Cross origin assets are forbidden Only CORS validated resources can be loaded Security 40 / 44
- 41. Denial of service OS can reset the GPU GL_ARB_robustness has been introduced WebGL implementation could detect GPU reset Security 41 / 44
- 43. WebGL programming guide, Kouichi Matsuda WebGL security, Khronos Group WebGL considered harmful, Microsoft 2011 Unity WebGL updates, Jonas Echterhoff 2015 Step inside the map with Google MapsGL, Brian McLendon 2011 WWDC 2014, Apple Announcing an updated version of Internet Explorer 11, Microsoft 2014 References 43 / 44
- 44. Betsson Group http://www.betssongroup.com/Jobs We are hiring! 44 / 44