Download as PDF, PPTX
Uploaded byPietro Grandi
Demystifying the 3d web - Codemotion 2016
The presentation by Pietro Grandi discusses the significance and applications of WebGL, highlighting its capability to create 3D content in web browsers without plugins. It also explores various popular JavaScript frameworks and tools built on WebGL, such as Three.js and Babylon.js, while addressing security concerns associated with WebGL use. The document concludes by showcasing case studies of major companies leveraging WebGL for data visualization and application rendering.
TechnologyâŚ
![3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://cdn.slidesharecdn.com/ss_thumbnails/thanhlocvo-3dprogramming-131125060122-phpapp02-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![[GREE Tech Talk #08] You Don't Know WebGL](https://cdn.slidesharecdn.com/ss_thumbnails/youdontknowwebgl-150618071531-lva1-app6891-150619005902-lva1-app6892-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Demystifying the 3d web - Codemotion 2016
- 1. Pietro Grandi @PietroGrandi3D Demystifying the3D Web 1 / 44
- 2. Pietro Grandi Frontend devat BetssonGroup Working with WebGL since 2012 Born as 3D Artist Hi! 2 / 44
- 3. Community Khronos Chapter Milano OTSWebGL workshop NodeSchool WebGL workshop Pietro Grandi 3 / 44
- 4. Why the web? 4/ 44
- 5. Web is everywhere Desktop Mobile Wearable Whythe web? 5 / 44
- 6. Browser as environmentfor applications Fast JS interpreter Standards One stack, more platforms Why the web? 6 / 44
- 7.
- 8. WebGL Native API Porting ofOpenGL ES 2.0 GPU access Maintained by Khronos Group Why WebGL? 8 / 44
- 9. Native API Access throughJavaScript No plugin required Context from canvas Why WebGL? 9 / 44
- 10. OpenGL Industry standard Shader basedpipeline Khronos Group Why WebGL? 10 / 44
- 11. The Khronos Group Foundedin January 2000 Including ATI, Intel, NVIDIA... Creating open standard APIs for rich media Why WebGL? 11 / 44
- 12. Shaders DeďŹne rules forvisualization Vertex shader for geometry Fragment shader for pixels Why WebGL? 12 / 44
- 13. Shaders Take parameters Compiled Use GLSL1.0 Why WebGL? 13 / 44
- 14. Shader pipeline Link shaders Loadgeometry data Draw data Why WebGL? 14 / 44
- 15. Immediate mode API Sceneis 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.
- 18. WebGL API offers primitives Pointsand connections Triangles and connections Colors Textures Why frameworks? 18 / 44
- 19. World is bigger Polygons Solids Fluids Materials Whyframeworks? 19 / 44
- 20. A trivial example Ared square in 52 lines A red square in 21 lines Why frameworks? 20 / 44
- 21. So, is therea killer framework? 21 / 44
- 22.
- 23. ThreeJS Developed for Flash Communitydriven development Game engine MIT License Which framework? 23 / 44
- 24. BabylonJS Developed for Silverlight Supportedby Microsoft Game engine Apache license 2.0 Which framework? 24 / 44
- 25. OSGJS Based on OpenSceneGraph Usedby Sketchfab Rendering engine MIT License Which framework? 25 / 44
- 26. SceneJS Rendering engine Declarative approach Usedby BioDigital Human Custom OSS License Which framework? 26 / 44
- 27. What about 2D? Shadersfor 2D effects GPU powered rendering Filters Texture blending Not just 3D 27 / 44
- 28. PixiJS Fast rendering engine Supportanimations WebGL blend and ďŹlters Not just 3D 28 / 44
- 29. Cool. Is someone REALLYusing it? 29 / 44
- 30. Google maps Big datavisualization Draw vectors instead of tiles Boost performances Case study 30 / 44
- 31. Autodesk A360 Viewer Revit WebGLPublisher Using ThreeJS Formerly using Flash Case study 31 / 44
- 32. Autodesk API for developer Convertmodels Display 3D Case study 32 / 44
- 33. Unity WebGL target asof 5.3 Compiles to JS with Emscripten Custom framework Case study 33 / 44
- 34. Big companies spend money. Haveyou ever used it in production? 34 / 44
- 35. Yes, I didit! UI to navigate environments Data visualization Online 3D viewer Me 35 / 44
- 36. Have you readMicrosoft's security report? 36 / 44
- 37. Graphics is weak Realtime calls for performances Less checks Buffer overďŹow, illegal memory access, DOS Security 37 / 44
- 38. Untrusted code Web applicationsare not installed Giving hardware access can be harmful No control Security 38 / 44
- 39. WebGL is notOpenGL New allocated memory is zeored Pixels outside framebuffer are set to (0,0,0,0) Array buffers have ďŹxed size Security 39 / 44
- 40. Unknown sources Cross originassets are forbidden Only CORS validated resources can be loaded Security 40 / 44
- 41. Denial of service OScan reset the GPU GL_ARB_robustness has been introduced WebGL implementation could detect GPU reset Security 41 / 44
- 42.
- 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 arehiring! 44 / 44