class: center, middle, cover name: title # Demystifying the 3D Web ## Pietro Grandi ### @PietroGrandi3D ??? - what is the 3d web - what is webgl - see some frameworks - case studies - security issues --- # Hi! ## Pietro Grandi 1. Frontend dev at [BetssonGroup](http://www.betssongroup.com/) 2. Working with WebGL since 2012 3. Born as 3D Artist --- # Pietro Grandi ## Community 1. [Khronos Chapter Milano](http://www.meetup.com/Khronos-Milano-Chapter/) 2. [OTS WebGL workshop](www.opentechschool.org/milan/) 3. [NodeSchool WebGL workshop](www.eventbrite.com/e/nodeschool-interactive-3d-con-webgl-e-threejs-tickets-18538741876) --- class: center, middle .question[ # Why the web? ] --- # Why the web? ## Web is everywhere 1. Desktop 2. Mobile 3. Wearable --- # Why the web? ## Browser as environment for applications 1. Fast JS interpreter 2. Standards 3. One stack, more platforms --- class: center, middle .question[ # Why WebGL? ] --- # Why WebGL? ## WebGL 1. Native API 2. Porting of [OpenGL ES 2.0](https://www.khronos.org/opengles/2_X/) 3. GPU access 4. Maintained by [Khronos Group](https://www.khronos.org/) --- # Why WebGL? ## Native API 1. Access through JavaScript 2. No plugin required 3. Context from canvas --- # Why WebGL? ## OpenGL 1. Industry standard 2. Shader based pipeline 3. [Khronos Group](https://www.khronos.org/) --- # Why WebGL? ## The Khronos Group 1. Founded in January 2000 2. [Including ATI, Intel, NVIDIA...](https://www.khronos.org/members/member_list) 3. Creating open standard APIs for rich media ??? OpenGl, OpenCL, Collada, OpenKCam,... --- # Why WebGL? ## Shaders 1. Define rules for visualization 2. Vertex shader for geometry 3. Fragment shader for pixels ??? roughly: VS used to calculate position FS used to calculate color --- # Why WebGL? ## Shaders 1. Take parameters 2. Compiled 5. Use [GLSL 1.0](https://www.khronos.org/files/opengles_shading_language.pdf) --- # Why WebGL? ## Shader pipeline 1. Link shaders 2. Load geometry data 3. Draw data --- # Why WebGL? ## Immediate mode API 1. Scene is redrawn each time 2. No scene caching 3. Scene is managed by the application --- # Why WebGL? ## Support .logos[       ] .footernote[ All product names, logos, and brands are property of their respective owners. ] ??? Chrome the first, then Firefox. Microsoft in 2013 and Apple (mobile) in 2014 --- class: center, middle .question[ # Yet another JS framework??? ] --- # Why frameworks? ## WebGL API offers primitives 1. Points and connections 2. Triangles and connections 3. Colors 4. Textures --- # Why frameworks? ## World is bigger 1. Polygons 2. Solids 3. Fluids 4. Materials --- # Why frameworks? ## A trivial example 1. [A red square in 52 lines](http://codepen.io/pietro909/pen/mPwmgx) 2. [A red square in 21 lines](http://codepen.io/pietro909/pen/VaWbOM) --- class: center, middle .question[ # So, is there a killer framework? ] --- # Which framework? ## The biggest 1. [ThreeJS](http://threejs.org/) 2. [BabylonJS](http://www.babylonjs.com/) 3. [OSGJS](http://osgjs.org/) 4. [SceneJS](http://scenejs.org/) --- # Which framework? ## ThreeJS 1. Developed for Flash 2. Community driven development 3. Game engine 4. MIT License ??? example http://codepen.io/pietro909/pen/rewwNe --- # Which framework? ## BabylonJS 1. Developed for Silverlight 2. Supported by Microsoft 3. Game engine 4. Apache license 2.0 ??? example http://codepen.io/pietro909/pen/PNjjoy?editors=0010 --- # Which framework? ## OSGJS 1. Based on OpenSceneGraph 2. Used by [Sketchfab](https://sketchfab.com/) 3. Rendering engine 4. MIT License --- # Which framework? ## SceneJS 1. Rendering engine 2. Declarative approach 3. Used by [BioDigital Human](https://www.biodigital.com/) 4. Custom OSS License --- # Not just 3D ## What about 2D? 1. Shaders for 2D effects 3. GPU powered rendering 4. Filters 5. Texture blending ??? https://www.airtightinteractive.com/demos/js/badtvshader/ --- # Not just 3D ## [PixiJS](http://www.pixijs.com/) 1. Fast rendering engine 2. Support animations 3. [WebGL blend and filters](http://www.goodboydigital.com/new-year-new-pixi/) --- class: center, middle .question[ # Cool. ## Is someone REALLY using it? ] --- # Case study ## Google maps 1. Big data visualization 2. Draw vectors instead of tiles 3. Boost performances ??? - https://googleblog.blogspot.it/2011/10/step-inside-map-with-google-mapsgl.html --- # Case study ## Autodesk 1. [A360 Viewer](https://a360.autodesk.com/viewer) 2. [Revit WebGL Publisher](https://apps.autodesk.com/RVT/en/Detail/HelpDoc?id=appstore.exchange.autodesk.com%3Awebgl-publisherrevitexport%3Aen) 3. Using ThreeJS 4. Formerly using Flash --- # Case study ## Autodesk 1. [API](http://developer-autodesk.github.io/) for developer 2. Convert models 3. Display 3D --- # Case study ## Unity 1. WebGL target as of 5.3 2. Compiles to JS with [Emscripten](https://github.com/kripken/emscripten) 3. Custom framework ??? - http://blogs.unity3d.com/2015/12/07/unity-5-3-webgl-updates/ --- class: center, middle .question[ # Big companies spend money. ## Have you ever used it in production? ] --- # Me ## Yes, I did it! 1. UI to navigate environments 2. Data visualization 3. Online 3D viewer ??? https://sketchfab.com/models/add520232c1c49c6b937be1522bacc1b --- class: center, middle .question[ # Have you read [Microsoft's security report](https://blogs.technet.microsoft.com/srd/2011/06/16/webgl-considered-harmful/)? ] --- # Security ## Graphics is weak 1. Real time calls for performances 2. Less checks 3. Buffer overflow, illegal memory access, DOS --- # Security ## Untrusted code 1. Web applications are not installed 2. Giving hardware access can be harmful 3. No control --- # Security ## WebGL is not OpenGL 1. New allocated memory is zeored 2. Pixels outside framebuffer are set to (0,0,0,0) 3. Array buffers have fixed size --- # Security ## Unknown sources 1. Cross origin assets are forbidden 4. Only CORS validated resources can be loaded --- # Security ## Denial of service 1. OS can reset the GPU 2. .bold[GL_ARB_robustness] has been introduced 3. WebGL implementation could detect GPU reset --- class: last, middle # Thank you! ## @PietroGrandi3D ### [pietrograndi.com](www.pietrograndi.com) .footnote[     ] --- # References .references[ - [WebGL programming guide, Kouichi Matsuda](http://www.goodreads.com/book/show/16269927-webgl-programming-guide) - [WebGL security, Khronos Group](https://www.khronos.org/webgl/security/) - [WebGL considered harmful, Microsoft 2011](https://blogs.technet.microsoft.com/srd/2011/06/16/webgl-considered-harmful/) - [Unity WebGL updates, Jonas Echterhoff 2015](http://blogs.unity3d.com/2015/12/07/unity-5-3-webgl-updates/) - [Step inside the map with Google MapsGL, Brian McLendon 2011](https://googleblog.blogspot.ae/2011/10/step-inside-map-with-google-mapsgl.html) - [WWDC 2014, Apple](https://developer.apple.com/videos/wwdc2014/) - [Announcing an updated version of Internet Explorer 11, Microsoft 2014](https://blogs.msdn.microsoft.com/ie/2014/04/02/announcing-an-updated-version-of-internet-explorer-11-available-on-windows-8-1-windows-7-and-windows-phone-8-1/) ] --- class: middle # We are hiring! ## Betsson Group ### http://www.betssongroup.com/Jobs