Introduction au WebGL

2,541 views

Published on

Introduction au WebGL et à la librairie Three.js

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,541
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
70
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

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 ?

×