WebGLla 3D, cest maintenant dans votre navigateur Stéphane Verdier - Paris Web 2012
Il y a quelques années...              DHTML              Difficile                  Long  Peu performanthttp://www.useles...
Plugins...     Flash / Java    Propriétaire     VRML-X3D       Vrai 3D     Temps réel    Gourmand enprocesseur et mémoire ...
Flash !Moteurs de rendu :   > Sandy   > Away 3D   > Flare 3D   > Sophie 3D        ...                     4 / 39 - Paris W...
Mais ça, cétait avant...                            5 / 39 - Paris Web 2012
Aujourdhui<canvas> API javascript basé sur OpenGL                          6 / 39 - Paris Web 2012
WebGL : pré-requisCarte grahique 3D   Pilotes   Navigateur moderne     OpenGL         OpenGL      dernière version        ...
Fallback...                  WebGL ne sactive pas ?              Javascript > Injection HTMLMessage derreurAffichage dune ...
Exemple                                                EvE Onlinehttp://www.eveonline.com/universe/spaceships/            ...
Déploiement de WebGL65 % des utilisateurs ont WebGL activé                                webglstats.com                  ...
When can I use WebGL ?                            *???                     Implémentation de WebGL ?                      ...
Une image 3D, ça fonctionne comment ?                              12 / 39 - Paris Web 2012
Construire une image 3DCest un modèle mathématique vectoriel qui définit :     une scène, des vertex ou points, des arêtes...
Construire une image 3D   + de points = + précis                            14 / 39 - Paris Web 2012
Construire une image 3DConsistance et apparence réaliste des modèles, ajout de            matériaux ou shaders            ...
Construire une image 3DComme dans la réalité, pour voir la scène il faut              de la lumière...                    ...
Construire une image 3D … et au moins une caméra virtuelle                                  17 / 39 - Paris Web 2012
Affichage finalDu vectoriel aux pixels > la rasterization       Ou convertir un modèle 3D en 2D                           ...
Générer du code pour WebGL...                           19 / 39 - Paris Web 2012
Générer du code pour WebGL             Long – Complexe – Fastidieux        A laide, des bibliothèques JavaScript          ...
Générer du code pour WebGL    Modélisation à laide, de logiciels auteurs  Autodesk            Autodesk3D Studio Max       ...
WebGL en action !                    22 / 39 - Paris Web 2012
Démonstrations technologiques                                      Texte procéduralhttp://mrdoob.github.com/three.js/examp...
Démonstrations technologiques                    Génération et groupage de cubeshttp://learningthreejs.com/data/performanc...
Démonstrations technologiques                                     WebGL Waterhttp://madebyevan.com/webgl-water/           ...
Démonstrations technologiques                       RO.ME - MataBalls Playgroundhttp://www.ro.me/tech/metaball-playground ...
Présentation de produit                                            Car visualizerhttp://carvisualizer.plus360degrees.com/t...
Jeux vidéos                              HexGLhttp://hexgl.bkcore.com/                 28 / 39 - Paris Web 2012
Enseignement                                       Surface Explorerhttp://www.senchalabs.org/philogl/PhiloGL/examples/expl...
Enseignement                                            PlanetoWebhttp://planetoweb.net/app/planetView.html               ...
Visualisation de données                                          Cloud Globehttp://workshop.chromeexperiments.com/cloudgl...
Visualisation de données    World temperature changes from 1880 to 2011http://www.senchalabs.org/philogl/PhiloGL/examples/...
Visualisations de données    Small Arms and Ammunition – Import / Exporthttp://workshop.chromeexperiments.com/projects/arm...
Clip vidéo                   RO.ME – 3 Dreams of Blackhttp://www.ro.me                               34 / 39 - Paris Web 2...
Un standard pour la 3D de demain            Technologie jeune mais très attendue                Dotée dun très fort potent...
Une nouvelle voie souvre... Un vrai   standard ouvert pour la 3D            dans le navigateur             Maintenant,à vo...
Merci ! stephane@boxesinabox.net            @KoleGramyst            @boxesinabox           boxesinabox.nethttp://creativec...
CréditsIllustrations & PhotosAlteredqualia - http://alteredqualia.com/three/examples/webgl_terrain_dynamic.htmlNasa-JPL3D ...
#sharethelove                39 / 39 - Paris Web 2012
Prochain SlideShare
Chargement dans…5
×

WebGL, la 3D c'est maintenant dans votre navigateur - Paris Web 2012

959 vues

Publié le

Support de présentation de la conférence donnée à Paris Web le 19 octobre 2012.

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
959
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
23
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

WebGL, la 3D c'est maintenant dans votre navigateur - Paris Web 2012

  1. 1. WebGLla 3D, cest maintenant dans votre navigateur Stéphane Verdier - Paris Web 2012
  2. 2. Il y a quelques années... DHTML Difficile Long Peu performanthttp://www.uselesspickles.com/triangles/ 2 / 39 - Paris Web 2012
  3. 3. Plugins... Flash / Java Propriétaire VRML-X3D Vrai 3D Temps réel Gourmand enprocesseur et mémoire 3 / 39 - Paris Web 2012
  4. 4. Flash !Moteurs de rendu : > Sandy > Away 3D > Flare 3D > Sophie 3D ... 4 / 39 - Paris Web 2012
  5. 5. Mais ça, cétait avant... 5 / 39 - Paris Web 2012
  6. 6. Aujourdhui<canvas> API javascript basé sur OpenGL 6 / 39 - Paris Web 2012
  7. 7. WebGL : pré-requisCarte grahique 3D Pilotes Navigateur moderne OpenGL OpenGL dernière version récents 7 / 39 - Paris Web 2012
  8. 8. Fallback... WebGL ne sactive pas ? Javascript > Injection HTMLMessage derreurAffichage dune imageExemple : EvE Onlinehttp://www.eveonline.com/universe/spaceships/ 8 / 39 - Paris Web 2012
  9. 9. Exemple EvE Onlinehttp://www.eveonline.com/universe/spaceships/ 9 / 39 - Paris Web 2012
  10. 10. Déploiement de WebGL65 % des utilisateurs ont WebGL activé webglstats.com 10 / 39 - Paris Web 2012
  11. 11. When can I use WebGL ? *??? Implémentation de WebGL ? ?? Prise en charge des navigateurs ? caniuse.com/webgl webglstats.com Internet Explorer > Plugin > IEWebGL ?*Quand est-ce que je peux utiliser WebGL ? 11 / 39 - Paris Web 2012
  12. 12. Une image 3D, ça fonctionne comment ? 12 / 39 - Paris Web 2012
  13. 13. Construire une image 3DCest un modèle mathématique vectoriel qui définit : une scène, des vertex ou points, des arêtes, ... 13 / 39 - Paris Web 2012
  14. 14. Construire une image 3D + de points = + précis 14 / 39 - Paris Web 2012
  15. 15. Construire une image 3DConsistance et apparence réaliste des modèles, ajout de matériaux ou shaders 15 / 39 - Paris Web 2012
  16. 16. Construire une image 3DComme dans la réalité, pour voir la scène il faut de la lumière... 16 / 39 - Paris Web 2012
  17. 17. Construire une image 3D … et au moins une caméra virtuelle 17 / 39 - Paris Web 2012
  18. 18. Affichage finalDu vectoriel aux pixels > la rasterization Ou convertir un modèle 3D en 2D 18 / 39 - Paris Web 2012
  19. 19. Générer du code pour WebGL... 19 / 39 - Paris Web 2012
  20. 20. Générer du code pour WebGL Long – Complexe – Fastidieux A laide, des bibliothèques JavaScript <script type="text/javascript">Three.js var gl; function initGL(canvas) { try { gl = canvas.getContext("experimental-webgl");PhiloGL gl.viewportWidth = canvas.width; gl.viewportHeight = canvas.height; } catch (e) {GLGE } if (!gl) { alert("Could not initialise WebGL, sorry :-("); }G3D } function getShader(gl, id) {... var shaderScript = if (!shaderScript) document.getElementById(id); { return null; } 20 / 39 - Paris Web 2012
  21. 21. Générer du code pour WebGL Modélisation à laide, de logiciels auteurs Autodesk Autodesk3D Studio Max Maya Sketchup 21 / 39 - Paris Web 2012
  22. 22. WebGL en action ! 22 / 39 - Paris Web 2012
  23. 23. Démonstrations technologiques Texte procéduralhttp://mrdoob.github.com/three.js/examples/webgl_geometry_text.html 23 / 39 - Paris Web 2012
  24. 24. Démonstrations technologiques Génération et groupage de cubeshttp://learningthreejs.com/data/performance-merging-geometry/ 24 / 39 - Paris Web 2012
  25. 25. Démonstrations technologiques WebGL Waterhttp://madebyevan.com/webgl-water/ 25 / 39 - Paris Web 2012
  26. 26. Démonstrations technologiques RO.ME - MataBalls Playgroundhttp://www.ro.me/tech/metaball-playground 26 / 39 - Paris Web 2012
  27. 27. Présentation de produit Car visualizerhttp://carvisualizer.plus360degrees.com/threejs/ 27 / 39 - Paris Web 2012
  28. 28. Jeux vidéos HexGLhttp://hexgl.bkcore.com/ 28 / 39 - Paris Web 2012
  29. 29. Enseignement Surface Explorerhttp://www.senchalabs.org/philogl/PhiloGL/examples/explorer/ 29 / 39 - Paris Web 2012
  30. 30. Enseignement PlanetoWebhttp://planetoweb.net/app/planetView.html 30 / 39 - Paris Web 2012
  31. 31. Visualisation de données Cloud Globehttp://workshop.chromeexperiments.com/cloudglobe/ 31 / 39 - Paris Web 2012
  32. 32. Visualisation de données World temperature changes from 1880 to 2011http://www.senchalabs.org/philogl/PhiloGL/examples/temperatureAnomalies/ 32 / 39 - Paris Web 2012
  33. 33. Visualisations de données Small Arms and Ammunition – Import / Exporthttp://workshop.chromeexperiments.com/projects/armsglobe/ 33 / 39 - Paris Web 2012
  34. 34. Clip vidéo RO.ME – 3 Dreams of Blackhttp://www.ro.me 34 / 39 - Paris Web 2012
  35. 35. Un standard pour la 3D de demain Technologie jeune mais très attendue Dotée dun très fort potentiel WebGL libère des plugins propriétaires De nouvelles applications web plus richesDéjà, le jeu vidéo sest emparé naturellement de cette technologie 35 / 39 - Paris Web 2012
  36. 36. Une nouvelle voie souvre... Un vrai standard ouvert pour la 3D dans le navigateur Maintenant,à vous dinventer le futur qui va avec ! 36 / 39 - Paris Web 2012
  37. 37. Merci ! stephane@boxesinabox.net @KoleGramyst @boxesinabox boxesinabox.nethttp://creativecommons.org/licenses/by-nc-sa/3.0/fr/ 37 / 39 - Paris Web 2012
  38. 38. CréditsIllustrations & PhotosAlteredqualia - http://alteredqualia.com/three/examples/webgl_terrain_dynamic.htmlNasa-JPL3D Star by Jeff Lau - http://www.uselesspickles.com/triangles/Road Runner vs. The Flash (48/365) - http://www.flickr.com/photos/jdhancock/4367347854/W3C Logo HTML 5 - http://www.w3.org/html/logo/Khronos logo & OpenGL logo - http://www.khronos.org/Blender.orgLights by rocketsareneat on flickr.com Creative CommonsCamera video by av hire london on flickr.com Creative Commons06152012 Canon 60D high ISO test/Milky Way by StormLoverSwin93http://www.flickr.com/photos/eastcentralillinoiswxphotography93/7395713712/ 38 / 39 - Paris Web 2012
  39. 39. #sharethelove 39 / 39 - Paris Web 2012

×