$30 off During Our Annual Pro Sale. View Details »

Web+gl

 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 :

More Decks by visualisation de données

Other Decks in Technology

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