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
2. 2 Your host Adrien Coffre Développeur WebGL https://interascope.com @GPUaccelerated Identifiants Wifi Id : LaCantine Mdp : Melee2017 #WebGLToulouse
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
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
5. 5 “3D” Rasterizer Vertex Shader Pixel Shader Données Géométrie Programme = Matériau CPU GPU
6. 6 Quizz Temps réel Bottleneck ? Texture : 5MB Bottleneck ? 100 objets Bottleneck ? 1M points
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
8. 8 Histoire-s 1990 2000 2010 2020 3D WEB Javascript ECMAscript OpenGL DirectX Direct3D HLSL GLSL Mantle Vulkan Metal
9. WebGL 2010 2020 WebGL 9 2015 2005 ANGLE WebGL 2.0 OpenGL ES 2.0 WebGL 1.0 OpenGL ES 3.0
10. 10 Support
11. 11 Hello World
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 );
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 ...
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
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 )
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
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
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
19. Deep learning : https://erkaman.github.io/regl-cnn/src/demo.html 19 Avenir
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é
21. 21 Au revoir . paperplanes.world