Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Demistifying the 3D Web

512 views

Published on

"Demistifying the 3D Web" by Pietrp Grandi.
The web in 3D has been always considered a tough argument: lack of standards, inconsistent support across platform and too much boilerplate needed even to bring up the simplest example. With the official porting of as subset of OpenGL APIs into the browsers by the Khronos Group, developers can now rely on a consistent and solid pipeline. In order to simplify the scene management several JS frameworks have been built upon it. During this talk I'll present the most used frameworks showing differences and typical use cases for them.

Published in: Software
  • Be the first to comment

Demistifying the 3D Web

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

×