Téléchargé 29 fois
Téléchargé parBoxesinabox
WebGL, la 3D c'est maintenant dans votre navigateur - Paris Web 2012
WebGL permet de créer des graphiques 3D directement dans le navigateur en utilisant l'API JavaScript basée sur OpenGL, éliminant ainsi le besoin de plugins propriétaires. Bien que la complexité de génération de code pour WebGL soit élevée, des bibliothèques comme Three.js facilitent le processus. Cette technologie révolutionnaire offre un potentiel considérable pour les applications web, en particulier dans les jeux vidéo et la visualisation de données.
WebGL, la 3D c'est maintenant dans votre navigateur - Paris Web 2012
- 1. WebGL la 3D, c'estmaintenant dans votre navigateur Stéphane Verdier - Paris Web 2012
- 2. Il y aquelques années... DHTML Difficile Long Peu performant http://www.uselesspickles.com/triangles/ 2 / 39 - Paris Web 2012
- 3. Plugins... Flash / Java Propriétaire VRML-X3D Vrai 3D Temps réel Gourmand en processeur et mémoire 3 / 39 - Paris Web 2012
- 4. Flash ! Moteurs de rendu : > Sandy > Away 3D > Flare 3D > Sophie 3D ... 4 / 39 - Paris Web 2012
- 5. Mais ça, c'étaitavant... 5 / 39 - Paris Web 2012
- 6. Aujourd'hui <canvas> API javascriptbasé sur OpenGL 6 / 39 - Paris Web 2012
- 7. WebGL : pré-requis Carte grahique3D Pilotes Navigateur moderne OpenGL OpenGL dernière version récents 7 / 39 - Paris Web 2012
- 8. Fallback... WebGL ne s'active pas ? Javascript > Injection HTML Message d'erreur Affichage d'une image Exemple : EvE Online http://www.eveonline.com/universe/spaceships/ 8 / 39 - Paris Web 2012
- 9. Exemple EvE Online http://www.eveonline.com/universe/spaceships/ 9 / 39 - Paris Web 2012
- 10. Déploiement de WebGL 65 %des utilisateurs ont WebGL activé webglstats.com 10 / 39 - Paris Web 2012
- 11. When can Iuse 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. Une image 3D,ça fonctionne comment ? 12 / 39 - Paris Web 2012
- 13. Construire une image3D C'est 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. Construire une image3D + de points = + précis 14 / 39 - Paris Web 2012
- 15. Construire une image3D Consistance et apparence réaliste des modèles, ajout de matériaux ou shaders 15 / 39 - Paris Web 2012
- 16. Construire une image3D Comme dans la réalité, pour voir la scène il faut de la lumière... 16 / 39 - Paris Web 2012
- 17. Construire une image3D … et au moins une caméra virtuelle 17 / 39 - Paris Web 2012
- 18. Affichage final Du vectorielaux pixels > la rasterization Ou convertir un modèle 3D en 2D 18 / 39 - Paris Web 2012
- 19. Générer du codepour WebGL... 19 / 39 - Paris Web 2012
- 20. Générer du codepour WebGL Long – Complexe – Fastidieux A l'aide, 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. Générer du codepour WebGL Modélisation à l'aide, de logiciels auteurs Autodesk Autodesk 3D Studio Max Maya Sketchup 21 / 39 - Paris Web 2012
- 22. WebGL en action ! 22 / 39 - Paris Web 2012
- 23. Démonstrations technologiques Texte procédural http://mrdoob.github.com/three.js/examples/webgl_geometry_text.html 23 / 39 - Paris Web 2012
- 24. Démonstrations technologiques Génération et groupage de cubes http://learningthreejs.com/data/performance-merging-geometry/ 24 / 39 - Paris Web 2012
- 25. Démonstrations technologiques WebGL Water http://madebyevan.com/webgl-water/ 25 / 39 - Paris Web 2012
- 26. Démonstrations technologiques RO.ME - MataBalls Playground http://www.ro.me/tech/metaball-playground 26 / 39 - Paris Web 2012
- 27. Présentation de produit Car visualizer http://carvisualizer.plus360degrees.com/threejs/ 27 / 39 - Paris Web 2012
- 28. Jeux vidéos HexGL http://hexgl.bkcore.com/ 28 / 39 - Paris Web 2012
- 29. Enseignement Surface Explorer http://www.senchalabs.org/philogl/PhiloGL/examples/explorer/ 29 / 39 - Paris Web 2012
- 30. Enseignement PlanetoWeb http://planetoweb.net/app/planetView.html 30 / 39 - Paris Web 2012
- 31. Visualisation de données Cloud Globe http://workshop.chromeexperiments.com/cloudglobe/ 31 / 39 - Paris Web 2012
- 32. Visualisation de données World temperature changes from 1880 to 2011 http://www.senchalabs.org/philogl/PhiloGL/examples/temperatureAnomalies/ 32 / 39 - Paris Web 2012
- 33. Visualisations de données Small Arms and Ammunition – Import / Export http://workshop.chromeexperiments.com/projects/armsglobe/ 33 / 39 - Paris Web 2012
- 34. Clip vidéo RO.ME – 3 Dreams of Black http://www.ro.me 34 / 39 - Paris Web 2012
- 35. Un standard pourla 3D de demain Technologie jeune mais très attendue Dotée d'un très fort potentiel WebGL libère des plugins propriétaires De nouvelles applications web plus riches Déjà, le jeu vidéo s'est emparé naturellement de cette technologie 35 / 39 - Paris Web 2012
- 36. Une nouvelle voies'ouvre... Un vrai standard ouvert pour la 3D dans le navigateur Maintenant, à vous d'inventer le futur qui va avec ! 36 / 39 - Paris Web 2012
- 37. Merci ! [email protected] @KoleGramyst @boxesinabox boxesinabox.net http://creativecommons.org/licenses/by-nc-sa/3.0/fr/ 37 / 39 - Paris Web 2012
- 38. Crédits Illustrations & Photos Alteredqualia- http://alteredqualia.com/three/examples/webgl_terrain_dynamic.html Nasa-JPL 3D 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.org Lights by rocketsareneat on flickr.com Creative Commons Camera video by av hire london on flickr.com Creative Commons 06152012 Canon 60D high ISO test/Milky Way by StormLoverSwin93 http://www.flickr.com/photos/eastcentralillinoiswxphotography93/7395713712/ 38 / 39 - Paris Web 2012
- 39. #sharethelove 39 / 39 - Paris Web 2012