Upload
vincent-garreau
View
1.849
Download
1
Embed Size (px)
DESCRIPTION
Introduction au WebGL et à la librairie Three.js
Citation preview
Introduction
WebGLWebGL
Vincent GarreauH3 P2015 15/01/2013
Sémantique
Offline & Stockage
Accès device
Connectivité
Audio / Vidéo
Performance
Présentation
3D / Graphisme
3D / Graphisme3D / Graphisme
CSS3 SVG Canvas WebGL
WebGLWebGL
API permettant de créer des environnements 3D
dans un navigateur web
API permettant de créer des environnements 3D
dans un navigateur web
Créé par
Web Graphics LibraryWeb Graphics Library
WebGLWebGL
Comment ça fonctionne ?Comment ça fonctionne ?
Javascriptnatif
Javascriptnatif
InteractionsInteractions
Un peu comme ça...Un peu comme ça...
Javascript
Dans une balise <canvas>WebGLRenderingContext
WebGLWebGL OpenGLOpenGL Rendu 3DRendu 3D
CompatibilitéCompatibilité
Chrome 8.0+ Safari 5.1+ Firefox 4.0+ Opera 12.0+
DesktopPremières implémentations fin 2009
IE
IEWebGLChrome Frame
...
Tablette / MobilePremières implémentations fin 2011
SafariiOS
(Dev iAd.)
ChromeiOS / And.(Dev iAd.)
OperaMini
AndroidBrowser
FirefoxAndroid
BlackberryBrowser
(PlayBook)
OperaMobile
CompatibilitéCompatibilité
Comment on fait ça ?Comment on fait ça ?
Coder en WebGL natif
Utiliser une librairie
ou
Coder en WebGL natif
Utiliser une librairie
ou
Différentes librairiesDifférentes librairies
CooperLichtCooperLicht
SceneJSSceneJS
GLGEGLGE
Three.jsThree.js
SpiderGLSpiderGL
C3DLC3DL
Différentes librairiesDifférentes librairies
Three.jsThree.js
Three.jsThree.js
Ricardo CabelloRicardo Cabello
Mr.doobMr.doob
Three.jsThree.js
LégerLéger
Facile d’utilisationFacile d’utilisation
Rendus WebGL, SVG et CanvasRendus WebGL, SVG et Canvas
Création d’une scène 3Davec Three.js
Création d’une scène 3Davec Three.js
1 ScèneScène
2 CaméraCaméra
3 ObjetsObjets
4 LumièreLumière5 RenduRenduRendu
1 ScèneScène
2 CaméraCaméra
5 RenduRendu
Objets3
4 Lumière
Scène1 Caméra2 Objets3 Lumière4 Rendu5
// Création d’une scènevar scene = new THREE.Scene();
ScèneScène1
1 ScèneScène
2 CaméraCaméra
5 RenduRendu
Objets3
4 Lumière
Scène1 Caméra2 Objets3 Lumière4 Rendu5
// Création d’une caméravar camera = new THREE.PerspectiveCamera(
75, // Angle de vue en degréswindow.innerWidth/window.innerHeight, // Vue ratio 0.1, // Distance minimale (axe Z)1000 // Distance maximale (axe Z)
);
// Position de la caméra sur l’axe Zcamera.position.z = 5;
CaméraCaméra2
1 ScèneScène
2 CaméraCaméra
5 RenduRendu
3
4 Lumière
ObjetsObjets
Scène1 Caméra2 Objets3 Lumière4 Rendu5
// 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ènescene.add(cube);
ObjetsObjets3
Scène1 Caméra2 Objets3 Lumière4 Rendu5
// 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);
});
ObjetsObjets3
Scène1 Caméra2 Objets3 Lumière4 Rendu5
// 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');
ObjetsObjets3
1 ScèneScène
2 CaméraCaméra
5 RenduRendu
3 ObjetsObjets
4 LumièreLumière
Scène1 Caméra2 Objets3 Lumière4 Rendu5
// Création d’une lumière
var directionalLight = new THREE.DirectionalLight(0xFFFFFF, // Couleur1 // Intensité
);
directionalLight.position.set(-5, 1, 10);
scene.add(directionalLight);
LumièreLumière4
1 ScèneScène
2 CaméraCaméra
3
4
ObjetsObjets
LumièreLumière5 RenduRenduRendu
Scène1 Caméra2 Objets3 Lumière4 Rendu5
var renderer = new THREE.WebGLRenderer();
// Taille du rendurenderer.setSize(window.innerWidth, window.innerHeight);// On intègre le rendu dans la pagedocument.body.appendChild(renderer.domElement);
function render(){requestAnimationFrame(render); // Rafraîchissementrenderer.render(scene, camera); // Rendu
}
render(); // On lance le rendu
RenduRendu5
Bien d’autres méthodesexistent...
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
Bien d’autres méthodesexistent...
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
RessourcesRessourcesDébuter avec Three.jshttp://www.aerotwist.com/tutorials/getting-started-with-three-js/
En vrac
http://mrdoob.github.com/three.js/
http://www.grafikart.fr/tutoriels/javascript/three-js-3d-289
http://fr.tuto.com/javascript/webgl-les-lumieres-javascript,34630.html
http://dev.opera.com/articles/view/an-introduction-to-webgl/
https://developer.mozilla.org/fr/docs/WebGL/Commencer_avec_WebGL
http://learningthreejs.com/
http://learningwebgl.com/blog/?page_id=1217
http://www.html5rocks.com/http://alteredqualia.com/
https://sketchfab.com/http://www.khronos.org/registry/webgl/specs/latest/
http://www.chromeexperiments.com/
https://github.com/mrdoob/three.js/archive/master.zip (dossier examples)
Une forte valeur ajoutée « expérience utilisateur »Une forte valeur ajoutée « expérience utilisateur »
En conclusion, le WebGL c’est...En conclusion, le WebGL c’est...
Pas si difficile que ça, notamment avec Three.js (des notions en 3D est un plus)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...)
Une technologie qui tend à se démocratiser (mobile, e-commerce...)
Merci !Merci !
Des questions ?Des questions ?
vincentgarreau.com/webgl.zipSlides + Démos
vincentgarreau.com/webgl.zipSlides + Démos