Introduction au WebGL

2 746 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 746
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
79
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 ?

×