Introduction au WebGL
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Introduction au WebGL

on

  • 2,222 views

Introduction au WebGL et à la librairie Three.js

Introduction au WebGL et à la librairie Three.js

Statistics

Views

Total Views
2,222
Views on SlideShare
2,221
Embed Views
1

Actions

Likes
2
Downloads
38
Comments
0

1 Embed 1

https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Introduction au WebGL Presentation Transcript

  • 1. WebGL IntroductionVincent GarreauH3 P2015 15/01/2013
  • 2. Sémantique 3D / Graphisme Offline & StockagePrésentation Accès device Performance Connectivité Audio / Vidéo
  • 3. 3D / GraphismeCSS3 SVG Canvas WebGL
  • 4. WebGL Web Graphics LibraryAPI permettant de créer des environnements 3D dans un navigateur web Créé par
  • 5. WebGLComment ça fonctionne ?
  • 6. Un peu comme ça... Javascript Interactions natif
  • 7. WebGL OpenGL Rendu 3D Dans une balise <canvas> Javascript WebGLRenderingContext
  • 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. 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. Comment on fait ça ? Coder en WebGL natif ou Utiliser une librairie
  • 11. Différentes librairiesCooperLicht Three.js GLGE SpiderGL SceneJSC3DL
  • 12. Différentes librairies Three.js
  • 13. Three.js Ricardo Cabello Mr.doob
  • 14. Three.js Léger Facile d’utilisationRendus WebGL, SVG et Canvas
  • 15. Création d’une scène 3D avec Three.js
  • 16. 5 Rendu 4 Lumière2 Caméra 1 Scène 3 Objets
  • 17. 5 Rendu 4 Lumière2 Caméra 1 Scène 3 Objets
  • 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. 5 Rendu 4 Lumière2 Caméra 1 Scène 3 Objets
  • 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. 5 Rendu 4 Lumière2 Caméra 1 Scène 3 Objets
  • 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. 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. 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. 5 Rendu 4 Lumière2 Caméra 1 Scène 3 Objets
  • 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. 5 Rendu 4 Lumière2 Caméra 1 Scène 3 Objets
  • 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. 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. 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. 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. Merci ! Slides + Démosvincentgarreau.com/webgl.zip Des questions ?