WebGL                  IntroductionVincent GarreauH3 P2015                         15/01/2013
Sémantique 3D / Graphisme                   Offline & StockagePrésentation                           Accès device  Performan...
3D / GraphismeCSS3   SVG   Canvas   WebGL
WebGL            Web Graphics LibraryAPI permettant de créer des environnements 3D           dans un navigateur web       ...
WebGLComment ça fonctionne ?
Un peu comme ça...    Javascript                     Interactions      natif
WebGL       OpenGL    Rendu 3D                        Dans une                     balise <canvas>    Javascript       Web...
Compatibilité                             Desktop                 Premières implémentations fin 2009Chrome 8.0+   Safari 5....
Compatibilité                         Tablette / Mobile                      Premières implémentations fin 2011Blackberry  ...
Comment on fait ça ?  Coder en WebGL natif            ou   Utiliser une librairie
Différentes librairiesCooperLicht         Three.js                  GLGE       SpiderGL                  SceneJSC3DL
Différentes librairies     Three.js
Three.js  Ricardo Cabello  Mr.doob
Three.js           Léger     Facile d’utilisationRendus WebGL, SVG et Canvas
Création d’une scène 3D     avec Three.js
5 Rendu                     4 Lumière2 Caméra     1 Scène         3 Objets
5 Rendu                     4 Lumière2 Caméra     1 Scène         3 Objets
1 Scène1 Scène   2 Caméra     3 Objets   4 Lumière   5 Rendu // Création d’une scène var scene = new THREE.Scene();
5 Rendu                     4 Lumière2 Caméra     1 Scène         3 Objets
2 Caméra1 Scène   2 Caméra      3 Objets   4 Lumière     5 Rendu // Création d’une caméra var camera = new THREE.Perspecti...
5 Rendu                     4 Lumière2 Caméra     1 Scène         3 Objets
3 Objets1 Scène   2 Caméra    3 Objets    4 Lumière   5 Rendu // Création d’une forme géométrique (ici un carré) var cubeG...
3 Objets1 Scène   2 Caméra     3 Objets   4 Lumière    5 Rendu // Importer un modèle SketchUp (Collada, .dae) new THREE.Co...
3 Objets1 Scène   2 Caméra     3 Objets   4 Lumière    5 Rendu // Importer un modèle .obj converti en .js new THREE.JSONLo...
5 Rendu                     4 Lumière2 Caméra     1 Scène         3 Objets
4 Lumière1 Scène   2 Caméra    3 Objets    4 Lumière   5 Rendu // Création d’une lumière var directionalLight = new THREE....
5 Rendu                     4 Lumière2 Caméra     1 Scène         3 Objets
5 Rendu1 Scène   2 Caméra      3 Objets   4 Lumière     5 Rendu var renderer = new THREE.WebGLRenderer(); // Taille du ren...
Bien d’autres méthodes         existent...Création d’ombres, différents types de lumières, de matières   et de caméras, géo...
RessourcesDébuter avec Three.jshttp://www.aerotwist.com/tutorials/getting-started-with-three-js/http://www.grafikart.fr/tut...
En conclusion, le WebGL c’est...         Une forte valeur ajoutée         « expérience utilisateur »  Pas si difficile que ç...
Merci !       Slides + Démosvincentgarreau.com/webgl.zip      Des questions ?
Prochain SlideShare
Chargement dans…5
×

Introduction au WebGL

2 575 vues

Publié le

Introduction au WebGL et à la librairie Three.js

0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 575
Sur SlideShare
0
Issues des intégrations
0
Intégrations
5
Actions
Partages
0
Téléchargements
70
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Introduction au WebGL

  1. 1. WebGL IntroductionVincent GarreauH3 P2015 15/01/2013
  2. 2. Sémantique 3D / Graphisme Offline & StockagePrésentation Accès device Performance Connectivité Audio / Vidéo
  3. 3. 3D / GraphismeCSS3 SVG Canvas WebGL
  4. 4. WebGL Web Graphics LibraryAPI permettant de créer des environnements 3D dans un navigateur web Créé par
  5. 5. WebGLComment ça fonctionne ?
  6. 6. Un peu comme ça... Javascript Interactions natif
  7. 7. WebGL OpenGL Rendu 3D Dans une balise <canvas> Javascript WebGLRenderingContext
  8. 8. Compatibilité Desktop Premières implémentations fin 2009Chrome 8.0+ Safari 5.1+ Firefox 4.0+ Opera 12.0+ IE IEWebGL Chrome Frame ...
  9. 9. Compatibilité Tablette / Mobile Premières implémentations fin 2011Blackberry Chrome Safari Opera Firefox Android Opera Browser iOS / And. iOS Mobile Android Browser Mini(PlayBook) (Dev iAd.) (Dev iAd.)
  10. 10. Comment on fait ça ? Coder en WebGL natif ou Utiliser une librairie
  11. 11. Différentes librairiesCooperLicht Three.js GLGE SpiderGL SceneJSC3DL
  12. 12. Différentes librairies Three.js
  13. 13. Three.js Ricardo Cabello Mr.doob
  14. 14. Three.js Léger Facile d’utilisationRendus WebGL, SVG et Canvas
  15. 15. Création d’une scène 3D avec Three.js
  16. 16. 5 Rendu 4 Lumière2 Caméra 1 Scène 3 Objets
  17. 17. 5 Rendu 4 Lumière2 Caméra 1 Scène 3 Objets
  18. 18. 1 Scène1 Scène 2 Caméra 3 Objets 4 Lumière 5 Rendu // Création d’une scène var scene = new THREE.Scene();
  19. 19. 5 Rendu 4 Lumière2 Caméra 1 Scène 3 Objets
  20. 20. 2 Caméra1 Scène 2 Caméra 3 Objets 4 Lumière 5 Rendu // Création d’une caméra var camera = new THREE.PerspectiveCamera( 75, // Angle de vue en degrés window.innerWidth/window.innerHeight, // Vue ratio 0.1, // Distance minimale (axe Z) 1000 // Distance maximale (axe Z) ); // Position de la caméra sur l’axe Z camera.position.z = 5;
  21. 21. 5 Rendu 4 Lumière2 Caméra 1 Scène 3 Objets
  22. 22. 3 Objets1 Scène 2 Caméra 3 Objets 4 Lumière 5 Rendu // Création d’une forme géométrique (ici un carré) var cubeGeometry = new THREE.CubeGeometry(1,1,1), cubeMaterial = new THREE.MeshLambertMaterial({ color: 0xFF0000 }); var cube = new THREE.Mesh(cubeGeometry,cubeMaterial); // Rotation du cube (X, Y, Z) cube.rotation.set(100,100,0); // On ajoute le cube à notre scène scene.add(cube);
  23. 23. 3 Objets1 Scène 2 Caméra 3 Objets 4 Lumière 5 Rendu // Importer un modèle SketchUp (Collada, .dae) new THREE.ColladaLoader().load(models/piano.dae, function(model){ var piano = model.scene; piano.scale.set(0.1, 0.1, 0.1); piano.position.set(-10, -15, 0); piano.rotation.set(Math.PI/8, Math.PI/4, 0); scene.add(piano); });
  24. 24. 3 Objets1 Scène 2 Caméra 3 Objets 4 Lumière 5 Rendu // Importer un modèle .obj converti en .js new THREE.JSONLoader().load(models/A380.js, function(planeGeometry, material){ var planeMaterial = new THREE.MeshFaceMaterial( material ); var plane = new THREE.Mesh( planeGeometry, planeMaterial ); scene.add(plane); }, models/A380);
  25. 25. 5 Rendu 4 Lumière2 Caméra 1 Scène 3 Objets
  26. 26. 4 Lumière1 Scène 2 Caméra 3 Objets 4 Lumière 5 Rendu // Création d’une lumière var directionalLight = new THREE.DirectionalLight( 0xFFFFFF, // Couleur 1 // Intensité ); directionalLight.position.set(-5, 1, 10); scene.add(directionalLight);
  27. 27. 5 Rendu 4 Lumière2 Caméra 1 Scène 3 Objets
  28. 28. 5 Rendu1 Scène 2 Caméra 3 Objets 4 Lumière 5 Rendu var renderer = new THREE.WebGLRenderer(); // Taille du rendu renderer.setSize(window.innerWidth, window.innerHeight); // On intègre le rendu dans la page document.body.appendChild(renderer.domElement); function render(){ requestAnimationFrame(render); // Rafraîchissement renderer.render(scene, camera); // Rendu } render(); // On lance le rendu
  29. 29. Bien d’autres méthodes existent...Création d’ombres, différents types de lumières, de matières et de caméras, géométries et textures dynamiques... mrdoob.github.com/three.js/docs
  30. 30. RessourcesDébuter avec Three.jshttp://www.aerotwist.com/tutorials/getting-started-with-three-js/http://www.grafikart.fr/tutoriels/javascript/three-js-3d-289http://fr.tuto.com/javascript/webgl-les-lumieres-javascript,34630.htmlEn vrachttps://github.com/mrdoob/three.js/archive/master.zip (dossier examples)http://mrdoob.github.com/three.js/http://www.chromeexperiments.com/http://dev.opera.com/articles/view/an-introduction-to-webgl/https://developer.mozilla.org/fr/docs/WebGL/Commencer_avec_WebGLhttp://learningthreejs.com/http://learningwebgl.com/blog/?page_id=1217http://www.html5rocks.com/http://alteredqualia.com/https://sketchfab.com/http://www.khronos.org/registry/webgl/specs/latest/
  31. 31. En conclusion, le WebGL c’est... Une forte valeur ajoutée « expérience utilisateur » Pas si difficile que ça, notamment avec Three.js (des notions en 3D est un plus)Une technologie qui tend à se démocratiser (mobile, e-commerce...)
  32. 32. Merci ! Slides + Démosvincentgarreau.com/webgl.zip Des questions ?

×