Web+gl

3 groupes meetup Toulousains, Visualisation de données Toulouse, Toulouse Game Dev, Khronos Toulouse chapter et se sont réunis pour organiser cette rencontre. Adrien Coffre, développeur WebGL, nous a présenté un état de l’art complet de cette technologie agrémenté de nombreux exemples :

Transcript

1. Web + GL
   1
   Découvrir / s’inspirer / se tenir au jus / un peu de technique
   Pour innover
   

   View Slide

2. 2
   Your host
   Adrien Coffre
   Développeur WebGL
   https://interascope.com
   @GPUaccelerated
   Identifiants Wifi
   Id : LaCantine
   Mdp : Melee2017
   #WebGLToulouse
   

   View Slide

3. WEB : besoins 3D 3D : avant
   3
   Web + 3D ?
   Browser games
   Visualisation de produit
   Effets visuels
   Artistes
   Partage de données
   Téléchargement de clients
   Téléchargements de plugins
   Chercheurs
   Quelles solutions, depuis quand et pourquoi WebGL ?
   Comment faire du WebGL ?
   Quels impacts, dans quels secteurs ?
   Quels acteurs ?
   Quels avenir ?
   Téléchargements d’applis
   

   View Slide

4. 1. Blabla - 15min
   1.1. Le rendu temps réel
   1.2. Avoir de la 3D sur le web : un peu d’histoire
   1.3. Support de WebGL
   1.4. Un peu de code
   1.5. Les librairies
   2. Showcasing - 30min
   Data | Gaming | Configurateurs | Front-end | XR
   4
   Index
   

   View Slide

5. 5
   “3D”
   Rasterizer
   Vertex
   Shader
   Pixel
   Shader
   Données
   Géométrie Programme = Matériau
   CPU GPU
   

   View Slide

6. 6
   Quizz Temps réel
   Bottleneck ?
   Texture :
   5MB
   Bottleneck ?
   100 objets
   Bottleneck ?
   1M
   points
   

   View Slide

7. Rendus 3D sur le web...
   7
   ➔ Réseau
   ➔ Puissance graphique du public, y compris sur mobile
   ➔ Langage compréhensible pour tous les GPUs
   ➔ Maturité des navigateurs, spécification unique
   ➔ Rendus : qualité + rapidité + facilité d’implémentation
   

   View Slide

8. 8
   Histoire-s
   1990 2000 2010 2020
   3D
   WEB
   Javascript
   ECMAscript
   OpenGL
   DirectX
   Direct3D
   HLSL GLSL
   Mantle
   Vulkan
   Metal
   

   View Slide

9. WebGL
   2010 2020
   WebGL
   9
   2015
   2005
   ANGLE
   WebGL 2.0
   OpenGL ES 2.0 WebGL 1.0 OpenGL ES 3.0
   

   View Slide

10. 10
    Support
    

    View Slide

11. 11
    Hello World
    

    View Slide

12. 12
    Quelques bases
    var c = document.createElement(‘canvas’);
    var ctx = c.getContext(‘webgl2’)
    || c.getContext(‘webgl’)
    || c.getContext(‘experimental-webgl’);
    var extensions = ctx.getSupportedExtensions();
    var infos = ctx.getExtension(‘WEBGL_debug_renderer_info’);
    var vendor = ctx.getParameter( infos.UNMASKED_VENDOR_WEBGL );
    var gpu = ctx.getParameter( infos.UNMASKED_RENDERER_WEBGL );
    

    View Slide

13. 13
    Le développement
    BabylonJS
    DeckGL
    ThreeJS
    PixiJS
    ReGL, glmatrix, minigl, nanogl
    Les librairies
    Unity
    Playcanvas
    Clara.io
    Sketchfab
    ThreeKit
    Les démonstrateurs /
    configurateurs
    IDEs complets
    Unity
    Playcanvas
    ...
    

    View Slide

14. Réussite historique :
    Googlemaps - https://maps.google.fr
    flyvast - https://sketchfab.com/models/604478ecf58a45228a4b895bd362ac10
    Deck.gl : https://uber.github.io/deck.gl/#/examples/overview
    Molécules : http://3dmol.csb.pitt.edu/
    Black hole :
    http://rickyreusser.com/demos/lorenz/
    http://christopheremoore.net/black-hole-skymap/
    http://spiro.fisica.unipd.it/~antonell/schwarzschild/live/
    Other
    http://stuffin.space/
    https://jig.space/
    Mine:
    https://www.interascope.com/experiments/evolution/
    https://www.interascope.com/experiments/jogging/
    https://www.interascope.com/experiments/laniakea/
    https://www.interascope.com/experiments/slices/
    14
    Data , e-learning , science
    

    View Slide

15. http://hexgl.bkcore.com/
    http://letsplay.ouigo.com/
    https://noheroes.ghostrecon.com/fr-FR/index.html
    http://www.cryptarismission.com/
    https://beinternetawesome.withgoogle.com/interland
    15
    GAMING
    http://oskarstalberg.com/game/house/index.html
    http://oskarstalberg.com/game/planet/planet.html
    https://playcanv.as/p/3RerJIcy/
    https://tanx.io/
    2D ( PixiJS )
    

    View Slide

16. https://redplant.de/prozess-wie-wir-arbeiten/
    https://threekit.com/3d-product-demos/
    VOITURES
    Server rendering : SIGGRAPH Zerolight:
    https://www.audi.de/de/brand/de/neuwagen/a4/a4-allroad-quattro.html#page=/de/brand/de/neuwagen/a4/a4-allroad-quattro/pakete.html
    http://pagani.zerolight.com/geneva-launch-event
    Unity : quasi inexistants.. ?
    Natifs WebGL : petit apparté PBR
    http://playcanv.as/p/RqJJ9oU9/?overlay=false
    http://experiences.xymatic.com/car/
    http://renaultespace.littleworkshop.fr/
    http://awards.paris/new-micra-experience/
    https://juke.specialversion.nissan.dlbi.xyz/
    16
    Configurateurs
    

    View Slide

17. Principe : Avec service worker et app-manifest : PWA
    Complétude : WebAssembly, AR.js à l’automne.
    Pixi.js
    WebGL DOM Rendering : https://twitter.com/AWWWARDS/status/876498535222579201 / http://www.awwwards.org/brain-food-firstborn.pdf
    http://htmlgl.com/
    https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas
    https://www.awwwards.com/the-rise-of-shaders-filters-and-effects-in-web-projects.html
    Autre
    https://codepen.io/Yakudoo/
    Plus loin que du CSS
    https://www.essential.com/
    https://www.7up.nl/producten/free
    https://www.50cinquante.be/
    https://captur3d.io/view/ikea/ikea-virtual-retail-experience-vr?m=VvXTcv9iZE2
    http://schl.co.jp/
    https://stainedglassvideo.com/
    https://www.raoul-gaillard.com/
    http://www.lespetitesculottees.com/#!/
    http://www.weareuprising.com/index
    http://youmatter.accademiadellusso.com/
    http://anagram.paris
    17
    Front-end
    

    View Slide

18. AR.js > iOS implémente le streaming vidéo en automne
    WebVR en développement (Chromium/Firefox Nightly/Cardboard)
    https://www.youtube.com/watch?v=lQt96saECfM
    Problème : avoir un standard !
    18
    AR/VR
    

    View Slide

19. Deep learning :
    https://erkaman.github.io/regl-cnn/src/demo.html
    19
    Avenir
    

    View Slide

20. 20
    Conclusion
    ● Pas à mettre partout
    ● Long à implémenter, UX plus complexe
    ● Mais 2017 : hardware / software / librairies / talents OK !
    ● Acteurs en positionnement (web, gaming), rares, dev rares
    ● Nouvelles opportunités à découvrir
    ● Nouvelle dimension pour la créativitié
    

    View Slide

21. 21
    Au revoir .
    paperplanes.world
    

    View Slide